啥叫Redux？官方说：Redux是javascript的状态管理容器。个人理解就是它是做js数据管理的，它可以让数据沿着一个方向进入中心，然后经过中心处理后又沿着另一个方向返回。示意图大致如下：

graph LR
A(page component) -- dispatch --> B(action)

使用数据类型检查可以有助于我们降低出错概率，这也是我后面为什么原来越喜欢用typescript的原因（当然这里讲的都不是typescript项目）。
React官方的也有推荐几种对数据类型进行检查的工具，比如：PropTypes、Flow和typescript等。如果是非typescript版的话，官方推荐使用Flow作为数据检查工具。
但这里我还是讲使用PropTypes做数据类型检查！

观察一下我们的webpack.config.*.js里面的output配置有个chunkFilename，这个就是我们通过webpack编译输出后用来命名分割后的代码文件名称的。
这里有个关于webpack不同版本针对代码分割做却别设置的问题：代码里的[name]默认是id覆盖，如果你要给chunkFilename重新起名字，要使用webpack1的require.ensure()或webpack2以上的import()方法。

React-router-dom可以帮我前端自己来实现页面访问路劲而不需要依赖后端路由，下面来为我们的React实战项目增加路由功能。

安装

首先是要安装react-router-dom依赖包，命令如下：

1

$ yarn add react-router-dom

使用vs code编写react项目，假如文件后缀为.js的时候，在js里面写html没有emmet的代码提示功能，这个时候会显得特别麻烦和吃力。怎样在vs code编辑器上设置emmet提示呢？

配置vscode

找到vs code的设置，在设置里面搜索emmet，然后找到emmet.includeLanguages，鼠标移上去后点击左边的编辑图标，然后在编辑器右侧的自定义内写入配置。如下图：

现在的前端要学的真多，想学React，还得先学webpack。当去看了webpack的文档后，感觉要跪了。即便是跟着官方文档，配置到一半已经很没有耐心了有木有？嗯，别怕，React官方有快速脚手架可以使用，那就是create-react-app。我们可以用这个快速的搭建起一套可用的工程环境。但本教程一教大家如何用create-react-app生成一个可配置工程的环境，并做一些基本的工程配置。

使用CSS预编译工具其实都不陌生了，如何在React项目中使用像Sass、Less这样的CSS预编译工具呢？这里我们就需要安装webpack的sass-loader或者less-loader了。
下面我们来进行安装和配置：

安装loader

安装sass-loader或less-loader

1

$ yarn add sass-loader  // 或 yarn add less-loader

其实我们可以看下工程里面webpack.config.*.js里面的loader配置，有一个eslint-loader。这个就是脚手架为我们配置好的项目启动时的代码检查操作。如果要正确的使用这个eslint代码检查工具，我们还需要在工程里面做eslint的配置。如何配置eslint？

前一篇教了大家如何《使用create-react-app快速搭建typescript+react项目》，今天说说怎么配置开发环境中的域名&端口信息。—这篇幅将会是上一篇幅中自定义配置内容的开始

本人写typescript有近一年的时间了，可能有人要问写了几年的javascript了，好好的，为什么又来折腾typescript呢？直白的回答就是typescript能让你在调用方法时马上知道该传什么类型的参数，或者在取数据的时候能快速的提取字段。深奥一点的回答就是：typescript能帮你在写代码的时候做类型检查，并在编译成可执行文件的时候提示你哪里出错了，以便于你能快速的解决。
关于typescript的学习，我不在这里进行深入的系统的讲，大家可以点击下面链接去到typescript中文网站去学习。我们这里要讲的是如何利用create-react-app来快速搭建typescript版react的项目环境。