React建站--craete-react-app

发表于   |   分类于   |     |   阅读次数  

单页面应用快速搭建

使用官方推荐的Create React App是目前搭建React项目最佳的选择，它会自动在新项目下配置好程序开发和发布环境，同时还自动安装相关的优秀npm包（如babel、loader），极其方便即可实现 JavaScript ES6语法的无阻碍编写和运行。
nodeJS环境下全局安装create-react-app，使用它创建一个新项目，随后进入目录执行npm start即自动拉起服务

1
2
3
4
npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

项目搭建一步到位，目前环境配置已基本完成，入口文件是src文件夹下的index.js，此时项目已具备ES6语法支持，文件修改监听，自动编译和浏览器刷新等功能。如果想成功加载sass或less文件，则还需进一步安装相关loader。

1
2
npm install sass-loader node-sass --save-dev
npm run eject

eject执行完毕之后，修改项目下的两个配置文件（位于 /config 文件夹下的 webpack.config.dev.js 和 webpack.config.prod.js），打开这两个文件，找到 module.exports 下 module 的 loaders 配置，为其新增一个加载 sass loader 的规则。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
    ...
    module: {
        ...
        loaders: [
            ...
            {
              test: /\.scss$/,
              loaders: ["style", "css", "sass"]
            },
            ...
        ]
    }
}

以上便完成了sass的加载工作。
项目在编写时的自动更新其实只是将更改写进了内存。当项目最终完成后，需要执行以下命令来build 一遍项目:

1
npm run build

执行完成后将在项目下生成一个 build 文件夹，可以看到此时项目的 js 和 style 已被打包进 main.js 中了。
React语法参照官方文档即可，需要注意以下几点：

  1. setState 方法是异步的，若要在状态更改后执行相关任务应使用回调，则须将回调函数作为 setState 的第二个参数，如：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // 错误：意料之外的结果，state未成功设置
    this.setState((prevState) => ({
        index: prevState.index + 1
    }));
    console.log(this.state.index); // index未更新

    // 正确：以回调的方式处理异步
    this.setState((prevState) => ({
        index: prevState.index + 1
    }), () => {
        // do something
        console.log(this.state.index);
    });

  2. 绑定DOM事件时不可以直接带括号传参，否则该函数会在页面加载时默认执行，正确的做法应该是以 bind 方法实现传参

    1
    2
    3
    4
    5
    // 错误
    <input type="button" onClick={this.handleTouch(48)}/>

    // 正确
    <input type="button" onClick={this.handleTouch.bind(this, 48)}/>

  3. React的DOM遍历一般写法：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <ul>
        {this.props.items.map((item, index) => {
            return <li key={index} 
                className={this.props.sign === index ? 'active' : ''} 
                onDoubleClick={this.handleTouch.bind(this, index)}>
                <a href="javascript:void(0)">
                    {item.title}
                </a>
            </li>
        })}
    </ul>

参考链接：