05_react应用（基于react脚手架）

qiao若huan喜

已于 2024-08-30 10:46:51 修改

阅读量682

点赞数 30

分类专栏： React 全家桶文章标签： react.js 前端前端框架

于 2024-08-29 17:58:30 首次发布

本文链接：https://blog.csdn.net/qq_46143850/article/details/141529921

版权

React 全家桶专栏收录该内容

5 篇文章 0 订阅

订阅专栏

react应用（基于react脚手架）

一、使用 create-react-app 创建 react 应用
二、样式冲突解决方案、 react 插件安装、编码流程
三、组件的组合使用-TodoList

一、使用 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" />
    <!-- 网站描述信息 -->
    <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”

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

qiao若huan喜

关注

30
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
05_react应用（基于react脚手架）

setupTests.js ----- 应用的整体测试，单元测试，组件测试（jest-dom 支持）App.test.js ------- 用于给 APP 做测试,基本不用，直接运行看效果即可。App.css ----------- App 组件的样式。App.js ------------ App 组件。logo192.png ------ logo 图。robots.txt ------- 爬虫协议文件。index.js ---------- 入口文件。工程化: 代码编写完成以后一系列都可以自动运行。
复制链接

扫一扫