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