当前位置: 首页 > news >正文

miaov-React 最佳入门

node 环境搭建

快速安装国内镜像

npm i -g nrm
nrm use taobao

简单介绍 ES6

let const

  • let 不可以被重复声明,而 var 可以

箭头函数

  • 等效匿名函数

  • 没有 arguments

  • this 指向了函数所在的上下文环境

  • 函数的返回值

    let a = () => {};  console.log(a); // undefined, 误认为返回的是表达式
    let b = () => ({});console.log(b); // {}

剩余参数

    function fn(a,...re){ console.log(re) };
    fn(1,2,3)    // [2,3]

解构赋值

    let human = { id: 0 };
    let { id: id1} = human;
    console.log(id1);    // 0, 已经把 id 给了 id1

  • 是个语法糖,看起来更像 OOP

  • 用法:

    class Animal{
    constructor(a, b){    // 传递参数
        this.a = a;
        this.b = b;
    }
    add(){
        return console.log(this.a + this.b)
    }
    }
    let a = new Animal(1,2)
    console.log(a) // {a: 1,b: 2}
    a.add()    // 3
  • 继承

    class Human extends Animal{
    constructor(name){
        super(3,4)    // 执行父类的构造函数
        this.name = name
    }
    }
    let hu = new Human()
    console.log(hu.a)    // 3

简单介绍 commonJS,ES6模块化规范

  • commonJS: require('') / module.exports = {}

  • ES6: import {} from '' / export {}

工作流程

  • 包管理器,管理安装项目依赖:npm ( install, update, remove, analyse )

  • 任务流工具:Grunt, gulp ( 两者无法支持模块化开发 ), webpack ( 模块打包,代码检查等 )

Babel 简单介绍

  • 可以把很多不是 JS 的文件自动编成 JS

  • babel-core: 核心库,类似一个裸机,只有操作系统,需要装软件才能发挥大作用

  • plugins: 插件,各种各样的插件,例如:es2015-arrow-functions 编译箭头函数

  • presets: 预设,会把很多插件打包到一起,例如:react/latest

  • .babelrc: 配置文件,填写 plugins 和 presets

  • 官方网站可以体验:https://babeljs.io

webpack 简单介绍

  • 安装: $ npm i -D webpack

  • 项目结构:

    |-dist    // 打包生成文件存放
    |-src
       |- app.js // 入口文件
  • 代码:

    // webpack.config.js
    
    const path = require('path')
    
    module.exports = {
        entry: ‘./src/app.js’,    // 项目入口文件
        output: {    
            filename: 'main.js'    // 打包后的文件
            path: path.resolve(__dirname, 'dist/assets')// 打包保存到哪里,绝对路径
            publicPath: '/assets/'    // 未知
        }
    }
  • 执行:$ webpack

相关文章:

  • Next.js之基础概念(二)
  • 日志详解
  • High-Level Streams DSL(翻译)
  • seo优化中不容忽视的页面优化
  • predis连接redis sentinel和redis cluster
  • 4.NIO的非阻塞式网络通信
  • 远程通信的几种选择(RPC,Webservice,RMI,JMS的区别)
  • 从Code Review 谈如何做技术(zz)酷 壳
  • 大白话讲Zookeeper能做什么?(一):命名服务与配置管理
  • 大数据拼精准 可否触动电商个性营销神经
  • 二进制安装MySQL5.5.57
  • Ubuntu 安装和使用 Supervisor(进程管理)
  • 本地虚拟化开发环境 vagrant+virtualbox
  • centos下为php添加gd/curl/zip扩展
  • Simple2D-20(重构)
  • Android系统模拟器绘制实现概述
  • Android优雅地处理按钮重复点击
  • Debian下无root权限使用Python访问Oracle
  • express如何解决request entity too large问题
  • HTTP--网络协议分层,http历史(二)
  • Java,console输出实时的转向GUI textbox
  • React组件设计模式(一)
  • Redux 中间件分析
  • vue.js框架原理浅析
  • vue中实现单选
  • 对话 CTO〡听神策数据 CTO 曹犟描绘数据分析行业的无限可能
  • 聊聊springcloud的EurekaClientAutoConfiguration
  • 名企6年Java程序员的工作总结,写给在迷茫中的你!
  • 扫描识别控件Dynamic Web TWAIN v12.2发布,改进SSL证书
  • 使用 @font-face
  • 通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout
  • 小试R空间处理新库sf
  • 一天一个设计模式之JS实现——适配器模式
  • 正则与JS中的正则
  • 没有任何编程基础可以直接学习python语言吗?学会后能够做什么? ...
  • ​【原创】基于SSM的酒店预约管理系统(酒店管理系统毕业设计)
  • ​LeetCode解法汇总307. 区域和检索 - 数组可修改
  • ​Python 3 新特性:类型注解
  • #Js篇:单线程模式同步任务异步任务任务队列事件循环setTimeout() setInterval()
  • #使用清华镜像源 安装/更新 指定版本tensorflow
  • #我与Java虚拟机的故事#连载02:“小蓝”陪伴的日日夜夜
  • #周末课堂# 【Linux + JVM + Mysql高级性能优化班】(火热报名中~~~)
  • $.each()与$(selector).each()
  • (¥1011)-(一千零一拾一元整)输出
  • (1)(1.19) TeraRanger One/EVO测距仪
  • (2)nginx 安装、启停
  • (附源码)ssm高校实验室 毕业设计 800008
  • (解决办法)ASP.NET导出Excel,打开时提示“您尝试打开文件'XXX.xls'的格式与文件扩展名指定文件不一致
  • (深度全面解析)ChatGPT的重大更新给创业者带来了哪些红利机会
  • (算法)Game
  • (转)Google的Objective-C编码规范
  • (转)菜鸟学数据库(三)——存储过程
  • (转)人的集合论——移山之道
  • ./configure,make,make install的作用(转)
  • .MSSQLSERVER 导入导出 命令集--堪称经典,值得借鉴!