React 前端框架1

一、React 简介

(一)什么是 React

React 是一个用于构建用户界面的 JavaScript 库,由 Facebook 开源并维护。它采用了组件化的开发思想,允许开发者将复杂的 UI 拆分成一个个独立、可复用的小组件,就如同搭积木一般,通过组合这些 “积木”(组件)来构建出完整且功能丰富的页面或者应用程序。例如,一个电商网站中,商品展示的卡片、导航栏、侧边栏等都可以分别作为独立的组件进行开发,然后灵活地组装在一起。

(二)React 的特点

  • 高效性
    • React 使用了虚拟 DOM(Virtual DOM)技术。简单来说,虚拟 DOM 是真实 DOM 的一种轻量级的 JavaScript 表示形式。当组件的状态或者属性发生变化时,React 会先在虚拟 DOM 上进行相应的更新操作,然后通过对比新旧虚拟 DOM 的差异(这个过程叫 Diffing),只将有变化的部分精准地更新到真实 DOM 中,而不是像传统方式那样直接操作整个真实 DOM,大大减少了不必要的 DOM 操作,从而提高了页面的渲染效率,让应用的交互体验更加流畅。
  • 组件化与复用性
    • 组件是 React 的核心概念,每个组件都有自己独立的逻辑、样式和结构。我们可以方便地在不同的地方复用已经编写好的组件,减少了重复代码的编写。比如,在多个页面都需要使用相同样式和功能的按钮组件时,只需要创建一次这个按钮组件,然后在其他地方按需引入使用即可,这极大地提高了开发效率,也方便后期的维护和扩展。
  • 单向数据流
    • React 遵循单向数据流的原则,数据从父组件流向子组件,子组件不能直接修改父组件传递过来的数据,只能通过调用父组件传递过来的回调函数等方式来告知父组件数据需要变更,这种清晰的数据流向使得组件之间的数据交互更加可预测,易于理解和调试,能有效避免复杂应用中数据混乱的问题。

二、React 环境搭建

(一)使用 Create React App 工具(推荐新手使用)

Create React App 是 Facebook 官方提供的一个脚手架工具,它可以帮助我们快速搭建一个基于 React 的项目开发环境,免去了繁琐的配置过程。

  • 安装步骤
    1. 首先确保你的电脑已经安装了 Node.js(因为 Create React App 依赖于 Node.js 的包管理工具 npm 或者 yarn)。
    2. 打开命令行终端,输入以下命令来创建一个新的 React 项目(这里以项目名为 my-react-app 为例):
      使用 npm:npx create-react-app my-react-app
      或者使用 yarn:yarn create react-app my-react-app
    3. 等待安装过程完成后,进入项目目录:cd my-react-app
    4. 启动项目开发服务器,在命令行中输入:npm start(使用 npm 时)或者 yarn start(使用 yarn 时),此时浏览器会自动打开一个页面,显示 React 的默认欢迎界面,就表示项目搭建成功啦,可以开始进行 React 开发了。

(二)手动配置 React 项目(适合有一定经验的开发者)

如果你想要对项目的配置有更多的掌控权,也可以选择手动配置 React 项目环境,不过这相对来说步骤会复杂一些,涉及到配置 webpack(用于模块打包)、Babel(用于将 ES6 等新语法编译成浏览器能识别的代码)等工具,以下是大致的步骤概述:

  1. 创建项目目录,比如 my-manual-react-app,进入该目录后初始化一个 npm 项目(通过 npm init -y 命令)。
  2. 安装 React 和 React DOM 库:npm install react react-dom
  3. 安装 webpack、webpack-cli 以及相关的 loader(比如用于处理 CSS、JavaScript 等文件的 loader):例如,npm install webpack webpack-cli style-loader css-loader babel-loader @babel/core @babel/preset-env @babel/preset-react -S
  4. 配置 webpack 的配置文件(webpack.config.js),定义入口文件、输出路径、模块规则等内容。
  5. 配置 Babel 的配置文件(.babelrc),指定要使用的预设(presets),比如 @babel/preset-env 用于处理 ES6 等新的 JavaScript 语法,@babel/preset-react 用于处理 React 的 JSX 语法等。
  6. 创建 HTML 文件作为项目的入口页面,在其中引入打包后的 JavaScript 文件等,然后通过命令行运行 webpack 命令来进行项目的打包构建等操作。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/62835.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

20241128解决Ubuntu20.04安装libwxgtk3.0-dev异常的问题

20241128解决Ubuntu20.04安装libwxgtk3.0-dev异常的问题 2024/11/28 16:17 缘起:中科创达的高通CM6125开发板的Android10的编译环境需要。 安装异常:rootrootrootroot-X99-Turbo:~$ rootrootrootroot-X99-Turbo:~$ sudo apt-get install libwxgtk3.0-de…

大疆T100大载重吊运植保无人机技术详解

大疆T100作为一款大载重吊运植保无人机,融合了全新的AI和AR功能,旨在进一步提升安全性并满足喷洒、播撒、吊运等多种作业场景的需求。以下是对其技术的详细解析: 一、总体性能 最大起飞重量:149.9公斤 喷洒容量:75升…

arkTS:使用ArkUI实现用户信息的持久化管理与自动填充(PersistentStorage)

arkUI:使用ArkUI实现用户信息的持久化管理与自动填充(PersistentStorage) 1 主要内容说明2 例子2.1 登录页2.1.1登陆页的相关说明2.1.1.1 持久化存储的初始化2.1.1.2 输入框2.1.1.3 记住密码选项2.1.1.4 登录按钮的逻辑2.1.1.5 注册跳转 2.1.…

腾讯云 AI 代码助手:单元测试应用实践

引言 在软件开发这一充满创造性的领域中,开发人员不仅要构建功能强大的软件,还要确保这些软件的稳定性和可靠性。然而,开发过程中并非所有任务都能激发创造力,有些甚至是重复且乏味的。其中,编写单元测试无疑是最令人…

1、Three.js开端准备环境

准备工作 从 CDN 导入 1.安装 VSCode 2.安装 Node.js 3.查看Three.js最新版本 4.如何cdn引入: https://cdn.jsdelivr.net/npm/threev版本号/build/three.module.js 例如:https://cdn.jsdelivr.net/npm/threev0.170.0/build/three.module.js 我们需要…

Python基础教程005:if和else语句的使用

文章目录 3.1 布尔类型和比较运算符3.2 if语句的基本格式3.3 if else语句 3.1 布尔类型和比较运算符 布尔类型: 真True假False 定义变量存储布尔类型数据据: 变量名称 布尔类型字面量 比较运算符: 运算符描述示例判断内容是否相等&…

for循环和while循环区别、特点、优势

结论&#xff1a;while循环的自由度更高 for循环&#xff1a; 可以看到&#xff0c;对于变量 i 的操作&#xff0c;只能有一句&#xff1a;i /* for 循环 */ function forLoop(n: number): number {let res 0;// 循环求和 1, 2, ..., n-1, nfor (let i 1; i < n; i) {r…

Python毕业设计选题:基于django+vue的校园影院售票系统

开发语言&#xff1a;Python框架&#xff1a;djangoPython版本&#xff1a;python3.7.7数据库&#xff1a;mysql 5.7数据库工具&#xff1a;Navicat11开发软件&#xff1a;PyCharm 系统展示 管理员登录 管理员功能界面 用户管理 影院信息管理 电影类型管理 电影信息管理 系统…

[USACO1.5] 回文质数 Prime Palindromes

题目传送门 P1217 [USACO1.5] 回文质数 Prime Palindromes 题目描述 因为 151 151 151 既是一个质数又是一个回文数&#xff08;从左到右和从右到左是看一样的&#xff09;&#xff0c;所以 151 151 151 是回文质数。 写一个程序来找出范围 [ a , b ] ( 5 ≤ a < b ≤…

初窥 HTTP 缓存

引言 对于前端来说, 你肯定听说过 HTTP 缓存。 当然不管你知不知道它, 对于提高网站性能和用户体验, 它都扮演着重要的角色! 它通过在客户端和服务器之间存储和重用先前获取的资源副本, 来减少网络流量和降低资源加载时间, 从而提升用户体验! 以下是 HTTP 缓存的重要性: 减少…

Django 视图层

from django.shortcuts import render, HttpResponse, redirectfrom django.http import JsonResponse1. render: 渲染模板 def index(request):print(reverse(index))return render(request, "index.html")return render(request, index.html, context{name: lisi})…

简单介绍下 VitePress 中的 vp-doc 和 vp-raw

VitePress 是一个轻量级的静态网站生成器&#xff0c;专为快速构建文档网站而设计。它是基于 Vite 和 Vue 3 构建的&#xff0c;旨在提供快速的开发体验和高效的构建过程。 存在两个需要注意的点&#xff1a;vp-doc 和 vp-raw&#xff0c;它们代表了不同的 CSS 样式类和用途&a…

【数据结构】LinkedList与链表

LinkedList与链表 1. ArrayList的缺陷2. 链表2.1 链表的概念及结构2.2 链表的实现 3.链表面试题 【本节目标】 ArrayList的缺陷链表链表相关ojLinkedList的模拟实现LinkedList的使用ArrayList和LinkedList的区别 1. ArrayList的缺陷 上节课已经熟悉了ArrayList的使用&#xf…

Matrix Multiplication

lab要求如下&#xff1a;

Laravel8.5+微信小程序实现京东商城秒杀方案

一、商品秒杀涉及的知识点 鉴权策略封装掊口访问频次限制小程序设计页面防抖接口调用订单创建事务使用超卖防御 二、订单库存系统方案&#xff08;3种&#xff09; 下单减库存 优点是库存和订单的强一致性&#xff0c;商品不会卖超&#xff0c;但是可能导致恶意下单&#xff…

esp8266 编译、烧录环境搭建

一、准备 xtensa-lx106-elf-gcc8-4-0-esp-2020r3-win32下载&#xff1a;点击跳转 MSYS2 压缩包文件&#xff1a; 固件烧录工具&#xff1a;点击跳转 esp8266源码地址&#xff1a;点击跳转 二、搭建编译环境 1、在D盘创建一个ESP8266目录&#xff0c;解压MSYS2.zip到里面&a…

WEB攻防-通用漏洞CSRFSSRF协议玩法内网探针漏洞利用

CSRF构造工具&#xff0c;也可以用bp构造 选中要保存的请求&#xff0c;点击Generate HTML,生成带有添加用户请求的html文件&#xff0c;然后将构造的html放在网站上&#xff0c;生成访问地址&#xff0c;诱导管理员点击链接&#xff0c;就会添加用户 start Recording之后就会…

2-7 C函数指针与回调函数

前言&#xff1a; 对函数指针与回调函数知识回顾&#xff0c;仅供学习参考... 目录 前言&#xff1a; 1.0 函数指针 2.0 函数指针变量 3.0 函数指针与指针函数 4.0 函数指针类型 5.0 卡点 后记&#xff1a; 1.0 函数指针 函数指针&#xff0c;简单来说就是指向函数的指针…

代码设计:设计模式:应对变化

文章目录 概述1.拆分代码2.解耦3.扩展总结概述 代码的设计模式主要为了应对变化 三种代码设计中应对变化的方式 1.拆分代码 2.解耦 3.扩展 1.拆分代码 减小变化对代码的影响 需要拆分代码的几种情况 1.类或方法的代码量巨大,导致代码可读性降低 2.存在复杂的代码,如…

分布式FastDFS存储的同步方式

目录 一&#xff1a;FatsDFS的结构图 二&#xff1a;FatsDFS文件同步 前言&#xff1a; 1&#xff1a;同步日志所在目录 2&#xff1a;binlog格式 3&#xff1a;同步规则 4&#xff1a;binlog同步过程 1 &#xff1a;获取组内的其他Storage信息 tracker_report_thread_e…