说说React的事(二)

前面说到了React的一些基础知识,现在说说怎样从零开始在Node.js下,使用webpack打包,使用Babel解析JSX,最终构造React的运行环境。在这里假设已经装好了Node.js,没装的话可以点击这个地址nodejs下载。

Node.js

1、首先,在这里我们先创建一个空的文件夹,在这里我建了一个名为ReactNpmTest的文件夹。并在其下建了一个views的文件夹添加了home.htmlhome.jsx文件。
home.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
    </head>
    <body>
        <div id="example"></div>
        <script src="../dist/scripts/common.js"></script>
        <script type="text/javascript" src="../dist/scripts/nt-home.js"></script>
    </body>
</html>

hom.jsx

var React = require("react");
var ReactDOM = require("react-dom");
var Home = React.createClass({
    render: function() {
        return <div>Hello, World!</div>;
    }
});
ReactDOM.render(<Home/>, 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相关库: reactreact-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分开解析。

编译出错了

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命令启动,可以看到成功后的样子。

启动成功

打开home.html可以看到页面上出现了Hello, world!接下来你可以任性的添加React Jsx代码了。

运行成功了

推荐阅读更多精彩内容