05_React应用（基于React脚手架）

一、利用 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 支持）

1. <!-- index.html --- 主页面 -->
2. <!DOCTYPE html>
3. <html lang="en">
4.   <head>
5.     <meta charset="utf-8" />
6.     <!-- 用于引入页签的图标  %PUBLIC_URL% public的文件夹路径 -->
7.     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
8.     <!-- 用于开启理想视口，用于移动端网页的适配 -->
9.     <meta name="viewport" content="width=device-width, initial-scale=1" />
10.     <!-- 用于配置浏览器页签+地址栏的颜色，仅支持安卓手机浏览器 -->
11.     <meta name="theme-color" content="#000000" />
12.     <!-- 网站描述信息 -->
13.     <meta
14.       name="description"
15.       content="Web site created using create-react-app"
16.     />
17.     <!-- 用于指定网页添加到手机主屏幕后的图标（苹果手机） -->
18.     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
19.     <!-- 应用加壳 ,配置应用的权限等等信息-->
20.     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
21.     <title>React App</title>
22.   </head>
23.   <body>
24.     <!-- 若浏览器不支持js 则展示noscript标签中的内容 -->
25.     <noscript>You need to enable JavaScript to run this app.</noscript>
26.     <!-- 这个容器必须有 -->
27.     <div id="root"></div>
28.   </body>
29. </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”
4、todoList 案例相干知识点

1、拆分组件，实现静态组件。留意： className 、 style 的写法
2、动态初始化列表，怎样确定将数据放在哪个组件的 state 中？
– 某个组件利用：放在其自身的 state 中
– 某些组件利用：放在他们共同的父组件 state 中（官方称此操纵为：状态提拔）
3、关于父子组件之间的通讯
1）【父组件】给【子组件】通报数据：通过 props 通报
2）【子组件】给【父组件】通报数据：通过 props 通报，要求父组件提前给子组件通报一个函数
4、留意 defaultChecked 和 checked 的区别，雷同的尚有： defaultValue 和 value
5、状态在那里，操纵状态的方法就在那里
完备代码：https://gitee.com/qiao728/react-todo-list.git