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

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

總結

以上是生活随笔為你收集整理的react 最佳入门_miaov-React 最佳入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。