如何在 NodeJs 上搭建 React 開發環境
步驟：
1. 安裝 nodejs ：根據你的 Windows 型別(x86或x64)下載相應的安裝包，安裝完成後，在任一目錄下開啟 cmd 視窗並執行 node -v 命令，則會輸出 node 的版本資訊。
--注：在 windows 作業系統中，如果把 nodejs 安裝在系統盤（如：C盤），初始化時會提示 nodejs 沒有操作檔案的許可權（無法新建 package.json 檔案）。
（建議在非系統盤中安裝 nodejs ，本例安裝路徑：D:\Program Files）
2. 初始化 npm：安裝 nodejs 時會預設安裝 npm，在 cmd 視窗中執行 npm -v 命令會輸出 npm 的版本資訊。
接著執行 npm init 命令，並設定相關引數即完成 npm 初始化。這時 nodejs 會在當前目錄下（這裡是：D:\Program Files\nodejs 目錄）新建一個 package.json 檔案。
3. 利用 npm 安裝 react 相關的包：
3.1 執行 npm install react react-dom --save-dev 命令，安裝 react 和 react-dom 包。
其中 --save-dev 表示在 package.json 檔案的 devDependencies 節點下新增包的引用，--save 表示在 package.json 檔案的 dependencies 節點下新增包的引用
3.1 執行 npm install webpack webpack-dev-server --save-dev 命令，安裝 webpack 和 webpack-dev-server 包。
webpack 用來打包並壓縮 js 檔案，webpack-dev-server 用來實時同步修改過的 js，html，css 檔案到瀏覽器。
3.5 執行 npm install jsx-loader --save-dev 命令，安裝 jsx-loader 包（用來把按 ES5 規範編寫的 .jsx 檔案轉成 .js 檔案）。
如果需要支援符合 ES6 規範的指令碼檔案（.js 或 .jsx），還需安裝下面 4 個包：babel-core babel-loader babel-preset-es2015 babel-preset-react
如果需要用到路由，還需安裝：react-router。
配置 Webpack：
1. Webpack 使用一個名為 webpack.config.js 的配置檔案，可以手動新增一個 webpack.config.js 檔案到 nodejs 根目錄下，並按如下方式新增相關節點：
var path = require("path"); var webpack = require('webpack'); module.exports = { entry: { app: ['./app/main.jsx'] }, output: { path: path.resolve(__dirname, "./build"), publicPath: "http://127.0.0.1:8080/build/", filename: "bundle.js" }, resolve: { extensions: ['','.js','.jsx'] }, module: { loaders: [ {test:/\.jsx$/, loaders:['jsx?harmony']} ], //使用ES6時，才需要新增此loaders loaders:[ { test: /\.jsx?$/, loader: 'babel', include: ROOT_PATH, query: { //新增兩個presents 使用這兩種presets處理js或者jsx檔案 presets: ['es2015', 'react'] } } ] }, devServer: { historyApiFallback: true, hot: true, inline: true, progress: true }, plugins: [ new webpack.DefinePlugin({ 'process.env.NODE.ENV':"development" }), new webpack.HotModuleReplacementPlugin() ] };
resolve 指定可以被 require 的檔案字尾。比如 Hello.jsx 這樣的檔案就可以直接用 require(./Hello) 引用。
loaders 指定 jsx-loader 編譯字尾名為 .jsx 的檔案，建議給含有 JSX 的檔案新增 .jsx 字尾，當然你也可以直接使用 .js 字尾， 相應的 test 節點下的正則表示式也要修改。
Webpack 內建支援 CommonJS，所以可以直接用 npm 下載安裝模組，然後直接 require 使用模組。
安裝 React: npm install react --save
使用 React: var React = require('react');
2. 修改 package.json 檔案中的 scripts 節點為：
{ "name": "nodejs", "version": "1.0.0", "description": "", "main": "", "dependencies": { "npm": "^3.10.8" }, "devDependencies": { "jsx-loader": "^0.13.2", "react": "^15.3.2", "react-dom": "^15.3.2", "webpack": "^1.13.3", "webpack-dev-server": "^1.16.2", //如果需要支援ES6，還需新增以下引用 "babel-core": "^6.18.2", "babel-loader": "^6.2.7", "babel-preset-es2015": "^6.18.0", "babel-preset-react": "^6.16.0", }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack-dev-server --inline" }, "author": "", "license": "ISC" }
新增專案檔案：
1. 新增 app/main.jsx，main.jsx 檔案的內容如下：
var React = require('react'); var ReactDOM = require('react-dom'); var AppComponent = require('./components/Comment.jsx'); ReactDOM.render(<AppComponent />, document.getElementById('content'));
2. 新增 app/components/Comment.jsx， Comment.jsx 檔案的內容如下：
var React = require('react'); var Comment = React.createClass({ render: function(){ return ( <div className="comment"> This is a React component! </div> ); } }); module.exports = Comment;
這時的 app 檔案目錄如下：
3. 新增 build/index.html，index.html 檔案的內容如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React Test</title> </head> <body> <div id="content"></div> <script src="http://127.0.0.1:8080/build/bundle.js"></script> </body> </html>
編譯與執行：
先在 cmd 視窗中執行 npm run start 命令，然後在瀏覽器中輸入：http://localhost:8080/build/index.html 來檢視頁面。如果修改了 js 檔案，只需儲存一下瀏覽器就會自動重新整理。
ES6的例子：
1. 新增 app/app.js 檔案的內容如下：
import React from 'react'; import ReactDOM from 'react-dom'; class App extends React.Component{ constructor() { super(); } render() { //JSX here! return ( <div className="container"> <section className="jumbotron"> <h3 className="jumbotron-heading">Search Github Users</h3> </section> </div> ) } }; const app = document.createElement('div'); document.body.appendChild(app); ReactDOM.render(<App />, app);
2. 新增 build/index.html，index.html 檔案的內容如下：
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="content"></div> <script src="http://127.0.0.1:8080/build/bundle.js"></script> </body> </html>
備註：
由於 Babel 可以轉換 ES5 和 ES6 格式的指令碼，所以可以在一個 .js 檔案裡，同時運用兩種語法，如下所示：
import React from 'react'; import ReactDOM from 'react-dom'; const About = React.createClass({ render(){ return(<div>About</div>) } }) const Inbox = React.createClass({ render(){ return(<div>Inbox</div>) } }) const Home = React.createClass({ render(){ return(<div>Home</div>) } }) const App = React.createClass({ getInitialState() { return { route: window.location.hash.substr(1) } }, componentDidMount() { window.addEventListener('hashchange', () => { this.setState({ route: window.location.hash.substr(1) }) }) }, render() { let Child switch (this.state.route) { case '/about': Child = About; break; case '/inbox': Child = Inbox; break; default: Child = Home; } return ( <div> <h1>App</h1> <ul> <li><a href="#/about">About</a></li> <li><a href="#/inbox">Inbox</a></li> </ul> <Child/> </div> ) } }) ReactDOM.render(<App />, document.body)