您的位置：首页 > Web前端 > React

【React全家桶入门之二】项目搭建

2017-08-24 16:17 232 查看


开始之前

你需要有一台安装好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
}
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
最后在
/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"
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
9
10
11
12
13
14

访问
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'));
1
2
3
4
5
6
1
2
3
4
5
6
在
/public/index.html
里写入以下代码（webstorm中只需要输入!并按下tab建就可以快速完成一个html页面模板）
<!doctype 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 React</title>
</head>
<body>
<!-- 这个div必须和index.js里的render方法里传入的第二个参数保持一致 -->
<div id="app"></div>
<!-- roadhog背后会把你的代码从入口文件开始打包成一个index.js文件 -->
<script src="./index.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

上面都搞定之后就可以执行
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"
}
1
2
3
4
1
2
3
4

然后，就可以执行：
npm run server
npm run dev

来开始开发工作（两个指令要在两个终端中执行）。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航