React学习笔记【8】（react脚手架）

学习地址：https://www.bilibili.com/video/BV1wy4y1D7JT
官方文档：

• 英文：https://react.dev/
• 中文：https://react.docschina.org/

react提供了一个用于创建react项目的脚手架库：create-react-app。
使用脚手架开发的项目的特点：模块化、组件化、工程化。

使用react创建项目并启动：

1. 全局安装create-react-app：npm i -g create-react-app
2. 切换到想要创建项目的目录，然后执行创建命令：create-react-app 项目名称
3. 等待创建成功后进入项目文件夹：cd 项目名称
4. 启动项目：npm start

创建项目图示：

react脚手架结构目录：

1. public ------ 静态资源文件
   • favicon.icon -------- 网站页签图标
   • index.html -------- 主页面
   • manifest -------- 应用加壳的配置文件
   • robots.txt -------- 爬虫协议文件
2. src ------ 源码文件夹
   • App.css -------- App组件的样式
   • App.js -------- App组件
   • App.test.js -------- 用于给App做测试
   • index.css -------- 公共样式(自我感觉 可作为全局公共样式表使用)
   • index.js -------- 入口文件
   • reportWebvitals.js -------- 页面性能分析文件(需要web-vitals库的支持)
   • steupTests.js -------- 组件单元测试的文件(需要jest-dom库的支持)

css模块化

1. 文件名修改
   
2. 引入样式及添加class

import React, { Component } from "react";
import hello from './hello.module.css'

export default class Hello extends Component{
    render(){
        return(
            <h2 className={hello.title}>hello React</h2>
        )
    }
}