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()



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

// // 渲染组件到页面
// ReactDOM.render(,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 (
            
) } }

功能界面的组件化编码流程(通用)

        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.状态在哪里,操作状态的方法就在哪里

你可能感兴趣的:(react.js,学习,javascript)