React學習筆記1：環境搭建

StonePanda發表於2016-01-20
React筆記

新搭建的個人部落格，本文地址：React學習筆記1：環境搭建

本文的書寫環境為mac，之後會補充windows下的差異

1、建立學習目錄

mkdir learn
cd learn

2、npm初始化專案

npm init //根據相關提示完善資訊，入口js檔案：src/index.js

3、安裝相關react npm包，並且使用es2015（也就是es6支援，需要babel-preset-es2015包），因為我之前做個一些js相關專案，所以部分npm包已經全域性安裝，比如webpack等等，大家根據提示補足自己的npm包即可

npm install --save react react-dom babel-preset-react babel-preset-es2015 babel-loader

4、建立相關檔案目錄結構

mkdir src   //存放原始檔
mkdir build //存放編譯後的js檔案

5、建立webpack配置檔案（webpack好強大，之後再做詳細的學習）

touch webpack.config.js
var path = require(`path`);
module.exports = {
  entry:[
    `./src/index.js`
  ],
  output: {
        path: path.resolve(__dirname, `build`),
        filename: `bundle.js`
    },
    module: {
        loaders: [{
          test: /.jsx?$/,
          exclude: /(node_modules|bower_components)/,
          loader: `babel-loader`, // `babel-loader` is also a legal name to reference
          query: {
            presets: [`es2015`,`react`]
          }
        }]
    },
    devServer:{
        contentBase:`./build`
    }
};

6、建立index.js原始檔，書寫經典的Hello World！

touch src/index.js
var React = require(`react`);
var ReactDOM = require(`react-dom`);

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById(`example`)
);

7、利用webpack編譯原始檔，根目錄下直接執行webpack，執行完成後會在build目錄生成bundle.js檔案

$ webpack
Hash: 32a8e736b4323f7ec350
Version: webpack 1.12.9
Time: 1318ms
    Asset    Size  Chunks             Chunk Names
bundle.js  676 kB       0  [emitted]  main
   [0] multi main 28 bytes {0} [built]
    + 159 hidden modules

8、建立index.html承載體檔案，引入bundle.js，方便在瀏覽器中執行

touch build/index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React環境搭建</title>
  </head>
  <body>
    <div id="example"></div>
  </body>
  <script src="bundle.js"></script>
</html>

9、瀏覽器直接開啟index.html，出現Hello world！
10、每次修改完成，執行webpack還是很麻煩的，利用webpack-dev-server可以完成自動自動編譯，自動重新整理瀏覽器

$ webpack-dev-server
http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from ./build
Hash: 67262048da84a36a0a5c
Version: webpack 1.12.9
Time: 1325ms
    Asset    Size  Chunks             Chunk Names
bundle.js  676 kB       0  [emitted]  main
chunk    {0} bundle.js (main) 643 kB [rendered]

瀏覽器進入http://localhost:8080/webpack…輸出Hello world！
webpack的配置指定了webpack-dev-server的根目錄

    devServer:{
        contentBase:`./build`
    }

嘗試修改src/index.js的內容，頁面有自動重新整理了

OK，到此完成環境的基本搭建！

相關文章