React-小记：开发环境准备

Posted on   |   In

写下这个标题之后我愣了几分钟，突然发现无从下笔。随后想了想，就当是学习React过程中的随笔吧，写点简单的开发过程顺便记一些刚接触时踩到的坑。

准备工作

React Developer Tools

首先需要准备的就是React提供的Chrome拓展工具了，这个扩展在检测到开发状态的React程序时会在控制台添加一个React工具栏。在这里可以很方便的查看到组件间结构、属性、状态跟事件，可以很方便地进行调试：
React Developer Tools
下载地址：React Developer Tools

Webpack

由于React无法直接在浏览器环境中运行，需要使用Webpack进行通过Babel编译打包。

当然你也可以直接引入react.js跟react-dom.js直接在浏览器中跑，不过很卡就是了。。。

下面是webpack的低配：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var path = require('path'),
    root = path.resolve(__dirname),
    src  = path.resolve(root, 'js'),
    dist = path.resolve(root, '../js');

module.exports = {
    entry: path.resolve(src, 'index.jsx'),
    output: {
        path: dist,
        filename: 'index.js'
    },
    devtool: 'cheap-module-eval-source-map',
    module: {
        loaders: [
            {
                test: /\.jsx$/,
                loader: 'babel'
            }
        ]
    }
}

简单说明：

  1. entry：入口文件，webpack说白了就是从入口文件一层层地查找代码中使用了require(xxx)或import x from x语句，把所有依赖的文件全都写到一个文件里。对，就这么简单！
  2. output：指定最终打包好的文件输出到哪里，没什么可说的
  3. devtool：指定开发时生成sourceMap的格式，绝大多数直接用cheap-module-eval-source-map就OK，想深入了解的点这里
  4. module.loaders：一系列的加载器，test用来匹配require(xxx)中的xxx来确定是否用这个加载器处理所识别到的文件。loader用来指定加载器，这里指定的babel需要安装依赖npm i -D babel-loader

Babel

Babel的使用参考：从零开始：现在开始用ES6写代码
这里的额外配置就是加一个react的转码包：

  1. 安装预置转码包npm i -D babel-preset-react
  2. 修改配置文件.babelrc
    1
    2
    3
    {
        "presets": ["react", "es2015"]
    }

项目入口

访问入口 index.html

首先我们要准备一个近乎空白的HTML文档：

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Demo</title>
</head>
<body>
    <div id="root"></div>
    <script src="js/index.js"></script>
</body>
</html>

  1. 这个HTML文件head按需设置，或引入样式表，或设置meta，随你喜欢，body节点中ID为root的节点则是我们react所有DOM渲染的的目标节点，
    一般情况下不要直接渲染到body节点中，虽然可以正常加载，但是控制台会弹出警告，这是因为许多工具或插件（譬如弹窗）也会渲染DOM到body节点中，这会影响React的正常运行
  2. 下面就是一个脚本引用，引用webpack配置中output所指的输出文件。

逻辑入口 index.js

这个入口其实就是webpack配置中的entry所指向的文件，也就是上文访问入口中引用的脚本文件，webpack将从这个文件开始查找依赖

1
2
3
4
5
6
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Index from './component/index.jsx';

ReactDOM.render(<Index />, document.getElementById('index'));

  1. 引入三个依赖，其中前两个为React基础依赖，必须引入，最后一个为我们自己写的一个组件。
    webpack编译时将从这三条语句出发，按顺序查找依赖（按树查找，即：如果依赖中还有其他依赖，则一直查找下去，直到依赖树的末端为止），最后读取查找到的全部文件内容后，按照依赖顺序写入到当前文件中，最终输出到output中指定的位置
  2. ReactDOM.render()第一个参数为将要渲染的React元素，这里的<Index />则是直接把第三行引入的组件直接放到这里进行渲染，第二个参数是指把这个组件渲染到页面的哪个DOM节点中。
所有文章非特别说明皆为原创。技术更迭迅猛，部分内容可能会作修改，为保证信息与源同步，转载时请务必注明文章出处！谢谢合作 :-)