react是目前前端比较火的三大框架之一，其以高性能的虚拟DOM、强大的facebook团队和庞大的社区获得广大开发者的青睐，以下包括这系列的文章也是我学习react的笔记，正如那句话所说：好记性不如烂博客，以下记录的是我初始化的第一个react项目。默认在安装了node的环境下。

一、npm配置开发环境

  1. npm项目初始化
    启动命令行工具，进入当前项目文件夹下，执行npm init初始化，一直回车使用默认设置，也可以自行更改，执行完毕会在项目文件夹下生成配置文件，定义了这个项目所需要的各种模块，以及项目的配置信息(比如名称、版本、许可证等元数据)。

  2. 安装依赖包
    安装react和react-dom包，执行npm install --save react react-dom babelify babel-preset-react可以在关键字后面添加@xx.xx安装具体的版本，然后安装es6支持npm install babel-preset-es2015 --save。

二、webpack热加载配置

  1. 安装webpack
    全局安装和项目下安装webpack和webpack服务工具。
1
2
3
4
5
6
npm install webpack -g
npm install webpack-dev-server -g
//在项目目录下安装
npm install webpack --save
npm install webpack-dev-server --save

  1. 初始化webpack配置文件
    在项目文件夹下新建src目录和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 path = require('path');
 
module.exports = {
    context: path.join(__dirname),
    //页面入口文件配置
    entry: {
        index : './src/js/index.js'
    },
    //入口文件输出配置
    output: {
        path: __dirname,
        filename: './src/bundle.js'
    },
    module: {
        //加载器配置
        loaders: [{
            test: /\.js?$/,
            exclude: /(node_modules)/,
            loader: 'babel-loader',
            query: {
                presets: ['react','es2015']
            }
        }]
    }
};

三、简单的项目代码

  1. 在项目下新建index.html文件，输入以下代码：
1
2
<div id="example">Hello,react!</div>
<script src="./src/bundle.js"></script>
  1. 在src目录里面新建js目录并在里面新建index.js文件，输入以下代码：
1
2
3
4
5
6
7
var React = require("react");
var ReactDOM = require("react-dom");

ReactDOM.render(
    <h1>react大法好 66666666!</h1>,
    document.getElementById("example")
  );

四、打包启动项目

webpack打包，直接webpack命令；自动监控文件的改变webpack --watch；实时编译文件并自动刷新浏览器webpack-dev-server；编译后会自动在src目录下生成bundle.js。

五、调试

在chrome浏览器扩展程序里面有react的插件React Developer Tools，用于react的调试，地址https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapbkoienihi。

由于版本的不同，另附package.json依赖文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "name": "05-01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babelify": "^7.3.0",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.5.0"
  }
}