前言：
一、使用create-react-app创建react应用
- 1、什么是 react 脚手架？
- 2. 创建 cli 脚手架方式1
- 3. 创建 cli 脚手架方式2
- 4. npx:
- 5. react脚手架项目结构
- 6. 功能界面的组件化编码流程（通用）
- 7. 如何更改脚手架版本
二、React 组件的组合使用
- 1. 父传子（props传参）
- 2. 子传父
- 3. TodoList 代码示例
- 4. TodoList 效果展示
总结：

前言：

react 是前端三大框架中之一,而且大公司基本都在用react 包括百度也在使用他有自己的独特的虚拟dom
build-react-cli是帮助你快速创建生成react项目的脚手架工具，配置了多种可选择的不同类型项目模版。

一、使用create-react-app创建react应用

1、什么是 react 脚手架？

xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
1. 包含了所有需要的配置（语法检查、jsx编译、devServer…）
2. 下载好了所有相关的依赖
3. 可以直接运行一个简单效果
react提供了一个用于创建react项目的脚手架库: create-react-app
项目的整体技术架构为: react + webpack + es6 + eslint
使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

2. 创建 cli 脚手架方式1

先全局安装脚手架工具包
命令：npm i -g create-react-app
用脚手架工具来创建项目
命令：create-react-app + 项目名称
启动项目
命令： npm start

3. 创建 cli 脚手架方式2

直接使用npx来创建项目

命令：
npx create-react-app + 项目名称
解释：
npx create-react-app 是固定命令，create-react-app 是 React 脚手架的名称
启动项目
命令： npm start

4. npx:

npx 是 npm v5.2 版本新添加的命令，用来简化 npm 中工具包的使用
没有 npx 之前：
- 全局安装 npm i -g create-react-app
- 在通过脚手架的命令来创建 React 项目
有了 npx 之后
- npx 调用最新的 create-react-app 直接创建 React 项目

5. react脚手架项目结构

public —- 静态资源文件夹：

favicon.icon —— 网站页签图标

index.html ——– 主页面

logo192.png ——- logo图

logo512.png ——- logo图

manifest.json —– 应用加壳的配置文件

robots.txt ——– 爬虫协议文件

src —- 源码文件夹：

App.css ——– App组件的样式

App.js ——— App组件

App.test.js —- 用于给App做测试

index.css —— 样式

index.js ——- 入口文件

logo.svg ——- logo图

reportWebVitals.js

页面性能分析文件(需要web-vitals库的支持)

setupTests.js

组件单元测试的文件(需要jest-dom库的支持)

6. 功能界面的组件化编码流程（通用）

拆分组件: 拆分界面,抽取组件
实现静态组件: 使用组件实现静态页面效果
实现动态组件
1. 动态显示初始化数据
  - 数据类型
  - 数据名称
  - 保存在哪个组件?
2. 交互(从绑定事件监听开始)

7. 如何更改脚手架版本

由于 create-react-app my-app 安装的都是最新的版本所以我们需要指定版本，直接执行下面的步骤就可以
脚手架创建完成后改变 package.json 中的 react 版本
更改为指定版本后删除 node_modules 文件，重新 npm i 下载配置
配置完成后运行会报错，因为组件中使用的还是源版本配置
删除 public 和 src 文件夹下所有文件，根据当前版本进行配置
只需要配置完成 public 下的 index.html 文件，和 src 下的 index.js 和 App.js 文件。
public 下 index.html 文件的内容

!DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    link rel="icon" href="./favicon.ico" /> !-- 当前行为引入 logo 图标，如果无需引入可以不写 -->
    meta http-equiv="X-UA-Compatible" content="IE=edge">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    link rel="stylesheet" href="/css/bootstrap.css">
    title>react-redux/title>
/head>
body>
    div id="root">/div>
/body>
/html>

src 下的 index.js 文件

import React from 'react'
import ReactDom from 'react-dom'
import App from './App'
ReactDom.render(App />, document.getElementById('root'));

src 下的 App.js 文件

import React from 'react'

export default function App() {
  return (
    div>
      App组件
    /div>
  )
}

使用 npm start 运行项目即可

二、React 组件的组合使用

在 React 中，父子组件的通信是常见的问题，除了使用状态管理工具（如redux）以外，也可以实现父子组件的相互通信。

其中，父组件可以通过props、原型方法向子组件通信，子组件可以通过回调函数、事件冒泡向父组件通信。

1. 父传子（props传参）

如下代码，list 作为 props 由父组件传递给子组件，子组件拿到 list 后，渲染在页面上。

参数 list 由父组件传递给了子组件。

// 父组件
import React, { Component } from 'react'
import List from "./components/List"

export default class App extends Component {
    state = {
        // 渲染数据
        list: [
            { id: 0, title: '111', show: true, checked: false },
            { id: 1, title: '222', show: true, checked: false },
            { id: 2, title: '333', show: true, checked: false },
        ],
    }
    render() {
        return (
            div>
                List list={this.state.list} />
            /div>
        )
    }
}

// 子组件
import React, { Component } from 'react'

export default class index extends Component {
    render() {
        const { list } = this.props
        return (
            div>
                ul className="todo-main">
                    Item list={list}/>
                /ul>
            /div>
        )
    }
}

2. 子传父

父组件需要向子组件传递一个函数，然后，子组件通过props获取函数并附上参数，最后，父组件通过函数拿到子组件传递的值。

// 父组件
import React, { Component } from 'react'
import List from "./components/List"

export default class App extends Component {
    changeitem = (e, id) => {
        console.log('子传父接收');
    }
    render() {
        return (
            div>
                List changeitem={this.changeitem} />
            /div>
        )
    }
}

// 子组件
import React, { Component } from 'react'

export default class index extends Component {
    // 子传父触发事件（单选框改变事件）
    changeitem = (e, id) => {
        // 子传父
        this.props.changeitem(e, id)
    }
    render() {
        return (
            div>/div>
        )
    }
}

3. TodoList 代码示例

功能: 组件化实现此功能

显示所有todo列表

输入文本, 点击按钮显示到列表的首位, 并清除输入的文本

因代码过多无法在当前页面展示，当前资源已上传，点击跳转

4. TodoList 效果展示