创建⼀个完整的react项⽬...（持续更新中）
将开源创建⼀个管理系统的react项⽬，将已学到的技术运⽤到项⽬⾥⾯，并进⾏记录。
npm init 指令会在项⽬根⽬录下⽣成 package.json ⽂件
lint----EsLint ：提供代码规范和检验代码，提出哪⼀⾏有问题
mkdir
npm i yarn (yarn拉包⽐较全，npm可能丢包)
browserslist限制浏览器的范围
把 eslint 安装到 package.json ⽂件中的 devDependencies 属性中，意思是只是开发阶段⽤到这个包，上线时就不需要这个包了
技术：react + antd3 + webpack+ mobx+echart+mock
创建react项⽬：
全局安装脚⼿架
npm install -g create-react-app      # Windows
sudo npm install -g create-react-app  # Linux
jquery在项目里是干啥的创建项⽬：
检查node是否安装：node -v
密码：luna ，  sudo npm install -g create-react-app
cd luo/Desktop            //切到桌⾯
create-react-app my-app  //创建项⽬
创建导航路由：
状态管理mobx：
把state状态传递给各个组件，数据传递的写法
React Intl ⽤于国际化 React 组件，提供 React 组件和 API 来格式化⽇期，数字，字符串（包括单复数和翻译）
安装antd: npm install antd --save
webpack: Yarn add webpack –dev
jquery: yarn add jquery
react-router-dom-web
rfce 创建函数组件
rcc 创建类组件
下载路由包
npm install react-router-dom --save-dev 设置镜像只是npm拉包会快很多。antd内部写样式是less，写的。
⾃定义antd为绿⾊的主题
按需加载依赖包
安abel(jsx⽆法编译)
npm install @babel/core @babel/preset-env
使⽤Icon(安装之后，重新install和start)
npm install --save @ant-design/icons
<Input
placeholder="⽤户名"
prefix = {<Icon type = "user"/>}
>
</Input>
###函数组件才可以⽤
/
/可以使⽤const
使⽤from表单的前端校验
const { getFieldDecorator } = props.form;
要⽤creat⽅法包裹⼀下，经 ate() 包装过的组件会⾃带 this.props.form 属性
开发登录页⾯，form表单和replace路由跳转
开发布局layout和导航菜单栏Menu
sider ⾥⾯放⼊组件
layout的布局content引⼊不同的路由和模块
menu的模块的导航菜单Link不同的模块
使⽤echarts
npm install echarts --save
import * as echarts from 'echarts';
const Home = () => {
useEffect(()=>{
var chartDom = ElementById('main');    var myChart = echarts.init(chartDom);
option && myChart.setOption(option);
},[])
return(
<div id="main" style={{width:600,height:300}}>
</div>
)
}
应⽤mock和axios
npm install axios
npm install mockjs
mock数据创建，模拟后台返回

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。