React + Node 单页应用「一」前端搭建
记录最近做的一个 demo，前端使用 React，用 React Router 实现前端路由，Koa 2 搭建 API Server， 最后通过 Nginx 做请求转发。
这是第一篇，主要介绍下前端代码的构建、React router 使用中遇到问题，以及前端开发完成后部署相关工作。
功能介绍
GitCard 可以通过 GitHub 授权获取用户基本信息
- 在首页模块，可以查看最近登录的用户，并点击头像查看该用户的详细信息
- 在
/Comment模块中可以发表评论，并删除自己的评论 - 在
/Detail模块中可以查看用户在 Github 上的基本信息（代码库，Follower、Following 以及更多开发的信息），你可以在这个基础上做更多有意思的事情，支持 Follow 和 Unfollow 操作，当然，你可以加上 Star 和 Unstar 操作，异曲同工。🈳️
依赖版本
- 构建工具: create-react-app
- react: 16.0.0
- react-router: 4.2.2
- 网络请求: axios
- UI: material-ui
项目搭建
前端构建工具使用 React 官方的 create-react-app，快速生成可执行的项目结构。下面是快速上手流程，详细的内容可以参见 官方文档。
// 全局安装 create-react-app
npm install -g create-react-app
//生成项目，项目名 my-app（自定义）
create-react-app my-app
cd my-app
// 安装依赖
npm install
// 开发环境
npm start
// 打包
npm run build
生成项目后，项目文件结构如下，npm run build 执行后，目录下会出现 /build/ 目录，存放构建后的文件。
/**
* my-app 目录结构
*/
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ └── favicon.ico
│ └── index.html
│ └── manifest.json
└── src
└── App.css
└── App.js //项目入口
└── App.test.js
└── index.css
└── index.js
└── logo.svg
└── registerServiceWorker.js
我们在 /src/ 目录下新建 /components/ 目录，用于存放本次项目中的所有自定义组件，最终的目录如下
.
├── README.md
├── build
├── package.json
├── public
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── components
│ │ ├── Comments
│ │ │ ├── comment.css
│ │ │ └── index.jsx
│ │ ├── Events
│ │ │ └── index.jsx
│ │ ├── HomePage
│ │ │ └── index.jsx
│ │ ├── UserDetail
│ │ │ └── index.jsx
│ │ └── layouts
│ │ ├── Header.jsx
│ │ └── SideMenu.jsx
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ ├── registerServiceWorker.js
│ └── utils
│ ├── api.jsx
│ ├── fetch.jsx
│ └── keygen.js
└── yarn.lock
前端路由
这次做的项目是单页应用，通过 React router 实现前端路由，Container 通过路由选择显示的模块内容，在 Header 显示路由切换入口，页面结构图如下。
在 /src/App.js 布局并设置路由，将 Header 和 Container 包在 Router 下，在 Header 的 Menu 组件中设置路由链接，并在 Container 中设置路由指向对应组件。
Menu 中 Detail 链接在用户授权登录后就指向登录用户信息，否则跳转到授权登录页面。
// 引入 React router
import {
BrowserRouter as Router,
Link,
Route
} from "react-router-dom"
// 在 layout-content 中设置路由对应的组件
<Router>
<div className="App">
<Header loginInfo={this.state.loginInfo}></Header>
<div className="layout-container">
<div className="layout-content">
<Route exact path="/" component={ HomePage } ></Route>
<Route path="/user/:userid" component={ UserDetail } ></Route>
<Route path="/events" component={Events}></Route>
<Route path="/comments" render={ ()=><Comments loginInfo={this.state.loginInfo} /> }></Route>
</div>
</div>
</div>
</Router>
// 在 Header 中设置 Link
<Menu>
<Link to="/">
<MenuItem primaryText="Home" />
</Link>
<Link to="/comments">
<MenuItem primaryText="Comments"/>
</Link>
{
this.props.loginInfo.login ?
(<Link to={ '/user/' + this.props.loginInfo.login }>
<MenuItem primaryText="Detail" />
</Link>)
: (<MenuItem primaryText="Login" onClick={this.login} />)
}
</Menu>
数据操作
路由下发数据
上面的代码的路由中，我们通过两种方式下发数据到组件中，通过路由参数将用户 ID 下发到 Detail 组件，以及通过 props 讲用户基本信息下发到 Comment 组件中。
// 通过路由参数下发的 Link 以及对应的 Route
<Link to={ '/user/' + this.props.loginInfo.login }><MenuItem primaryText="Detail" /></Link>
<Route path="/user/:userid" component={ UserDetail } ></Route>
// 通过 props 下发
<Route path="/comments" render={ ()=><Comments loginInfo={this.state.loginInfo} /> }></Route>
通过路由参数获取下发数据，如果在 /user/lijundong 跳转到 /user/free-free 会出现路由改变，数据不刷新的情况，这里需要用 componentWillReceiveProps(nextProps) 处理。
在 Detail 组件中获取 ID，
const userId = this.props.match.params.userid;
以及在 Comment 中获取用户信息
const loginInfo = this.props.loginInfo;
数据请求
我们在这里选择用 axios 网络请求，为了方便管理，将所有的 API 统一放在 /src/utils/api.jsx 中，利于后期维护。
没有使用 Fetch 是因为 Github API 只支持 XHR 跨域请求，Fetch 跨域请求会导致请求 request type 变成 option 。
数据更新
setState
因为这次的数据并不复杂，所以没有引入 MobX 或者 Redux 处理，数据更新全程使用 setState，不过由于 setState 是异步操作，所以，某些情况下，需要用到回调函数，如下
setState(
{ name: "Michael" },
() => console.log(this.state.name)
);
// Michael
componentWillReceiveProps
上面提到过，通过路由参数获取下发数据，如果在 /user/lijundong 跳转到 /user/free-free 会出现路由改变，数据不刷新的情况，这是因为 componentDidMount() 只会执行一次，props 更新不会触发重新获取数据，这里可通过 componentWillReceiveProps() 解决。
componentWillReceiveProps() 会在每次 props 更新时触发，通过新参数重新获取数据列表。
componentWillReceiveProps(nextProps){
const userId = nextProps.match.params.userid;
// 通过新参数获取数据
Axios.get(url)
}
项目构建部署
项目开发结束，通过 npm run build 进行打包，打包完成后，生成的 /build/ 即我们最终上线的版本，因为是前后端分离的项目，前端需要自起 Server，可以通过这两种方案进行部署
- 使用 create-react-app 自带的
serve -s build命令起 Server（我当前使用的方式） - 或者通过第三方工具
http-server、anywhere等起 Server
服务开启后，可以正常访问就代表前端部分已经完成，暴露的端口供最后 Nginx 配置使用。
