项目需要

查看电脑是否有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：存放页面

React项目搭建步骤相关推荐

react项目搭建，步骤最全，附源码git地址(react+router+typescript+redux+axios+antdesign+mock+eslint)
企业级react项目搭建流程,基于官网推荐脚手架create-react-app搭建的项目基本框架,在该基础上增加项目所需要的功能插件等.代码git地址base分支:https://github.co ...
react项目开发步骤_成为专业React开发人员的31个步骤
react项目开发步骤我为达到可雇用水平而进行的每个项目和课程. (Every single project and course I took to reach a hireable level. ...
[saiku]saiku3.8项目搭建步骤
欢迎关注个人微信公众号:pengjun0308123,最实在的干货分享. saiku3.8项目搭建步骤: 1.下载saiku源码和saiku项目(内置tomcat,可直接运行),这里我用的都是3.8版 ...
React项目搭建与Echars工具使用
React项目搭建与Echars工具使用一.React项目快速搭建 1.新建文件夹 2.直接在对应目录输入 cmd ,打开终端 3.执行指令完成React应用建立二.React项目结构和分析 1. ...
SpringCloud项目搭建步骤
SpringCloud项目搭建步骤 springCloud五大核心组件五大核心组件如下: 服务发现--Netflix Eureka客户端负载均衡--Netflix Ribbon 断路器--Netf ...
react项目搭建（基础学习笔记）
react项目搭建(基础学习) 安装局部安装 1.npm init -y或yarn init -y初始化项目 2.全局安装creact-react-app.使用npm install -D crea ...
react 项目搭建
创建一个React项目默认电脑已经安装了npm和nodejs node 版本要至少8.0以上的使用create-react-app脚手架构建react应用程序 create-react-app是 ...
react项目搭建教程
搭建步骤安装环境参考菜鸟教程[https://www.runoob.com/nodejs/nodejs-tutorial.html] 安装所需要的node环境创建项目环境安装好之后我们进行项 ...
React 项目搭建与部署，搭建Node服务器
环境配置与项目搭建安装node,官网直接下载安装webpack : npm install -g webpack 安装淘宝镜像(可选): npm install -g cnpm --regist ...

React项目搭建步骤