React工程搭建

1. 设置初始项目结构
建立项目文件夹，mySubject，并在里面新建两个文件夹：dev、output。dev存放项目代码，output存放经babel转码的文件。项目根目录（mySubject）中新建index.html，其中：
    <body>
      <div id=“container”></div>    //用于显示react渲染的内容
      <script src=“output/myCode.js”></script>  //引入转码后的js文件
    </body>

2. 安装和初始化node.js
安装最新版本的nodejs
终端进入项目文件夹，在根目录下初始化nodejs：
    npm init
注意项目名称需小写，其他默认即可；
这会创建一个package.json文件，是nodejs的项目配置文件。

3.安装React依赖、Webpack和Babel
安装react和react-dom两个组件，终端命令：
    npm install react react-dom --save
安装webpack，终端命令：
    npm install web pack --save
    在项目根目录新建webpack.config.js文件，并编辑内容如下：

    var webpack = require("webpack");
    var path = require("path");

    var DEV = path.resolve(__dirname, "Dev");
    var OUTPUT = path.resolve(__dirname, "output");

    var config = {
      entry: DEV + "/index.jsx",
      output: {
        path: OUTPUT,
        filename: "myCode.js"
      }
    };

    module.exports = config;
这里我们定义了两个变量 DEV、OUTPUT，这两个变量指向项目中的同名文件夹。在 config 对象中，有两个属性 entry 和 output，这两个属性分别使用 DEV 和 OUTPUT 变量来帮助映射 index.jsx 文件到 myCode.js。

安装和设置babel，安装命令：
    npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save
    注意，一定要安装babel-core。
在package.json文件中配置babel，增加内容如下：
      "babel": {
      "presets": [
        "es2015",
        "react"
        ]
      }
在webpack.config.js中设置babel，编辑config部分的内容如下：
    var config = {
      entry: DEV + "/index.jsx",
      output: {
        path: OUTPUT,
        filename: "myCode.js"
      },
      module: {
      loaders: [{
        include: DEV,
        loader: "babel",
        }]
      }
    };
实际上只增加了module部分的内容。

4.创建jsx文件
在dev文件夹内新建index.jsx文件，编辑内容如下：
    import React from "react";
    import ReactDOM from "react-dom";

    var HelloWorld = React.createClass({
      render: function() {
        return (
          <p>Hello, {this.props.greetTarget}!</p>
        );
      }
    });

    ReactDOM.render(
      <div>
        <HelloWorld greetTarget="Batman"/>
        <HelloWorld greetTarget="Iron Man"/>
        <HelloWorld greetTarget="Nicolas Cage"/>
        <HelloWorld greetTarget="Mega Man"/>
        <HelloWorld greetTarget="Bono"/>
        <HelloWorld greetTarget="Catwoman"/>
      </div>,
    document.querySelector("#container")
    );
注意！只需用import...from语句引入react和react-dom文件，无需用src导入。
其他与普通的react写法无异。

5.运行webpack，终端命令：
    ./node_modules/.bin/webpack
如果运行不出错，在浏览器中打开根目录下的index.html文件，即可看到正常的输出。

posted @ 2016-12-22 14:36  大渡横流  阅读(111)  评论(0)    收藏  举报