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