工程架构
搭环境 vue/cli create-react-app
脚手架
打包工具 webpack
编译器 使用更新更高效的js/scss/jsx babel
热更新HMR
ESLint
本地服务器devServer,代理配置
版本管理 git/svn
Node.js/npm
React安装配置
-
使用create-react-app脚手架生成react环境,或者使用webpack搭建
-
create-react-app安装
//安装 npm install create-react-app -S //生成一个叫myApp的项目 create-react-app myApp //
-
编辑webpack文件命令,将配置文件暴露出来. 命令
npm run eject
项目架构
- 前端框架:react / react-dom
- 路由:react-router-dom
- 状态管理: mobx / mobx-react
- UI组件: ant-design / sass
- 前端后分离:axios
React组件
-
代码实例,创建第一个react组件
import React, { Component } from 'react'; //引入react component class A extends Component { //创建一个类 render() { this.props.go() console.log("aaa",this.props); return ( <div> <h2>hello world</h2> </div> ); } } //将组件抛出 export default A
-
组件的引用
import A from "A组件的路径" //将A组建放置在需要引入的位置 <A></A>
JSX语法
-
什么是JSX
React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。 元素是构成 React 应用的最小单位,JSX 就是用来声明 React 当中的元素
-
jsx实例
var myDivElement = <div className="foo" />; //将myDivElement渲染到root里面 ReactDOM.render(myDivElement, document.getElementById('root'));
-
JSX 中使用 JavaScript 表达式。
- 表达式写在花括号 {} 中
ReactDOM.render( <div> //表达式写在花括号中 <h1>{1+1}</h1> </div> , document.getElementById('example') );
- JSX 中不能使用 if else 语句,但可以使用 conditional (三元运算)
ReactDOM.render( <div> <h1>{i == 1 ? 'True!' : 'False'}</h1> </div> , document.getElementById('example') );
-
JSX样式采用{{}}双大括号包裹
<h1>style = {{myStyle}}</h1>
-
jsx注释
{/注释…/}
-
JSX 允许在模板中插入数组,数组会自动展开所有成员
var arr = [ <h1>hello</h1>, <h2>hello 2</h2>, ]; ReactDOM.render( <div>{arr}</div>, //会将arr中标签渲染到页面中 document.getElementById('example') );
React中,跨组件的数据解决方案
- 事件通信
- 状态提升
- Context上下文
- 状态管理工具:
- mobx mobx-react (Provider)
- redux react-redux
Mobx安装
npm install mobx -S
npm install mobx-react -S
使用两个 Babel 插件,支持ES6装饰器语法
npm install @babel/plugin-proposal-decorators -D
npm install @babel/plugin-proposal-class-properties -D
在 .babelrc 中配置如下
{
"presets": ["@babel/preset-react"],
"plugins": [
["@babel/plugin-proposal-decorators", {"legacy": true}],
["@babel/plugin-proposal-class-properties",{"loose": true}]
]
}
Store: 数据共享:
- 在store/order.js 编写
调取接口
然后抛出;
index.js模块进行组装封装调用,然后抛出
用App.js接收;
在App.js里被<Provider store={store}></Provider>
包括在内的组件都可以用inject注入,
observer把组件变为可被观察者操作注入的store的数据;
高阶组件
-
实例
import React from 'react' // 入参是组件 返回也是组件 function hocPlace(Component){ return class hocPlace extends React.Component{ render(){ let newProps = { name:"zhh", go(){ console.log("高阶组件"); } } return ( <div> <h1>高阶组件</h1> <Component {...newProps }></Component> </div> ) } } } //抛出hocPlace export default hocPlace
-
说明
(参数为组件,返回值为修饰完成的组件)
在一个文件里面写一个函数,然后再其他的组件里面引入这个高阶组件,然后把组件当成一个参数引入高阶组 件函数,就可以对该组件进行修饰了。
所谓的高阶组件函数就是定义一个公共的方法,谁需要它就直接引入进行修饰就行了,然后这个组件就在原来的基础上多出了高阶组件里面有的东西了。
列:- import 引入高阶组件
方法一: @hocplace(高阶组件)
、、、
export default B(该组件)
方法二: 、、、
export default hocplace(A)
//A为要修饰的组件
- import 引入高阶组件
React注意事项
最好每一个页面创建一个文件夹,里面放各个组件,然后每个文件夹里创建一个index.js文件进行整合,
然后再引入App.js文件里面去、一个页面写一个style.scss文件,这样修改页面起来就比较方便
一般只在src文件夹里面操作
创建一个公共的assets文件夹用来写一些全局的样式
时间工具Moment
-
使用及方法
-
安装
ower install moment --save # bower
-
常用方法
moment().format("YYYY-MM-DD HH:mm:ss"); //当前时间 moment().subtract(10, "days").format("YYYY-MM-DD"); //当前时间的前10天时间 moment().subtract(1, "years").format("YYYY-MM-DD"); //当前时间的前1年时间 moment().subtract(-1, "years").format("YYYY-MM-DD"); //当前时间的后1年时间 moment().subtract(3, "months").format("YYYY-MM-DD"); //当前时间的前3个月时间 moment().subtract(1, "weeks").format("YYYY-MM-DD"); //当前时间的前一个星期时间
-