步驟：
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 的配置文件，里面將會存儲當前程序所引用的 js 組件（包）的版本信息。
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:[ { test: /\.jsx?$/, loader: 'babel', include: path.resolve(__dirname), query: { //添加兩個預先加載的組件，用來處理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語法 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)
官網DEMO：https://github.com/reactjs/react-router-tutorial/tree/master/lessons
參考配置文件：http://schemastore.org/json/