【React全家桶入门之二】项目搭建
开始之前
你需要有一台安装好node环境（包括npm）的电脑，并且有一个趁手的代码编辑器（或IDE），如果没有，请使用Webstorm作为你的第一款（也许是最后一款）开发工具。
注意：请安装node 6.3及以上版本！
服务端搭建
在引言中说了，我们要做一个管理系统少不了接口和数据。
这里我们借助json-server这个工具快速搭建后台管理系统的服务端程序：
- 首先执行
npm i json-server -g把json-server作为全局工具安装 - 新建一个项目目录（后面文中所有的路径根目录都表示该项目目录）
- 在根目录中执行
npm init初始化一个npm项目（会有一些项目配置需要你输入，一直敲回车就行了） - 新建
/server目录用于放置服务端的文件 - 新建
/server/db.json文件作为服务端的数据库文件 - 在
/server/db.json文件中写入以下数据：
{
"user": [
{
"id": 10000,
"name": "一韬",
"age": 25,
"gender": "male"
},
{
"id": 10001,
"name": "张三",
"age": 30,
"gender": "female"
}
],
"book": [
{
"id": 10000,
"name": "JavaScript从入门到精通",
"price": 9990,
"owner_id": 10000
},
{
"id": 10001,
"name": "Java从入门到放弃",
"price": 1990,
"owner_id": 10001
}
]
}- 最后在
/server目录执行json-server db.json -w -p 3000
现在打开浏览器，访问网址http://localhost:3000，可以看到如下界面：
点击Routes下面的user会跳转到http://localhost:3000/user，可以看到我们之前在db.json中写入的user数组：
[
{
"id": 10000,
"name": "一韬",
"age": 25,
"gender": "male"
},
{
"id": 10001,
"name": "张三",
"age": 30,
"gender": "female"
}
]访问http://localhost:3000/book同上
我们在db.json文件中写入了标准的JSON格式数据，这个json里有一个user数组和一个book数组，这就告诉json-server，我们的数据库里有一个名为user的”表”和一个名为book的”表”，并且表里的数据为xxx，然后json-server就会启动服务器，并且以每个”表”为单位为我们注册一系列标准的RESTFull形式的API接口（路由），以user为例：
- [GET] /user #获取用户列表的接口
- [GET] /user/:id #获取单个用户的接口
- [POST] /user #新增用户的接口
- [PUT] /user/:id #修改用户的接口
- [DELETE] /user/:id #删除用户的接口
在获取列表的接口中也可以追加查询参数，来限定查询的结果，比如：
- 查询所有男性用户： /user?gender=male
- 查询年龄大于等于20并且小于等于29的用户：/user?age_gte=20&age_lte=29
此外还有分页、排序、匹配、关系查询等查询方式，可以在这里查看更多。
至此我们就拥有了一套强大的数据接口。
客户端搭建
搞定了服务端，就可以安心地写客户端代码了~
- 在根目录执行
npm i roadhog -g来安装roadhog，这是一个快速且功能强大的react项目搭建工具 - 新建
/src目录，用于存放客户端代码 - 新建
/public目录，用户存放项目的静态文件（图片等） - 新建
/src/index.js和/public/index.html两个文件，分别作为应用的入口文件和页面的入口文件 - 执行
npm i react react-dom react-router -S，安装基本的react依赖 - 在
/src/index.js中写入以下代码
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render((
<div>Hello React!div>
), document.getElementById('app'));- 在
/public/index.html里写入以下代码（webstorm中只需要输入!并按下tab建就可以快速完成一个html页面模板）
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello Reacttitle>
head>
<body>
<div id="app">div>
<script src="./index.js">script>
body>
html>上面都搞定之后就可以执行roadhog server来启动我们的react应用了！
启动成功会自动打开http://localhost:8000，如果你看到页面里显示了”Hello React!”，说明你的项目搭建已经大功告成了~
后续每次我们都需要执行：
- cd server && json-server db.json -w -p 3000
- roadhog server
来开始我们的工作流，我们可以把这两个指令写入package.json的scripts中，来节约我们的脑细胞：
"scripts": {
"server": "cd server && json-server db.json -w -p 3000",
"dev": "roadhog server"
}然后，就可以执行：
- npm run server
- npm run dev
来开始开发工作（两个指令要在两个终端中执行）。