05_react应用(基于react脚手架)

2024-08-30 12:44

本文主要是介绍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 库,体积较小,可以生成唯一标识
    • 4、todoList 案例相关知识点

一、使用 create-react-app 创建 react 应用

1、react 脚手架

  1. xxx 脚手架:用来帮助程序员快速创建一个基于 xxx 库的模版项目
    a. 包含了所有需要的胚子(语法检查、jsx 编译、devServer…)
    b. 下载好了所有相关的依赖
    c. 可以直接运行一个简单的效果
  2. react 提供了一个用于创建 react 项目的脚手架库:create-react-app
  3. 项目的整体技术架构为: react + webpack + es6 + eslint
  4. 使用脚手架开发的项目的特点:模块化、组件化、工程化

工程化: 代码编写完成以后一系列都可以自动运行

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”

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

这篇关于05_react应用(基于react脚手架)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1120861

相关文章

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Python结合PyWebView库打造跨平台桌面应用

《Python结合PyWebView库打造跨平台桌面应用》随着Web技术的发展,将HTML/CSS/JavaScript与Python结合构建桌面应用成为可能,本文将系统讲解如何使用PyWebView... 目录一、技术原理与优势分析1.1 架构原理1.2 核心优势二、开发环境搭建2.1 安装依赖2.2 验

Java字符串操作技巧之语法、示例与应用场景分析

《Java字符串操作技巧之语法、示例与应用场景分析》在Java算法题和日常开发中,字符串处理是必备的核心技能,本文全面梳理Java中字符串的常用操作语法,结合代码示例、应用场景和避坑指南,可快速掌握字... 目录引言1. 基础操作1.1 创建字符串1.2 获取长度1.3 访问字符2. 字符串处理2.1 子字

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

SpringShell命令行之交互式Shell应用开发方式

《SpringShell命令行之交互式Shell应用开发方式》本文将深入探讨SpringShell的核心特性、实现方式及应用场景,帮助开发者掌握这一强大工具,具有很好的参考价值,希望对大家有所帮助,如... 目录引言一、Spring Shell概述二、创建命令类三、命令参数处理四、命令分组与帮助系统五、自定

SpringBoot应用中出现的Full GC问题的场景与解决

《SpringBoot应用中出现的FullGC问题的场景与解决》这篇文章主要为大家详细介绍了SpringBoot应用中出现的FullGC问题的场景与解决方法,文中的示例代码讲解详细,感兴趣的小伙伴可... 目录Full GC的原理与触发条件原理触发条件对Spring Boot应用的影响示例代码优化建议结论F