本文章是在B站天禹老师的【尚硅谷React技术全家桶完整版】教程基础之上(P55~P65)，根据个人情况总结的学习记录，不说背景了，直接上笔记。
一、react脚手架
1. xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
-
包含了所有需要的配置（语法检查、jsx编译、devServer…）
-
下载好了所有相关的依赖
-
可以直接运行一个简单效果
2. react提供了一个用于创建react项目的脚手架库: create-react-app
3. 项目的整体技术架构为: react + webpack + es6 + eslint
4. 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化
二、创建项目并启动
第一步，全局安装：npm i -g create-react-app
第二步，切换到想创项目的目录，使用命令：create-react-app hello-react
第三步，进入项目文件夹：cd hello-react
第四步，启动项目：npm start
三、reac脚手架项目结构
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库的支持)
//在入口文件 index.jsx 中引入react核心库、reactDOM、App组件
//引入react核心库
import React from 'react'
//引入reactDOM
import ReactDOM from 'react-dom'
//引入App组件 .js后缀可以省略
import App from './App.js'
//渲染App组件到页面
ReactDOM.render(<App/>,document.getElementById('root'))
四、功能界面的组件化编码通用流程
-
拆分组件: 拆分界面,抽取组件
-
实现静态组件: 使用组件实现静态页面效果
-
实现动态组件
3.1 动态显示初始化数据
3.1.1 数据类型 3.1.2 数据名称 3.1.2 保存在哪个组件?3.2 交互(从绑定事件监听开始)
五、React组件化编程案例todoList，把老html项目转成React项目
- 拆分组件: 拆分界面,抽取组件
- 实现静态组件: 使用组件实现静态页面效果
1. src文件夹下创建components文件夹,components文件夹下分别创建Header、List、Item、Footer文件夹
一个组件就是一个文件夹，用于放置该组件的jsx文件、css文件，注意组件文件夹命名首字母大写。
2. 分别新建组件的jsx文件、css文件，命名使用公司常用的index命名 (便利：引入时只需要写组件文件夹名，index可以省略不写)
VSCode插件商店搜索React,安装ES7插件。用vscode的代码片段(也叫代码模板) rcc 快速生成类式组件；rfc快速生成函数式组件
3.把老项目中的html文件粘贴放入App.jsx中，先不拆结构
html:class === jsx:className
html:style=" " === jsx:style={{}}
按住ctrl+H:
把 class= 替换为 className=
把style="display:none" 替换为 style={{display:'none'}} //不加引号则出发查找none变量
注意：标签是否都闭合</>
4.把老项目的css文件粘贴放入App.css中，先不拆样式
注意，在app.jsx中引入App.css文件，import './App.css'
5.开始拆分组件结构 (以Header和List为例)
（1）将App.jsx中的
<div className="todo-header">
<input onKeyUp={this.handlekeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
</div>
剪切入 Header.jsx的render() {return ()} return中
（2）原App.jsx中原位置替换为Header组件 <Header/>
（3）引入Header组件 import Header from './components/header' //引入原则，第三方的包往上靠，自己的包往下靠，样式文件放在最后。其他组件拆分方法上同，不作赘述
（5）对于List组件，包含子组件Item，引入Item import Item from '../Item'
6.开始拆分样式文件
注意在jsx中引入相应css文件 import './index.css'
- 实现动态组件 ——几个要点：
（1）状态中的数据驱动页面展示
a. 初始化列表，如何确定将数据放在哪个组件的state中？
某个组件使用：放在自身的state中
某些组件使用：放在他们共同的父组件state中 (状态提升)
b. 父子之间的通信（传递数据）
【父组件】给【子组件】传递数据：通过props传递
【子组件】给【父组件】传递数据：通过props传递，要求父提前给子传递一个函数
（2）状态在哪里,操作状态的方法就在哪里
（3）用...批量上传todo对象
render() {
const {todos,updateTodo,deleteTodo} = this.props
return (
<ul className="todo-main">
{
todos.map((todo)=>{
// return <Item key={todo.id} id={todo.id} name={todo.name} done={todo.done}/>
return <Item key={todo.id} {...todo} updateTodo={updateTodo} deleteTodo={deleteTodo}/> //用...批量上传todo
})
}
</ul>
)
}
（4）注意defaultChecked与checked的区别
defaultChecked只在第一次使用时起作用，一般用于列表渲染时不需要增删查改的地方，就只渲染一次。
类似的还有dafaultValue和value。
** 🚩下一周：自己重新手动敲一遍todoList案例，理解所有逻辑和细节。理解透彻后，再来总结输出一些文字。**
