React 的入门介绍

React 是什么

React是一个用于构建用户界面的JavaScript库。它由Facebook开发,并于2013年首次发布。React将用户界面拆分为小的可重用组件,每个组件都有自己的状态,并根据状态的变化来更新界面。

React使用了虚拟DOM(Virtual DOM)来优化界面更新的性能。虚拟DOM是一个轻量级的JavaScript对象,它是React元素的表示形式。当应用的状态发生变化时,React会创建一个新的虚拟DOM树,并与之前的虚拟DOM树进行比较,找出发生变化的部分,然后只更新这些部分的真实DOM,从而避免了不必要的DOM操作,提高了性能。

React采用了单向数据流的数据流模型。它将应用的状态保存在组件的state中,并通过props将状态传递给子组件。当状态发生变化时,React会自动更新组件的视图。

React还提供了一些生命周期方法,用于在组件不同阶段执行特定的代码。例如,componentDidMount方法会在组件渲染后被调用,可以用于执行一些初始化操作。

除了核心的React库,还有一些用于与React集成的附加库,例如React Router用于处理应用的路由,Redux用于管理应用的状态等。

总之,React是一个灵活、高效、可组合的用户界面构建库,它简化了复杂的UI开发,并提供了高性能的界面更新机制。它已经成为最流行的前端框架之一,被广泛应用于各种Web应用和移动应用的开发中。

版本历史

  • 1.0版本发布于2013年5月,是React的首个稳定版本。

  • 0.14版本发布于2015年10月,引入了许多重要的改进,包括新的钩子函数API、PureComponent以及无状态函数组件。

  • 15.0版本发布于2016年4月,引入了Fiber架构的初步实现,这是React内部的一种新的协调机制,旨在优化渲染过程。

  • 16.0版本发布于2017年9月,其中最重要的特性是对Fiber架构的完全实现。此外,16.0版本还引入了错误边界(Error Boundaries)的概念,用于处理组件中的错误。

  • 16.8版本发布于2019年2月,引入了Hooks,这是React的一项重大改进,允许开发者在无需编写类组件的情况下使用状态和其他React特性。

  • 17.0版本发布于2020年10月,是一个重大版本更新,主要目标是提供一种平滑迁移的路径,使得React的未来版本更易于升级。

快速示例

  1. 确保安装了 Node.js 和 npm
  2. 全局安装创建react程序的命令工具
npm install -g create-react-app
  1. 在命令行创建 React 类型的应用程序
npx create-react-app my-react

这个命令会创建一个名为my-react的新文件夹,并在其中安装所有的React依赖项。
目录结构如下:
在这里插入图片描述

  1. 进入新创建的项目文件夹:
cd my-react
  1. 使用以下命令启动开发服务器:
npm start

这将启动React应用程序并在浏览器中打开一个新的标签页。

在这里插入图片描述

  1. 编辑src/App.js文件。这个文件是React应用程序的主要入口点。

  2. src/App.js中可以编写React组件。以下是一个简单的示例:

import React from 'react';function App() {return (<div><h1>Hello, React!</h1></div>);
}export default App;
  1. 保存src/App.js文件并查看浏览器中的React应用程序。应该看到一个标题为"Hello, React!"的页面。
    在这里插入图片描述

问题解决之 npm ERR! network request to https://registry.npmjs.org/create-react-app failed, reason: connect ETIMEDOUT 104.16.0.35:443

在上面的示例中, 使用命令 npm install -g create-react-app 安装 create-react-app命令工具的时候会出现上述的错误。

多次运行上面命令有可能会解决问题,有时候网络问题会自行解决。 如果多次运行依然无法安装, 可以尝试如下方式:

首先这个错误通常是由于网络连接问题导致的。

  1. 检查网络连接:确保您的计算机可以正常连接到互联网,并且没有任何防火墙或代理限制。尝试使用浏览器访问 https://registry.npmjs.org/create-react-app,看看是否能够成功访问。

  2. 使用镜像源:可以尝试使用淘宝镜像或者其他 npm 镜像源来进行安装。可以通过运行以下命令来设置淘宝镜像源:

npm config set registry https://registry.npm.taobao.org/

或者设置回 npm 官方镜像源:

npm config set registry https://registry.npmjs.org/

React 相关的库和工具

以下是一些常用的React相关的库和工具:

  1. Redux:用于管理应用的状态和数据流的库。
  2. React Router:用于管理React应用的路由和导航的库。
  3. Axios:用于发送AJAX请求的库。
  4. Jest:用于编写单元测试的库。
  5. Enzyme:用于编写React组件测试的库。
  6. Babel:用于将JSX和ES6+语法转换为浏览器可以理解的语法的工具。
  7. Webpack:用于打包和构建React应用的工具。
  8. ESLint:用于静态代码分析和检查代码质量的工具。
  9. Prettier:用于格式化代码的工具,可以在保存文件时自动格式化代码。
  10. Create React App:用于快速搭建React应用的脚手架工具。

这只是一小部分React相关的库和工具,还有很多其他的库和工具可以用于增强React应用的开发体验和功能。

React 的应用

React 被许多大型的公司和组织使用,以下是一些使用React的公司和项目的示例:

  1. Facebook - React是由Facebook开发的,因此Facebook自身的网站和应用程序都使用React作为前端框架。

  2. Instagram - Instagram也是由Facebook拥有的应用程序,也使用React作为其前端框架。

  3. Airbnb - Airbnb是一个在线房屋租赁平台,他们的前端也是使用React来构建。

  4. Netflix - Netflix是一个流媒体平台,他们的前端界面也是使用React构建的。

  5. WhatsApp - WhatsApp是一个全球流行的即时通讯应用程序,他们也使用React作为其前端框架。

  6. Dropbox - Dropbox是一个在线文件存储和共享平台,他们使用React来构建其用户界面。

  7. Slack - Slack是一个团队协作工具,他们的前端也是使用React构建的。

  8. Microsoft - 微软的许多产品和服务,包括Office 365和Outlook.com,都使用React作为其前端框架之一。

  9. GitHub - GitHub是一个源代码托管平台,他们使用React来构建其用户界面。

  10. Shopify - Shopify是一个电子商务平台,他们的前端界面也是使用React构建的。

React 可以用于的应用包括:

  1. 单页应用(Single-page applications):React 可以用于构建单页应用,其中所有的页面交互都在一个页面中进行,通过动态加载数据和更新页面的内容来提供快速的用户体验。

  2. 移动应用:React Native 是一个基于 React 的框架,可以使用 JavaScript 来构建原生移动应用。通过使用 React Native,开发人员可以同时在 iOS 和 Android 平台上构建应用,减少了开发成本和维护的工作。

  3. 多页应用(Multi-page applications):React 也可以用于构建多页应用,其中每个页面都有自己的 React 组件,通过组件的嵌套和交互来构建复杂的页面。

  4. 桌面应用:通过使用 Electron,一个使用 Web 技术构建跨平台桌面应用的开源框架,React 可以用于构建桌面应用。这样一来,开发人员可以使用熟悉的前端技术栈来构建跨平台的桌面应用。

参考

  • 官方网站: https://react.dev/
  • 中文学习: https://react.docschina.org/learn


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

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

相关文章

RabbitMQ如何实现消费端限流

什么是消费端限流&#xff0c;这个一种保护消费者的手段&#xff0c;假如说&#xff0c;现在是业务高峰期了&#xff0c;消息有大量堆积&#xff0c;导致MQ消费需要不断的进行消息消费&#xff0c;很容易被打挂&#xff0c;甚至重启之后还是会被大量消息涌入&#xff0c;继续被…

Xilinx 7系列FPGA配置(ug470)

Xilinx 7系列FPGA配置&#xff08;ug470&#xff09; 配置模式串行配置模式接口从-连接方式主-连接方式串行菊花链&#xff08;非同时配置&#xff09;串行配置&#xff08;同时配置&#xff09;时序 主SPI配置模式SPIx1/x2 连接图SPIx1模式时序SPIx4 连接图SPI操作指令操作fla…

FC-AE-1553 协议

FC-AE-1553 协议 MIL-STD-1553B总线协议总线结构字格式消息传输方式 FC协议FC协议栈拓扑结构服务类型帧/序列/交换FC帧格式 FC-AE-1553网络构成帧类型命令帧状态帧数据帧 Information UnitsNC1NC2NC3-4NC5-7NT1-7 传输模式1. NC-NT2. NT-NC3. NT-NT4. 无数据字的模式命令5. 带数…

python并发编程之多进程、多线程、异步和协程详解

在Python中&#xff0c;有多种并发编程的方式可供选择&#xff0c;包括多进程、多线程、异步和协程。下面将对这些方式进行详细解释。 多进程&#xff1a;多进程是通过创建多个进程来实现并发的方式。每个进程都有自己独立的内存空间&#xff0c;可以并行执行任务。Python中的m…

detectron2 DiffusionDet 训练自己的数据集

配环境 git clone https://github.com/ShoufaChen/DiffusionDet# 创建环境 conda create -n diffusion python3.9 conda activate diffusion conda install pytorch1.11.0 torchvision0.12.0 torchaudio0.11.0 cudatoolkit11.3 -c pytorch pip install opencv-python# 安装det…

STM32CubeMX学习笔记12 ---低功耗模式

在实际使用中很多产品都需要考虑低功耗的问题&#xff0c;STM32F10X提供了三种低功耗模式&#xff1a;睡眠模式&#xff08;Sleep mode&#xff09;、停机模式&#xff08;Stop mode&#xff09;和待机模式&#xff08;Standby mode&#xff09;。这些低功耗模式可以有效减少系…

jnitrace的用法(查看jni的执行流程,方便unidbg补环境)

一、简单执行 jnitrace -l <要trace的so库> <包名> jnitrace -l libxxx.so com.xxx.app二、插入js脚本执行 jnitrace -p E:\kill_sll.js -l libxxx.so com.xxx.app三、attach模式执行 默认使用spawn执行&#xff0c;attach模式可能有有时bug没反应 jnitrace -l li…

Casper Network(CSPR)即将迎来两项重大升级,以实现功能上的进一步完善

Casper Network&#xff08;CSPR&#xff09;即将实现更加完备的功能升级&#xff0c;现已进入倒计时阶段。 Casper Network&#xff08;CSPR&#xff09;将升级到其最先进以及更全的版本&#xff0c;即“功能完备”的版本&#xff0c;让Casper Network&#xff08;CSPR&#…

腾讯云十大优惠活动曝光,TOP10值得买云服务器配置报价

腾讯云服务器多少钱一年&#xff1f;61元一年起&#xff0c;2核2G3M配置&#xff0c;腾讯云2核4G5M轻量应用服务器165元一年、756元3年&#xff0c;4核16G12M服务器32元1个月、312元一年&#xff0c;8核32G22M服务器115元1个月、345元3个月&#xff0c;腾讯云服务器网txyfwq.co…

Java实现读取转码写入ES构建检索PDF等文档全栈流程

背景 之前已简单使用ES及Kibana和在线转Base64工具实现了检索文档的demo&#xff0c;并已实现WebHook的搭建和触发流程接口。 传送门&#xff1a; 基于GitBucket的Hook构建ES检索PDF等文档全栈方案 使用ES检索PDF、word等文档快速开始 实现读取本地文件入库ES 总体思路&…

索引类型介绍

4、说说你知道的MySQL的索引类型&#xff0c;并分别简述一下各自的场景。 普通索引&#xff1a;没有任何限制条件的索引&#xff0c;该索引可以在任何数据类型中创建。 唯一索引&#xff1a;使用UNIQUE参数可以设置唯一索引。创建该索引时&#xff0c;索引列的值必须唯一&…

44、网络编程/数据库相关操作练习20240306

一、代码实现数据库的创建&#xff08;员工信息表&#xff09;&#xff0c;并存储员工信息&#xff08;工号、姓名、薪资&#xff09;&#xff0c;能实现增加人员信息、删除人员信息、修改人员薪资操作。 代码&#xff1a; #include<myhead.h>int do_update(sqlite3 *p…

基于canvas纯前端实现验证码的绘制

验证码功能是实现登录功能中比较常见的一个问题 验证码的整体思路是&#xff1a; 1.前端登录页面发起获取验证码图片请求. 2.服务端收到请求后,生成一个唯一id,对应的验证码图片 以及验证码图片对应的值(这个值使用缓存保存,id-值一一对应,缓存可使用redis或本地缓存,本地缓存…

Python中的模块包第三方库详解

模块&包 模块 一个.py文件就是一个模块&#xff0c;里面是一些函数和变量&#xff0c;需要的时候可以导入。 模块命名规范: 1.以英文开头&#xff0c;不出现中文 2.模块名不应与系统内置函数重名 包 包本身就是一个文件夹&#xff0c;如果文件夹内有__init__.py文件&…

Java电梯模拟升级版

Java电梯模拟升级版 文章目录 Java电梯模拟升级版前言一、UML类图二、代码三、测试 前言 在上一版的基础上进行升级&#xff0c;楼层采用享元模式进行升级&#xff0c;并对楼层对象进一步抽象 一、UML类图 二、代码 电梯调度器抽象类 package cn.xx.evevator;import java.ut…

K倍区间 刷题笔记

法一 前缀和暴力搜索 &#xff08;数据大会超时&#xff09; #include<iostream> #include<cstring> #include<algorithm> #include<cstdio> using namespace std; const int N100010; int a[N],s[N]; int n,k; int main(){ cin>>n>>…

实现一个作用域插槽的场景

vue项目中&#xff0c;插槽slot有三种分别是&#xff1a;默认插槽、具名插槽、作用域插槽。默认插槽和具名插槽在平时的开发中用的比较多&#xff0c;作用域插槽用的相对较少&#xff0c;以前我对作用域插槽不是很理解&#xff0c;现在理解了一下。下面通过代码来实现一个作用域…

QLabel的setPixmap和setPicture有什么不同,请详细讲解

QLabel类提供了一个方便的方式来显示文本和图像。在Qt中&#xff0c;QLabel的setPixmap()和setPicture()方法都可以用来在标签中显示图像&#xff0c;但它们之间存在一些关键的区别&#xff0c;主要体现在它们接受的参数类型和用途上。 setPixmap() 参数类型&#xff1a;setP…

Linux系统之部署复古游戏平台

Linux系统之部署复古游戏平台 前言一、项目介绍1.1 项目简介1.2 项目特点1.3 游戏平台介绍二、本次实践介绍二、本地环境介绍2.1 本地环境规划2.2 本次实践介绍三、本地环境检查3.1 安装Docker环境3.2 检查Docker服务状态3.3 检查Docker版本3.4 检查docker compose 版本四、构建…

RISC-V架构学习资料整理

1、韦东山——D1S哪吒开发板的裸机代码仓库 https://github.com/bigmagic123/d1-nezha-baremeta 2、melis系统移植到D1S https://blog.51cto.com/u_13800193/6268813 3、韦东山的gitee仓库 https://gitee.com/weidongshan 4、D1S编译工具链下载 https://github.com/Tina-Linux/…