说说React的事（二）

前面说到了React的一些基础知识，现在说说怎样从零开始在Node.js下，使用webpack打包，使用Babel解析JSX，最终构造React的运行环境。在这里假设已经装好了Node.js，没装的话可以点击这个地址[nodejs](https://nodejs.org/en/)下载。 ![Node.js](http://upload-images.jianshu.io/upload_images/2381943-1c17000bc524fe82.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 1、首先，在这里我们先创建一个空的文件夹，在这里我建了一个名为**ReactNpmTest**的文件夹。并在其下建了一个views的文件夹添加了**home.html**和**home.jsx**文件。 home.html ``` <!DOCTYPE html> Hello React!

``` hom.jsx ``` var React = require("react"); var ReactDOM = require("react-dom"); var Home = React.createClass({ render: function() { return

Hello, World!

; } }); ReactDOM.render(, document.getElementById("example")); ``` 2、初始化并生成**package.json**，使用如下命令，并输入相应信息。 ``` npm init ``` 最终生成了类似如下文件 ``` { "name": "npmtest", "version": "1.0.0", "description": "A app for examples", "main": "index.js", "keywords": [ "Examples" ], "author": "YLD", "license": "ISC" } ``` 3、安装**webpack**，使用**--save**可以将依赖包保存至**package.json**中的**dependencies**，而再加**-dev**则可以保存在**devDependencies**中。 ``` npm install webpack --save-dev ``` 4、安装Rect相关库: **react**和**react-dom**。 ``` npm install react --save npm install react-dom --save ``` 5、安装Jsx解析工具Babel，这里我们需要**babel-core**, **babel-loader**。 ``` npm install babel-core --save-dev npm install babel-loader --save-dev ``` 6、至此我们所需要的包已经安装完毕，接下来为了让webpack正常工作我们需要在我们创建的**ReactNpmTest**文件夹下添加**webpack.config.js**，webpack的配置文件了。 ``` var webpack = require ('webpack'); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin ('common.js'); module.exports = { plugins: [commonsPlugin], entry: { "nt-home": "./views/home.jsx" }, output: { path: './dist/scripts', filename: '[name].js' }, module: { loaders: [ { test: /\\\\.jsx$/, exclude: /node_modules/, loader: 'babel', } ] }, resolve: { extensions: ['', '.js', '.jsx', '.less', '.css'] } }; ``` 7、配置npm start命令，通过此命令可以让webpack编译打包功能快速启动。在**package.json**中添加**scripts**相。npm run的命令即是npm run-script。 ``` { "name": "npmtest", "version": "1.0.0", "description": "A app for examples", "main": "index.js", "keywords": [ "Examples" ], "author": "YLD", "license": "ISC", "dependencies": { "react": "^15.2.1", "react-dom": "^15.2.1" }, "devDependencies": { "babel-core": "^6.11.4", "babel-loader": "^6.2.4", "babel-preset-es2015": "^6.9.0", "babel-preset-react": "^6.11.1", "webpack": "^1.13.1" }, "scripts": { "start": "npm run webpack", "webpack": "webpack --progress --colors --watch" }, } ``` 8、在终端中输入**npm start**命令启动并编译文件，而此时得到的**nt-home.js**是可在浏览器中直接运行的js代码。 9、如果装的Babel是Babel 6的话可能会出现以下错误，原因是babel6已经对es5和es6分开解析。 ![编译出错了](http://upload-images.jianshu.io/upload_images/2381943-7e53945a89809ba8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 10、不用担心，我们可以做如下处理，安装如下包 ``` npm install babel-preset-es2015 --save-dev npm install babel-preset-react --save-dev ``` 安装成功之后，我们须在**webpack.config.js**中的loader添加presets，最终该文件如下： ``` var webpack = require ('webpack'); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin ('common.js'); module.exports = { plugins: [commonsPlugin], entry: { "nt-home": "./views/home.jsx" }, output: { path: './dist/scripts', filename: '[name].js' }, module: { loaders: [ { test: /\\\\.jsx$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } } ] }, resolve: { extensions: ['', '.js', '.jsx', '.less', '.css'] } }; ``` 最后在终端中输入**npm start**命令启动，可以看到成功后的样子。 ![启动成功](http://upload-images.jianshu.io/upload_images/2381943-7e1d89ee618fd066.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 打开home.html可以看到页面上出现了Hello, world!接下来你可以任性的添加React Jsx代码了。 ![运行成功了](http://upload-images.jianshu.io/upload_images/2381943-3f2349dd195e49c4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)