项目需要

查看电脑是否有yarn，如果没有则配置下面的命令

1）、下载安装yarn：npm i yarn -g

2）、查看yarn版本：yarn -v

3）、配置淘宝镜像：

yarn config set registry https://registry.npm.taobao.org -g

yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

4）、设置yarn的配置项：yarn config list

使用脚手架搭建项目

1）、vscode终端或者cmd终端找到文件夹路径,使用全局安装create-react-app (项目名)创建项目目录；

完成后如下图所示：

 在src目录就留index.js和App.js文件就可以，其他的文件都可以删除；

2）、下载所需依赖包：

yarn add react //核心包，包含react开发基础语法

yarn add react-dom //提供了Dom相关的操作

yarn add babel-standalone //由babel提供编译器，编译成浏览器能够识别的代码

按需下载引入示例

1）、使用事件总线需要安装events

安装：yarn add events

2）、使用路由

安装：yarn add react-router-dom

引入：import {Route,Switch,Redirect,HashRouter} from "react-router-dom"

3）、通过高价组件对非路由组件添加props的路由对象

引入：import {withRouter} from "react-router-dom" //在暴露的时候包裹类组件

4）、使用懒加载的插件

安装：yarn add react-loadable

引入：import Loadable from "react-loadable"

5）、使用UI组件Antd

安装：yarn add antd

引入：import {Button,Input} from "antd"

6）、使用状态机redux

安装：yarn add redux

7）、使用中间件logger、saga

安装：yarn add redux-logger     yarn add redux-saga

项目中常用的命令示例

yarn start:项目启动命令

yarn build:项目打包命令

yarn add 包名:添加依赖包

yarn remove 包名:卸载依赖包

yarn install:下载所有依赖包 

项目目录结构及意义

dist：生成打包后文件

node_modules:安装的依赖包

public：公共资源文件

App.js：根组件

index.js：入口文件

.gitignore:git文件忽略清单

package.json:包管理文件

README.md:说明文档

yarn.lock:锁定安装依赖项的版本

src：存放源码

src-

        api：存放网络请求

        assets：存放静态资源

        commponents：存放各种组件 

        redux：状态机 

        pages：存放页面