react脚手架

基于React脚手架

创建项目并启动

第一步，全局安装：npm i -g create-react-app 第二步，切换到想创项目的目录，使用命令：create-react-app hello-react 第三步，进入项目文件夹：cd hello-react 第四步，启动项目：npm start

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库的支持)

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

启动——./src/index.js——引入react核心库、reactDOM、样式、APP、——触发reactDOM.render——渲染APP——自动找public/index.html中root节点（靠webpack配置）

组件的组合使用-TodoList

一、todoList案例相关知识点

​ 1.拆分组件、实现静态组件，注意：className、style的写法

​ 2.动态初始化列表，如何确定将数据放在哪个组件的state中？

​ ——某个组件使用：放在其自身的state中

​ ——某些组件使用：放在他们共同的父组件state中（官方称此操作为：状态提升）

​ 3.关于父子之间通信：

​ 1.【父组件】给【子组件】传递数据：通过props传递

​ 2.【子组件】给【父组件】传递数据：通过props传递，要求父提前给子传递一个函数

 4.注意defaultChecked 和 checked的区别，类似的还有：defaultValue 和 value

​ 5.状态在哪里，操作状态的方法就在哪里

// Header
// 对接收的props进行：类型、必要性限制
// eslint-disable-next-line react/no-typos
static PropTypes = {
    addTodo:PropTypes.func.isRequired
}
// 键盘事件的回调
// 子组件向父组件传递，调用父组件的方法
handleKeyUp = (event) => {
    // 解构赋值获取keyCode,target
    const {keyCode, target} = event
    // 判断是否是回车按键
    if (keyCode !== 13) return
    // 添加的todo名字不能为空
    if (target.value.trim() === '') {
        alert('输入不能为空')
        return;
    }
    // 准备好一个todo对象
    const todoObj = {
        id: nanoid(),
        name: target.value,
        done: false
    }
    // 将todoObj传递给App
    this.props.addTo(todoObj)
    // 清空输入
    target.value = ''
}

// App
// 初始化状态
state = {
    todos: [
        {id: '001', name: '吃饭', done: true},
        {id: '002', name: '睡觉', done: true},
        {id: '003', name: '打代码', done: false},
    ]
}
// 父组件接收参数后，修改自己的状态值，另外一个子组件再拿取该状态值
addTo = (todoObj) => {
    // 获取原todos
    const {todos} = this.state
    // 追加一个todo
    const newTodos = [todoObj, ...todos]
    // 更新状态
    this.setState({
        todos: newTodos
    })
}
render() {
    const {todos} = this.state
    return (
        <Header addTo={this.addTo}/>
	);
}