初學React: 建立環境

建立package.json

npm init

安裝React

• react
  • react 核心套件
• react-dom
  • 建立react與dom之間的橋梁

npm install react react-dom

安裝webpack

• Global Installation

npm install webpack -g

• Local Installation

npm install webpack --save-dev

npm install webpack@<version> --save-dev

• 建立webpack.config.js
• 在package.json加入啟動webpack的script

"scripts": {
    "start": "webpack --config webpack.config.js"
}

• 建立各類型的Loader(loader: 類似於 browserify 內的 transforms)
  • babel-loader:用來轉譯 jsx 與 ES6 語法的 loader。
• 建立local server
  • webpack-dev-server + react-hot-loader
    • 功能: 建立local端server, 以便實做livereload
    • webpack-dev-server指令介紹
      • webpack-dev-server 會在 localhost:8080 建立起專案的 server
      • --devtool eval 會顯示出發生錯誤的行數與檔案名稱
      • --progress 會顯示出打包的過程
      • --colors 會幫 webpack 顯示的訊息加入顏色
      • --content-based build 指向專案最終輸出的資料夾
    • 快速指令:
      • 到package.json 內加入一個新 dev 的指令:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --devtool eval --progress --colors 
            --content-base build"
}

• 建立react-hot-loader
  • 套件安裝
    • react-hot-loader
      • 代替react-hot-loader的插件，是基於Babel Plugin的。這是一個基本的架子，要實現熱替換還要安裝其他插件。
    • (選擇)react-transform-catch-errors
      • 把catch到的錯誤直接顯示到頁面上
    • (選擇)redbox-react
      • 把catch到的錯誤直接顯示到頁面上
  • 建立環境
    • webpack.config.js

      • entry: [
         'webpack-dev-server/client?http://0.0.0.0:3000', // WebpackDevServer host and port
         'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
         './scripts/index' // Your appʼs entry point
        ]

      •  devServer:{
             historyApiFallbaack: true,
             hot: true,
             inline: true,
             progress: true
         }

      • module: {
         loaders: [
         { test: /\.jsx?$/, loaders: ['react-hot', 'jsx?harmony'], include: path.join(__dirname, 'src') }
         ]
        }
        // JSX也可以替換成JS, 只需要確保所有的程式都可hot-reload

      • var webpack = require('webpack');
        
        plugins: [
         new webpack.HotModuleReplacementPlugin()
        ]
        
        Note: If you are using Webpack Dev Server command line interface 
        instead of its Node API, and you specify --hot mode, don’t add this plugin. 
        It is mutually exclusive with the --hot option.

    • package.json

      • "scripts": {
         "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
        },

安裝babel (CLI: Command Line)

• Installation

npm install --save-dev babel-cli babel-preset-env

• Usage

設定package.json

  {
    "name": "my-project",
    "version": "1.0.0",
+   "scripts": {
+     "build": "babel src -d lib"
+   },
    "devDependencies": {
      "babel-cli": "^6.0.0"
    }
  }

執行方式

$ npm run build
或
$ ./node_modules/.bin/babel src -d lib

• 安裝preset套件, 並建立 .babelrc 檔

$ npm install babel-preset-env --save-dev

註:  babel-preset這個屬性是在告訴babel需要轉譯哪些語法,

babel-preset

• .babelrc 檔設定

{
  "presets": ["env"] // default runs all transforms
}

• babel套件(optional)
  • babel-eslint: 檢查babel語法
    • 註:You don’t need to use babel-eslint if you are using ES2015 (ES6), ES2016 (ES7) or ES2017 (ES8). ESLint actually supports ES2015/ES2016/ES2017, JSX, and object rest/spread by default now.