从头开始搭建一个 React 项目 （一）
最近需要开发一个webApp，在 vue 和 react 之间犹豫很久，考虑到项目的小程序应用是基于 Taro 开发的，但是由于前期开发没有考虑转 H5 的需求，导致现在项目过于庞大，转 H5 需要大量的时间和精力处理兼容性问题。考虑到语法上的相似型（方便复制粘贴代码），所以还是选择搭建 一个 React 项目。因为第一次搭建，还是遇到了一些问题，做一些简单的记录方便以后不要再踩坑～～
第一步：创建项目
方法一：
首先我们需要全局安装 create-react-app
npm install -g create-react-app
然后直接执行
create-react-app my-app cd my-app npm start
方法二：
直接使用 npx 创建项目，你需要保证你的电脑上 Node >= 8.10 和 npm >= 5.6，在这个前提下
npx create-react-app my-app cd my-app npm start
这也是官方推荐的创建项目的方法。
第二步：配置 router
在一个有业务需求的react 项目中，路由是必不可少的，react 的脚手架没有帮我们安装路由，所以需要我们手动安装
npm install react-router-dom -S
我个人比较习惯单独用一个来管理路由，因此我创建了一个 router.js 文件，下面简单介绍一下在项目的搭建过程中涉及到的 React Router 的一些必备的知识点。
Histories
React router 常用的 history 有三种形式：browserHistory、hashHistory、createMemoryHistory，
1、browserHistory 是使用 React Router 的应用推荐的 history，它创建一个像 example.com/some/path 这样真实的 URL，使用这种模式，需要服务器做好相关配置，做好处理 URL 的准备。 2、hashHistory 使用 URL 中的 hash（#）部分去创建形如 example.com/#/some/path 的路由。 3、createMemoryHistory 不会在地址栏被操作或读取，适合服务端渲染的应用，使用这种方式需要先创建它
const history = createMemoryHistory(location)
注意 除了第三种形式外，react-router官方文档上说明的引用另外两种形式的方法都是：
import { browserHistory } from 'react-router'
render(
<Router history={browserHistory} routes={routes} />,
document.getElementById('app')
)
但是在实际的项目操作中，你会发现直接按照文档中的做法，运行时会报错：
Attempted import error: 'browserHistory' is not exported from 'react-router'.
查阅资料时发现，其实 React 项目中，一般不会安装 react-router 包，而是安装我上面安装的 react-router-dom 包，具体两者之间的区别可以参考这篇文章： react-router与react-router-dom使用时的区别
最终引用方法如下
import React from 'react'; import { BrowserRouter as Router} from 'react-router' export default function RouteConf() { return ( <Router> </Router> ) }
Switch
Switch 是唯一的，它仅渲染一个路径，如果不使用 Switch 包裹, 每一个被location匹配到的将都会被渲染。为了减少不必要的渲染，我们一般都会将路由用 Switch 组件包裹起来。
import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router' export default function RouteConf() { return ( <Router> <Switch> <Route path="/" component={index} /> </Switch> </Router> ) }
关于 Switch 的详细介绍，可以参考这篇文章--> react-router v4 之 啥是 - 简书
exact
exact 是 Route 的一条属性，一般而言，react 路由会匹配所有匹配到的路由组件，使用 exact 属性可以严格匹配路由组件。
<Route path='/' component={Index} />
<Route path='/about' component={About}>
上面这两个路由，在未配置 exact 的路由中，如果匹配到的路由是 /about,那么 / 也会被匹配出来。
<Route exact path='/' component={Index} />
<Route path='/about' component={About}>
使用 exact 配置后，就可以解决这个问题了。
代码分割
接下来介绍一下 React 的代码分割，在 React 应用中引入代码分割的最佳方式是通过动态 import() 语法,当 Webpack 解析到该语法时，会自动进行代码分割。
另外，React.lazy 函数能让你像渲染常规组件一样处理动态引入的组件。然后应在 Suspense 组件中渲染 lazy 组件，如此使得我们可以使用在等待加载 lazy 组件时做优雅降级（如 loading 指示器等）。
代码如下：
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
const Index = lazy(() => import('./Index'));
export default function RouteConf() {
return (
<Router>
<Suspense fallback={<div> Loading... </div>}>
<Switch>
<Route path="/" component={Index} />
</Switch>
</Suspense>
</Router>
)
}
第三步：引用路由
我们要在 index.js 中引用刚刚配置好的 router.js 文件。
import React from 'react'; import ReactDOM from 'react-dom'; import Route from './router'; import * as serviceWorker from './serviceWorker'; const render = (Component) => { ReactDOM.render( <Component />, document.getElementById('root'), ) } render(Route); serviceWorker.register();
第四步：添加 fastClick
fastclick 是用来解决移动端的点击事件存在 300ms 延迟的问题的，我们在 index.js 中引用它
安装
npm install -S fastClick
引用
import React from 'react'; import ReactDOM from 'react-dom'; import fastClick from 'fastclick'; import Route from './router'; import './index.css'; import * as serviceWorker from './serviceWorker'; fastClick.attach(document.body); const render = (Component) => { ReactDOM.render( <Component />, document.getElementById('root'), ) } render(Route); serviceWorker.register();
