一、学习总览

image.png

二、安装

1.脚手架的安装和使用

npm install -g create-react-app
//
create-react-app myapp-name
//
cd myapp-name
npm start

2.开发工具安装：react-develop-tools

三、认识

1.父子属性传递的校验

image.png

//引入
import PropTypes from ‘prop-types’
//校验
TodoItem.propTypes  = {
     content：PropTypes .string.isRequired,//func
     //或者
     content2：PropTypes.arrayOf（PropTypes .string，PropTypes .number）,
}
//默认值
TodoItem.defaultProps= {
     content：‘hello’
}

2.react(all in js)

在js中引入css

3.学网页的形式写app应用，断网的时候也可以使用，他会存储到浏览器之内

image.png

4.自动化测试文件

image.png

5.manifest.json定义快捷方式到桌面的一些配置

image.png

6.index.js中的组件挂载

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './style.js';
import './statics/iconfont/iconfont';

ReactDOM.render(<App />, document.getElementById('root'));

7.<Fragment>组件的运用：可以再html中隐藏最外层的包裹div

image.png

8.state只能通过setState改变值，且子组件不允许改变状态

image.png

//通过拷贝一份进行改值
//immutable state 不允许我们做任何的改变

image.png

9.注释写法

{/*注释*/}
or
{
  //注释
}

10.输出html

image.png

11.label-for的改写

image.png

12.父子组件传值

//父
<TodoItem content = {item}/>
//子
const { content } = this.props
<div>{content}</div>

13.子组件触发父组件

父：

image.png

子：

image.png

14.优化

image.png

setState跟函数

image.png

15.特点

image.png