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

// 项目根目录下运行以下命令