一：概念
- React 起源于 Facebook 的外部我的项目，因为该公司对市场上所有 JavaScript MVC 框架，都不称心，就决定本人写一套，用来架设 Instagram 的网站。做进去当前，发现这套货色很好用，就在2013年5月开源了。
- 用来构建UI的 JavaScript库
- React 不是一个 MVC 框架，仅仅是视图（V）层的库
二：对于React你须要晓得
1: React根本应用
- 装置：npm i -S react react-dom
- react：react 是React库的入口点
- react-dom：提供了针对DOM的办法，比方：把创立的虚构DOM，渲染到页面上
// 1. 导入 reactimport React from 'react'import ReactDOM from 'react-dom'// 2. 创立 虚构DOM// 参数1：元素名称 参数2：元素属性对象(null示意无) 参数3：以后元素的子元素string||createElement() 的返回值const divVD = React.createElement('div', { title: 'hello react'}, 'Hello React！！！')// 3. 渲染// 参数1：虚构dom对象 参数2：dom对象示意渲染到哪个元素内 参数3：回调函数ReactDOM.render(divVD, document.getElementById('app'))通过下面你就能实现一个React的根本渲染。
2:对于jsx
因为createElement()形式，代码编写不敌对，太简单，所以React官网为咱们提供了jsx.
根本应用：
- 留神：JSX语法，最终会被编译为 createElement() 办法
- 举荐：应用 JSX 的形式创立组件
- JSX - JavaScript XML
- 装置：npm i -D babel-preset-react （依赖与：babel-core/babel-loader）
/* 1 在 .babelrc 开启babel对 JSX 的转换 */{ "presets": [ "env", "react" ]}/* 2 webpack.config.js */module: [ rules: [ { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, ]]/* 3 在 js 文件中 应用 JSX */const dv = ( <div title="题目" className="cls container">Hello JSX!</div>)/* 4 渲染 JSX 到页面中 */ReactDOM.render(dv, document.getElementById('app'))留神：jsx的代码会最终被编译成createElement()
3: 对于React组件的创立
- 通过 JS函数 创立（无状态组件）: 仅仅是为了展现数据，那么此时就能够应用 函数组件
- 通过 class 创立（有状态组件）: 有肯定业务逻辑，须要操作数据，那么就须要应用 class 创立组件
- Hooks（高阶组件）: 终极合体，又是无状态组件和能操作数据
应用函数创立一个组件（无状态组件）
function Welcome(props) { return ( // 此处正文的写法 <div className="shopping-list"> {/* 此处 正文的写法 必须要{}包裹 */} <h1>Shopping List for {props.name}</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> </ul> </div> )}ReactDOM.render( <Welcome name="jack" />, document.getElementById('app'))应用Class创立一个组件（有状态组件）
// react对象继承字React.Componentclass ShoppingList extends React.Component { constructor(props) { super(props) } // class创立的组件中 必须有rander办法 且显示return一个react对象或者null render() { return ( <div className="shopping-list"> <h1>Shopping List for {this.props.name}</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> </ul> </div> ) }}创立一个高阶组件
4：对于数据props和state
- props: 给组件传递数据，个别用在父子组件之间
function Welcome(props) { // 返回的 react元素中必须只有一个根元素 return <div>hello, {props.name}</div>}class Welcome extends React.Component { constructor(props) { super(props) } render() { return <h1>Hello, {this.props.name}</h1> }}- state:用来给组件提供组件外部应用的数据
class Hello extends React.Component { constructor() { super() this.state = { gender: 'male' } } render() { return ( <div>性别：{ this.state.gender }</div> ) }}- 受控组件和非受控组件
对于state和props又繁殖出两个概念，受控组件和非受控组件。相似于props这种，他所有的状态都是来自于内部，那么他的显示则齐全由内部感觉，咱们能够说他是一个受控组件。像state这种，他有他本人组件的状态，并不受内部的管制，所以咱们能够认为他是一个非受控组件
- setState
如何更新state呢，间接更改state其实能够的，不过这样子无奈触发组件视图的更新机制。所以应用setState()api。
import * as React from 'react'class Child extends React.Component { state = { name: '小明' } constructor(props) { super(props) this.update = this.update.bind(this) } update(e) { this.setState({ name: e.target.value }) } render() { return (<div> <input onChange={this.update} value={this.state.name}/> </div>) }}- props校验
React为咱们提供了一个对于props格局验证的插件：prop-types
// 引入模块import PropTypes from 'prop-types'// ...以下代码是类的动态属性：// propTypes 动态属性的名称是固定的！！！static propTypes = { initCount: PropTypes.number, // 规定属性的类型 initAge: PropTypes.number.isRequired // 规定属性的类型，且规定为必传字段}5:对于生命周期
一个组件从开始到最初沦亡所经验的各种状态，就是一个组件的生命周期
React生命周期包含：创立阶段（Mounting）、运行和交互阶段（Updating）、卸载阶段（Unmounting）
一下是生命周期的所有钩子函数（*代表罕用的）：
创立阶段：
- constructor()：获取props，初始化state
- componentWillMount() ： 组件被挂载到页面之前调用，其在render()之前被调用，因而在这办法里同步地设置状态将不会触发重渲染。 *
- render()：渲染组件到页面中，无奈获取页面中的DOM对象
- componentDidMount()：组件曾经挂载到页面中 *
运行阶段：
- componentWillReceiveProps()：组件承受到新的props前触发这个办法
- shouldComponentUpdate()：依据这个办法的返回值决定是否从新渲染组件，返回true从新渲染，否则不渲染
- componentWillUpdate()：组件将要更新 *
- render()：从新渲染组件，与Mounting阶段的render是同一个函数
- componentDidUpdate()：组件曾经被更新 *
卸载阶段：
- componentWillUnmount()：在卸载组件的时候，执行清理工作 *
6: react-router
根本应用：
// 1 引入import { HashRouter as Router, Link, Route} from 'react-router-dom'// 2 应用 <Router><Router> <Switch> // exact 示意：相对匹配（齐全匹配，只匹配：/） <Route exact path="/" component={HomeContainer}></Route> <Route path="/movie" component={MovieContainer}></Route> <Route path="/about" component={AboutContainer}></Route> </Switch></Router>- 对于路由传参
<Route path="/movie/:movieType"></Route>- 路由跳转
this.props.history.push('/movie/movieDetail/' + movieId)7:对于Redux(这个不说了，货色太多，有工夫单写一篇介绍这个的博客)
好了，对于React的常识就差不太多了，有时候学习一个框架就是这么简略。
三：搭建一个简略登陆页
1:应用 create-react-app 疾速构建 React 开发环境
npm install -g create-react-appcreate-react-app my-appcd my-app/npm start我的项目运行起来之后，你会失去上面的界面。
2: React中引入antd
antd地址：https://ant.design/index-cn
第一步：npm i antd --save
第二步：npm i react-app-rewired -D 后更改package.json文件
/* package.json */"scripts": {- "start": "react-scripts start",+ "start": "react-app-rewired start",- "build": "react-scripts build",+ "build": "react-app-rewired build",- "test": "react-scripts test",+ "test": "react-app-rewired test",}第三步：装置按需加载插件 npm install babel-plugin-import
第四步： npm install customize-cra --save
第四步：在我的项目根目录创立一个 config-overrides.js 用于批改默认配置。
const { override, fixBabelImports } = require("customize-cra"); module.exports = override( fixBabelImports("babel-plugin-import", { libraryName: "antd", style: "css" }) );3:登陆页面代码
革新app.js为如下代码
import React from "react";import "./App.css";import { Form, Input, Button, Card} from 'antd';const layout = { labelCol: { span: 8, }, wrapperCol: { span: 16, },};const tailLayout = { wrapperCol: { offset: 8, span: 16, },};const App = () => { // 提交表单且数据验证胜利后回调事件 const onFinish = values => { console.log('Success:', values); }; // 提交表单且数据验证失败后回调事件 const onFinishFailed = errorInfo => { console.log('Failed:', errorInfo); }; return ( <Card title="登陆页面" className="login-form"> <Form {...layout} name="basic" initialValues={{ remember: true, }} onFinish={onFinish} onFinishFailed={onFinishFailed} > <Form.Item label="用户名" name="用户名" rules={[ { required: true, message: '请输出用户名', }, ]} > <Input /> </Form.Item> <Form.Item label="明码" name="明码" rules={[ { required: true, message: '请输出明码', }, ]} > <Input.Password /> </Form.Item> <Form.Item {...tailLayout}> <Button type="primary" htmlType="submit"> 登陆 </Button> </Form.Item> </Form> </Card> );};export default App我的项目级React目录构造：
至此，学会下面的货色尽管只是入门，然而曾经能够去上手写我的项目了，更多对于React的了解和使用就须要你去真正的我的项目中去磨难了。