React Router5.0+Mobx状态管理
使用Node创建react项目
首次使用react脚手架,需要使用npm安装代码行工具
你的电脑需要具备Node环境
本教程不包含报错解决方案,报错请面向百度
本教程不包含报错解决方案,报错请面向百度
本教程不包含报错解决方案,报错请面向百度
1. npm安装react脚手架
在你需要使用脚手架的磁盘的根目录中创建一个纯英文名文件夹
你将在此创建你的react脚手架项目
进入到这个文件夹中 例如:D:\myTemp
输入cmd进入终端
运行如下命令
npm install -g create-react-app
// cmd运行
D:\myTemp>npm install -g create-react-app
运行完毕后 运行如下命令
create-react-app -V
打印出版本号 说明安装成功 失败则建议面向百度
// cmd运行
D:\myTemp>create-react-app -V
5.0.1
创建完成后 运行如下命令
create-react-app my-app
my-app是自定义的项目名称
// cmd运行
D:\myTemp>create-react-app my-app
虽然出错后建议面向百度,但是我在这里还是给出了一种错误方式
瓜不保熟
安装脚手架报错: The fs.promises API is experimental
原因: npm版本过高或node版本过低
解决: npm i npm@6.4.1 -g
2. 自定义项目目录
经过第一步,你已经拥有了一个初始react项目,但它只是一个初生的Baby
不同于Vue的是
你需要通过自己的双手创建你所需要使用的任何功能
包括但不限于Router/Axios/Store,甚至是Page以及Commponent
进入到项目文件中的src目录:这是前端文件目录
在其中创建子文件夹 Router/Store/Tools/Assets/Pages/Commponents
大小写皆可,不过我建议大写
// 文件目录
src>
-Assets
-静态资源 // 例如.png .jpg .gif
-Router
-index.js // 路由配置文件
-Store
-mobx.js // 状态管理仓库
-Tools
-工具文件 // 例如Ajax.js Filiter.js
-Pages
-Index // 路由切换每一页
-Index.jsx
-Index.css
-Login
-Login.jsx
-Login.css
-Commponents
-Nav // 页面内组件
-Nav.jsx
-Nav.css
-Sidebar
-Sidebar.jsx
-Sidebar.css
3. 安装项目依赖
经过前两步,你已经拥有一个完整目录的react文件
但是项目运行,离不开各种各样的依赖文件
使用npm安装依赖就是这一步所需要干的事儿
3.1 安装router路由5.0
进入到项目的根目录下,右键选择在集成终端中打开
运行命令 安装router5.0
npm install react-router-dom@5 --save
// 项目根目录下运行以下命令
E: