react应用（基于react脚手架）
- [一、使用 create-react-app 创建 react 应用](#一、使用 create-react-app 创建 react 应用)
-
- [1、react 脚手架](#1、react 脚手架)
- 2、创建项目并启动
- [3、react 脚手架项目结构](#3、react 脚手架项目结构)
- [二、样式冲突解决方案、 react 插件安装、编码流程](#二、样式冲突解决方案、 react 插件安装、编码流程)
-
- 1、样式冲突
- [2、vscode 的 react 插件安装](#2、vscode 的 react 插件安装)
- 3、功能界面的组件化编码流程
- 4、引入包、组件规则
- 三、组件的组合使用-TodoList
-
- [2、子组件向 父组件传递参数](#2、子组件向 父组件传递参数)
- [3、nanoid 库，体积较小，可以生成唯一标识](#3、nanoid 库，体积较小，可以生成唯一标识)
一、使用 create-react-app 创建 react 应用
1、react 脚手架
- xxx 脚手架：用来帮助程序员快速创建一个基于 xxx 库的模版项目
a. 包含了所有需要的胚子（语法检查、jsx 编译、devServer...）
b. 下载好了所有相关的依赖
c. 可以直接运行一个简单的效果 - react 提供了一个用于创建 react 项目的脚手架库：create-react-app
- 项目的整体技术架构为： react + webpack + es6 + eslint
- 使用脚手架开发的项目的特点：模块化、组件化、工程化
工程化: 代码编写完成以后一系列都可以自动运行
2、创建项目并启动
**第一步，**全局安装： npm install -g create-react-app
**第二步，**切换到想要创建项目的目录，使用命令： create-react-app hello-react
**第三步，**进入项目文件夹: cd hello-react
**第四步，**启动项目： npm start
创建成功后：
npm run eject 命令
react 默认把所有 webpack 配置文件隐藏了， npm run eject 命令可以显示全部的配置文件
3、react 脚手架项目结构
public --- 静态资源文件夹
favicon.ico ------ 网站页签图标
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 ---------- 图片
reportWebVitals.js- 记录页面的性能
setupTests.js ----- 应用的整体测试，单元测试，组件测试（jest-dom 支持）
html
<!-- index.html --- 主页面 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- 用于引入页签的图标 %PUBLIC_URL% public的文件夹路径 -->
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<!-- 用于开启理想视口，用于移动端网页的适配 -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- 用于配置浏览器页签+地址栏的颜色，仅支持安卓手机浏览器 -->
<meta name="theme-color" content="#000000" />
<!-- 网站描述信息 -->
<meta
name="description"
content="Web site created using create-react-app"
/>
<!-- 用于指定网页添加到手机主屏幕后的图标（苹果手机） -->
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- 应用加壳 ,配置应用的权限等等信息-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<!-- 若浏览器不支持js 则展示noscript标签中的内容 -->
<noscript>You need to enable JavaScript to run this app.</noscript>
<!-- 这个容器必须有 -->
<div id="root"></div>
</body>
</html>二、样式冲突解决方案、 react 插件安装、编码流程
1、样式冲突
避免样式冲突，使用样式模块化 文件需要命名 index.module.css
引入
import Hello from './index.module.css'
className = {Hello.title}
2、vscode 的 react 插件安装
VS Code ES7+ React/Redux/React-Native/JS snippets
在创建的 js 文件用 rcc 就能够快速生成文件名的组件模板
3、功能界面的组件化编码流程
1、拆分组件：拆分界面，抽取组件
2、实现静态组件：使用组件实现静态页面效果
3、实现动态组件
3.1 动态显示初始化数据
3.1.1 数据类型
3.1.2 数据名称
3.1.3 保存在哪个组件
3.2 交互（从绑定事件监听开始）
4、引入包、组件规则
先引入第三方包
自己的包、组件
最后是样式
三、组件的组合使用-TodoList
功能：组件化实现，需求如下：
1、显示所有 todo 列表
2、输入文本，点击按钮显示到列表的首位，并清除输入的文本
2、子组件向 父组件传递参数
父组件先使用 props 传给子组件函数， 子组件在合适的时候调用该函数
3、nanoid 库，体积较小，可以生成唯一标识
yarn add nanoid
import {nanoid} from "nanoid"