react 简单搭建

1.新建一个文件夹

2.执行npm init

3.整理新建工程目录结构，包含必要文件index.html 和 index.js

4.安装react 、react-dom

5. 安装webpack（穿件webpack.config.js文件）

　　　　　　npm install --save-dev webpack

　　　　　　

6.安装Babel编译器（创建babel.config.js文件）

   JSX预处理器依赖：

　　　　　　npm install babel-cli babel-preset-react

   ES5兼容处理器依赖：

　　　　　　npm install --save-dev @babel/core @babel/cli @babel/preset-env

　　　　　　npm install --save @babel/polyfill

******babel 预置preset 插件***********

　　npm install --save-dev @babel/preset-env  //js编译，可让您使用最新的JavaScript 

　　npm install --save-dev @babel/preset-react  //react 

到此一个简单的react项目已经可以执行了，但目前为止的js不能使用JSX语法/ES6编写

之后的操作就是根据业务需要不断扩展

7. 加载JS：babel-loader 加载 ES2015+ 代码，然后使用 Babel 转译为 ES5

　　npm install --save-dev babel-loader

**使用happypack多线程打包编译js，提升打包效率

　　npm install --save-dev happypack

*可以使用JSX、ES6编写js

8.加载 CSS：npm install --save-dev style-loader css-loader

为了从 JavaScript 模块中 import 一个 CSS 文件，你需要在webpack文件的 module 配置中 安装并添加 style-loader 和 css-loader：

 *可以在js文件导入css文件

9.加载图像、加载字体：npm install --save-dev file-loader

10. 加载：npm install --save-dev url-loader

 *可以在正常引入img文件、字体文件等

----------------------------

*补充*

webpack配置文件

开发环境下，使用自动编译和模块热替换

生产环境，只需要直接打包文件，并且目标偏向于更小、更轻量、更优化，以改善加载速度

---------------------------

11.配置webpack开发环境

　　a. 使用 source map：追踪到错误和警告在源代码中的原始位置

　　　　devtool: 'inline-source-map',

　　b.输出管理output: {}

　　　　输出文件名使用哈希(hash)]并输出多个 bundle,需要通过插件引入

　　　　npm install --save-dev html-webpack-plugin

*当前状态下，会生成dist目录

  C:实现在代码发生变化后自动编译代码

　　　** 观察模式：--watch 观察代码变化自动编译，坏处是浏览器不会自动更新　 
　　　** webpack-dev-server  可以弥补watch缺陷　　　　　　　　　　
　　　　　　npm install --save-dev webpack-dev-server　 　
　　　** webpack-dev-middleware 　　
　　　　　　webpack-dev-server实际上相当于启用了一个express的Http服务器+调用webpack-dev-middleware　　
（二者的区别仅在于 webpack-dev-server 是封装好的，除了 webpack.config 和命令行参数之外，很难去做定制型开发。而 webpack-dev-middleware 是中间件，可以编写自己的后端服务然后把它整合进来，相对而言比较灵活自由）

D：模块热替换，局部更新模块，而不用全部刷新　　
　　配置new webpack.HotModuleReplacementPlugin()

*使用自动编译后，将不会生成dist目录

12.配置webpack生产环境

 　　a.Minification: 压缩js文件、具有删除未引用代码(dead code)的能力足矣

　　　　使用插件：UglifyJsPlugin

　　　　安装：npm i -D uglifyjs-webpack-plugin

　　b.Split CSS: 分离CSS 

　　b.切块，防止重复

　　　　使用：从webpack v4开始，CommonsChunkPlugin删除了，而改为optimization.splitChunks。

　　参考：https://segmentfault.com/a/1190000015836090

*到此，react项目基本配置完成了*

-----------------------

*Eslint  代码检测

1.安装Eslint，代码检测工具：npm install eslint --save-dev

2.初始化.eslintrc文件

-----------------------

 针对项目中所需要用到的其他技术框架，逐步完善

本项目用到less、mobx、route等相关插件

----------------------------

1.引用less文件，需要安装：npm install --save-dev less-loader less

2.引用antd组件：

　　a.安装antd

　　b.为了实现按需加载，不需要去单独引用样式文件，需要安装：babel-plugin-import

　　　　安装成功后配置.babelrc文件

3.安装 react router组件

　　react-router-dom暴露出react-router中暴露的对象与方法，因此你只需要安装并引用react-router-dom即可

 Route: 当location与Route的path匹配时渲染Route中的Component。如果有多个Route匹配，那么这些Route的Component都会被渲染。

Router: Router组件就针对不同功能和平台对应用：

• <BrowserRouter> 浏览器的路由组件
• <HashRouter> URL格式为Hash路由组件
• <MemoryRouter> 内存路由组件
• <NativeRouter> Native的路由组件
• <StaticRoute

<Switch>组件只渲染匹配地址(location)的第一个 <Route>或者<Redirect>
<Redirect>当这个组件被渲染是，location会被重写为Redirect的to指定的新location

配置过程中，刷新除第一个Route路由，均报错Connot get/url 
原因：CSR https://blog.csdn.net/zwkkkk1/article/details/83411071
解决：

publicPath: '/',
historyApiFallback: true,

publicPath allows you to specify the base path for all the assets within your application. historyAPIFallback will redirect 404s to /index.html.

安装mobx
4.在目录第一级新建文件夹stores---专门存放和管理数据源
 安装 mobx状态管理: npm install mobx --save
　 React 绑定库: npm install mobx-react --save

mobx-react 将mobx和react链接起来 通过<Provider>Api组件把mobx store整体注入到react中，所以Provide放置在节点最外层，包裹组件都可以使用store内的变量、方法，类似全局变量(嵌套一层，代表着上下文)

React 和 MobX 是一对强力组合。React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而MobX提供机制来存储和更新应用状态供 React 使用。

mobx使用装饰器，所以需要安装装饰器解析插件：
　　npm install --save-dev @babel/plugin-proposal-decorators

　　 npm install --save-dev @babel/plugin-proposal-class-properties

@inject('store')  //注入
@observer  //注入的store观察，若store中全局变量发生变化，凡是被本页面引用到的也会变化

import { Provider } from 'mobx-react' // mobx-react 将mobx和react链接起来  Provide组件把mobx整体注入到react中

@observable Time = ''  //@observable定义mobx全局变量、全局变化、跨页面的

@action 改变@observable所修饰的变量

/监听变量,当变量发生变化，自动计算，返回一个新的结果，也相当于一个新的变量
//当Time和Todos任何一个变量改变，这个方法重新执行，返回一个新的结果
@computed get desc(){
 return `${this.Time} 还有${this.Todos.length} 条任务正在进行`
}

5.安装react-loadable:react-loadable是一个在react应用是使用非常简单的轻量级的代码分割组件库

*git 版本管理

1.git init 

2.新建.gitignore文件