一. 安装react脚手架

1.全局安装create-react-app    --没有必要

2.npx安装  

       npx create-react-app  文件名

出现 cd baisc-app和yarn start 表示安装成功

二.react的mvc设计模式

Vue中的MVVM (双向数据绑定)

M（模型层，主要负责业务数据相关） V（视图层，顾名思义，负责视图相关） VM（ViewModel，V与M连接的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点）

也就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互绑定；

React的MVC（默认是单向数据流，但是我们可以自己实现双向绑定）

M(model 数据模型层 ) V（view 视图层 ） C（controller 控制层 ）

主要实现通过控制层监听model的变化，数据变化后通过controller 控制层 来实现view层的渲染。

三.react的特点

1.虚拟DOM

2.React Fiber算法

3.组件系统    将页面中任何一个区域或者元素都可以看做一个组件 component

4.单向数据流  

5.JSX 语法

四.组件

1.函数式组件

2.类组件

3.组件的嵌套

注意App内必须用标签包裹，但是用div标签会导致页面多渲染了一个div标签，可能会打乱数据结构

所以一般用空标签或者React.Fragment标签，这样react就不会渲染标签，和vue中的template标签一样

空标签和react.fragment的区别

空标签无法添加属性，后者可以添加属性，但是只能添加key属性

4.组件中的样式

命令行  cnpm i styled-components -S

然后在组件中导入包 import styled from 'styled-components'

直接声明变量，值为styled.标签名`样式`

使用时使用变量名为标签名

五.组件的数据挂载

1.属性（props）

（1）props传值

    函数式组件使用props默认参数传递

    类组件使用this.props传递

（2）props传默认值

函数式组件在声明之后使用defaultProps对象来设置默认值

类组件在内部通过 static defaultProps对象设置默认值

（3）props验证数据类型

函数式组件和类组件都使用propTypes第三方包

命令行输入    cnpm i prop-types -S

import PropTypes from 'prop-types'   导包

组件名.propTypes = { 属性名.PropTypes.属性类型}        ---注意数据类型的首字母不需要大写

如果一个属性是多种数据类型使用oneOfType()方法

（4）指定属性必须传递，使用isRequired

（5）props.childern    --    这里children代表内容字符串子元素

如果有多个数据

页面效果为

因为第二个子组件Title和第三个Title中  children是字符串类型，如果使用下标会拆分字符串三为第一个下标，国为第二个下标

演义没有接收所以不显示