By

搭建环境

参考文

https://facebook.github.io/react/docs/installation.html

方式一 官方命令cli (推荐 可快速上手)

  • 安装 
    1

    create-react-app
1
2
3
4
5

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

一切顺利可以看到浏览器

1

http://localhost:3000/

  • 目录说明
1
2
3
4
5
6
7
8
9
10
11
12
13

├── README.md               说明
├── package.json            npm 配置
├── build                   发布目录
├── public                  资源模板目录
│   ├── favicon.ico
│   └── index.html          模板页
└── src                     源码目录
    ├── App.css
    ├── App.js              app组件
    ├── App.test.js
    ├── index.css
    ├── index.js            index启动
    └── logo.svg
  • 命令说明

打开 

1

package.json
看下scripts

1
2
3
4
5
6

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
}

npm start 启动开发环境 npm run build 编译模式 目标目录 

1

build
npm run test 测试 npm run eject 切换DIY模式，原来是 
1

react-script
 包装好的

方式二 手动配置webpack

  • 1

    npm init
     初始项目
1
2
3

mkdir react-webpack
cd react-webpack
npm init
  • npm 包安装
1

npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-es2015 babel-preset-react react react-dom webpack-dev-server webpack
  • 创建 
    1

    webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common'); // 合并重复代码到 common.js 文件中

module.exports = {
    entry: {
        "01-helloword": __dirname + "/src/01-helloword.js" // 多文件入口
    },
    devtool: 'source-map',
    output: {
        path: __dirname + "/build",
        filename: "[name].js" // [name] 是entry入口的 key
    },
    plugins: [commonsPlugin],
    module: {
        loaders: [{
            test: /\.js$/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015', 'react'] // es6 react 编译
            }
        }]
    },
    resolve: {
        extensions: ['.js', '.json'] // 默认扩展名
    }
}

src 是源码目录 build 是编译后目标目录

  • 修改 
    1

    package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

{
  "name": "react-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node_modules/.bin/webpack -d --watch",
    "server": "node_modules/.bin/webpack-dev-server --inline",
    "dist": "node_modules/.bin/webpack -p"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-env": "^1.4.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.5"
  }
}

我这里设置了两个scripts npm start 监听方式自动编译开发调试 npm run server localhost:8080本地www服务 npm run dist 产品的方式发布

  • 创建 
    1

    page\01-helloword.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="favicon.ico">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="../build/common.js"></script>
    <script src="../build/01-helloword.js"></script>
  </body>
</html>
  • 创建 
    1

    src\01-helloword.js
1
2
3
4
5
6
7

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render( 
    <h1> Hello, world! </h1>,
    document.getElementById('root')
);
  • 执行 
    1

    npm start
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

> webpack -d --watch

Webpack is watching the files…

Hash: 8a6fd54e01f7bfb59aa4
Version: webpack 2.4.1
Time: 8630ms
                 Asset     Size  Chunks                    Chunk Names
01-helloword-bundle.js  1.99 MB       0  [emitted]  [big]  main
   [5] ./~/react-dom/lib/ReactDOMComponentTree.js 6.27 kB {0} [built]
   [6] ./~/fbjs/lib/ExecutionEnvironment.js 1.06 kB {0} [built]
   [8] ./~/react-dom/lib/ReactInstrumentation.js 601 bytes {0} [built]
  [10] ./~/react-dom/lib/ReactUpdates.js 9.67 kB {0} [built]
  [19] ./~/react/lib/React.js 3.34 kB {0} [built]
  [80] ./~/react-dom/index.js 58 bytes {0} [built]
  [81] ./~/react/react.js 55 bytes {0} [built]
 [111] ./~/react-dom/lib/ReactDOM.js 5.16 kB {0} [built]
 [170] ./~/react/lib/ReactChildren.js 6.19 kB {0} [built]
 [171] ./~/react/lib/ReactClass.js 27.6 kB {0} [built]
 [172] ./~/react/lib/ReactDOMFactories.js 5.53 kB {0} [built]
 [173] ./~/react/lib/ReactPropTypes.js 500 bytes {0} [built]
 [175] ./~/react/lib/ReactPureComponent.js 1.32 kB {0} [built]
 [176] ./~/react/lib/ReactVersion.js 350 bytes {0} [built]
 [181] ./src/01-helloword.js 418 bytes {0} [built]
    + 167 hidden modules
Hash: 86817430d2ff60331187
Version: webpack 2.4.1
Time: 209ms

到这里就完成了环境配置，打开 

1

pages\01-helloword.html
后就能看到 hello word!

  • 目录说明
1
2
3
4
5
6
7
8
9
10
11

├── build                           编译生成目录
│   ├── 01-helloword.js
│   └── common.js
├── pages                           访问页面
│   ├── 01-helloword.html
│   └── favicon.ico
├── src                             es6源码
│   └── 01-helloword.js
├── README.md
├── package.json                    npm配置
└── webpack.config.js               webpack配置

调试环境

chrome浏览器安装插件

1

React Developer Tools
1

webpack.config.js
 sevtool 设置 
1

source-map