React学习笔记-Day03

目录

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

react脚手架

创建项目并启动

react脚手架项目结构

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

关于编写React项目时的知识点(可参考todos案例)

---

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

react脚手架

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

创建项目并启动

        第一步，全局安装：npm i -g create-react-app

        第二步，切换到想创项目的目录，使用命令：create-react-app projectName

        第三步，进入项目文件夹：cd projectName

        第四步，启动项目：npm start 或 yarn 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库的支持)

 

在React项目中入口文件index.js的写法

// 新的createRoot
import {createRoot} from 'react-dom/client'
// 引入App组件
import App from './App'

const container = document.getElementById('root')
const root = createRoot(container)

root.render(<App/>)



//17.x版本的写法，18.x版本写，控制台会报错
// // 引入React的核心库
// import React from 'react'
// // 引入ReactDom
// import ReactDOM from 'react-dom'
// // 引入App组件
// import App from './App'

// // 渲染组件到页面
// ReactDOM.render(<App/>,document.getElementById('root'))

 在React项目中，App.js的文件内容

import React,{Component} from 'react'
import ComponentName1 from './components/ComponentName1'
import ComponentName2 from './components/ComponentName2'
import ComponentName3 from './components/ComponentName3'

export default class App extends Component{
    render(){
        return (
            <div>
                <ComponentName1/>
                <ComponentName2/>
                <ComponentName3/>
            </div>
        )
    }
}

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

        1. 拆分组件: 拆分界面,抽取组件

        2. 实现静态组件: 使用组件实现静态页面效果

        3. 实现动态组件

                3.1 动态显示初始化数据

                        3.1.1 数据类型

                        3.1.2 数据名称

                        3.1.3 保存在哪个组件?

                3.2 交互(从绑定事件监听开始)

关于编写React项目时的知识点(可参考todos案例)

todos案例需求

功能: 组件化实现此功能

  1. 显示所有todo列表

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

1.动态初始化列表，如何确定将数据放在哪个组件的state中？
    ——某个组件使用：放在其自身的state中
    ——某些组件使用：放在他们共同的父组件state中（官方称此操作为：状态提升）
2.关于父子之间通信：
    1.【父组件】给【子组件】传递数据：通过props传递
    2.【子组件】给【父组件】传递数据：通过props传递，要求父提前给子传递一个函数
3.注意defaultChecked 和 checked的区别，类似的还有：defaultValue 和 value
4.状态在哪里，操作状态的方法就在哪里