05_react应用（基于react脚手架）
react应用（基于react脚手架）
- 一、使用 create-react-app 创建 react 应用
- 1、react 脚手架
- 2、创建项目并启动
- 3、react 脚手架项目结构
- 二、样式冲突解决方案、 react 插件安装、编码流程
- 1、样式冲突
- 2、vscode 的 react 插件安装
- 3、功能界面的组件化编码流程
- 4、引入包、组件规则
- 三、组件的组合使用-TodoList
- 2、子组件向 父组件传递参数
- 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 支持）
<!-- 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" /><!-- 网站描述信息 --><metaname="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”
完整代码：https://gitee.com/qiao728/react-todo-list.git