React.js快速入门教程

介绍

React.js是一个由Facebook开发的用于构建用户界面的JavaScript库。它主要用于构建单页面应用程序(SPA),可以轻松地创建交互性强、快速响应的用户界面。

React.js的特点

1.声明式设计 −React采用声明范式,可以轻松描述应用。

2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。

3.灵活 −React可以与已知的库或框架很好地配合。

4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。

5.组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。

6.单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。

1. 理解React.js的基本概念

React.js的核心概念包括组件(Components)、状态(State)、属性(Props)和生命周期方法。在React中,一切都是组件,你可以将UI拆分成多个独立、可复用的组件,通过组合这些组件来构建整个应用。

  • 组件(Components): React应用由许多组件组成。一个组件是一个独立的、可复用的构建块,它可以包含HTML、CSS和JavaScript代码。

  • 状态(State): 组件的状态是一个包含了组件数据的对象。状态决定了组件的外观和行为,可以通过setState方法进行更新。

  • 属性(Props): 属性是从父组件传递给子组件的数据。通过属性,你可以在不同的组件之间传递信息。

  • 生命周期方法: React组件有一系列的生命周期方法,例如componentDidMountcomponentDidUpdatecomponentWillUnmount等。这些方法可以让你在组件的不同阶段执行特定的代码。

2. 设置React.js开发环境

在开始使用React.js之前,我们需要设置一个React开发环境。最简单的方法是使用Create React App工具,它可以帮我们快速搭建一个React项目。create-react-app 是来自于 Facebook,create-react-app 自动创建的项目是基于 Webpack + ES6 。

npx create-react-app my-react-app
cd my-react-app
npm start

上述命令会创建一个名为my-react-app的React应用,并启动开发服务器。现在,可以在浏览器中访问http://localhost:3000查看你的React应用。

项目目录介绍

以下是这个项目目录结构的主要部分:

1. **node_modules:** 存放项目依赖的Node.js模块,这个目录由npm自动生成,无需手动管理。2. **public** 公共文件夹,包含了不需要经过webpack处理的静态文件,如HTML文件、图标和其他公共资源。其中,`public/index.html` 是应用的入口HTML文件。3. **src:** 存放源代码的文件夹。React组件、样式文件和其他JavaScript文件通常都存放在这里。- **src/index.js:** 应用的入口文件,负责将React应用渲染到HTML页面的根元素上。- **src/App.js:** 一个默认的React组件文件,作为主要的应用组件。你可以在这里进行修改,或者创建其他组件并在这里引入。- **src/App.css:** 默认的CSS文件,包含应用的基本样式。4. **public/index.html:** 应用的主HTML文件,React应用会被注入到这个HTML文件中的根元素中。5. **package.json:** 包含了应用的配置信息、依赖关系和一些脚本命令等。6. **package-lock.json:** 锁定安装时的包的版本,以确保在不同的开发环境中安装相同的依赖版本。7. **README.md:** 项目的说明文档,包含有关项目的基本信息和使用说明。8. **.gitignore:** 配置Git版本控制系统忽略的文件和文件夹。9. **public/favicon.ico:** 用于网站图标的图标文件。10. **src/serviceWorker.js:** 默认的Service Worker文件,用于实现离线缓存等功能。11. **src/setupTests.js:** 配置用于测试的文件。12. **.env:** 包含环境变量的配置文件,用于在不同环境中设置不同的变量。

3. 创建一个React组件

这里都是以函数组件为例,class组件先不介绍。
在React中,你可以通过创建函数组件或类组件来定义组件。以下是一个简单的函数组件的例子:

import React from 'react';function MyComponent() {return (<div><h1>Hello, React!</h1><p>This is my first React component.</p></div>);
}export default MyComponent;

在上述代码中,我们定义了一个名为MyComponent的函数组件,它返回一段包含标题和段落的JSX(JavaScript XML)代码。可以把项目中app.tsx组件内容替换一下就能可以看到效果了。

4. 使用状态和属性

让我们扩展我们的组件,引入状态和属性的概念:

import React, { useState } from 'react';function GreetUser(props) {return <p>Hello, {props.name}!</p>;
}function MyComponent() {const [count, setCount] = useState(0);return (<div><h1>Hello, React!</h1><p>This is my first React component.</p><button onClick={() => setCount(count + 1)}>Click me ({count} clicks)</button><GreetUser name="John" /></div>);
}export default MyComponent;

接着我们引入了useState钩子来创建一个名为count的状态,并在按钮的点击事件中更新它。同时,我们创建了一个名为GreetUser的子组件,并通过属性(name)传递数据。

5. 生命周期方法的使用

React组件有一些生命周期方法,通过这些生命周期方法可以在组件的不同阶段执行代码。例如,componentDidMount会在组件挂载后立即调用。

import React, { useState, useEffect } from 'react';function MyComponent() {const [data, setData] = useState([]);useEffect(() => {// 在组件挂载后获取数据fetchData();}, []); // 第二个参数是依赖项数组,为空表示仅在挂载时执行一次const fetchData = async () => {// 模拟异步数据获取const response = await fetch('https://api.example.com/data');const result = await response.json();setData(result);};return (<div><h1>Hello, React!</h1><p>This is my first React component.</p><ul>{data.map((item) => (<li key={item.id}>{item.name}</li>))}</ul></div>);
}export default MyComponent;

在上述代码中,我们使用了useEffect钩子来模拟在组件挂载后获取异步数据。一旦数据获取完成,就会更新组件的状态并渲染列表。

React快速上手教程就介绍到这里了,想学习更多可以去官网最新文档
也可以查看旧版文档

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

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

相关文章

java黑马学习笔记

数组 变量存在栈中&#xff0c;变量值存放在堆中。 数组反转 public class test{public static void main(String[] args){//目标&#xff1a;完成数组反转int[] arr {10,20,30,40,50};for (int i 0,j arr.length - 1;i < j;i,j--){int tep arr[j]; //后一个值赋给临时…

20240119-子数组最小值之和

题目要求 给定一个整数数组 arr&#xff0c;求 min(b) 的总和&#xff0c;其中 b 的范围涵盖 arr 的每个&#xff08;连续&#xff09;子数组。由于答案可能很大&#xff0c;因此返回答案模数 Example 1: Input: arr [3,1,2,4] Output: 17 Explanation: Subarrays are [3]…

Vision Transformer(VIT)模型介绍

计算机视觉 文章目录 计算机视觉Vision Transformer&#xff08;VIT&#xff09;Patch EmbeddingsHybrid ArchitectureFine-tuning and higher resolutionPyTorch实现Vision Transformer Vision Transformer&#xff08;VIT&#xff09; Vision Transformer&#xff08;ViT&am…

User表设计

>: cd luffyapi & cd apps2.创建app >: python ../../manage.py startapp user创建User表对应的model&#xff1a;user/models.py from django.db import models from django.contrib.auth.models import AbstractUser class User(AbstractUser):mobile models.Cha…

PACS医学影像采集传输与存储管理、影像诊断查询与报告管理系统,MPR多平面重建

按照国际标准IHE规范&#xff0c;以高性能服务器、网络及存储设备构成硬件支持平台&#xff0c;以大型关系型数据库作为数据和图像的存储管理工具&#xff0c;以医疗影像的采集、传输、存储和诊断为核心&#xff0c;集影像采集传输与存储管理、影像诊断查询与报告管理、综合信息…

使用helm部署 redis 单机版

1、配置helm redis repo helm repo add bitnami https://charts.bitnami.com/bitnami 2 安装下载helm redis 下面是默认安装&#xff0c;不过前往别直接拿着下面安装命令就安装&#xff0c;官方默认安装的默认参数配置往往和我们实际场景不一样&#xff0c;需要配置一些参数…

4D毫米波雷达——FFT-RadNet 目标检测与可行驶区域分割 CVPR2022

前言 本文介绍使用4D毫米波雷达&#xff0c;实现目标检测与可行驶区域分割&#xff0c;它是来自CVPR2022的。 会讲解论文整体思路、输入数据分析、模型框架、设计理念、损失函数等&#xff0c;还有结合代码进行分析。 论文地址&#xff1a;Raw High-Definition Radar for Mu…

韵达快递单号查询入口,对需要的快递单号记录进行颜色标记

选择一款好的工具&#xff0c;往往能事半功倍&#xff0c;【快递批量查询高手】正是你物流管理的得力助手。它不仅可以助你批量查询快递单号的物流信息&#xff0c;还能帮你对需要的快递单号记录进行标记&#xff0c;让你享受高效便捷的物流管理体验。 所需工具&#xff1a; …

​LeetCode解法汇总2182. 构造限制重复的字符串

目录链接&#xff1a; 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目&#xff1a; https://github.com/September26/java-algorithms 原题链接&#xff1a; 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 描述&#xff1a; 给你一个…

CompletableFuture应用源码分析

CompletableFuture应用&源码分析 2.1 CompletableFuture介绍 平时多线程开发一般就是使用Runnable,Callable,Thread,FutureTask,ThreadPoolExecutor这些内容和并发编程息息相关。相对来对来说成本都不高,多多使用是可以熟悉这些内容。这些内容组合在一起去解决一些并…

设计模式之迪米特法则:让你的代码更简洁、更易于维护

在软件开发中&#xff0c;设计模式是解决常见问题的最佳实践。其中&#xff0c;迪米特法则是一种非常重要的设计原则&#xff0c;它强调了降低对象之间的耦合度&#xff0c;提高代码的可维护性和可重用性。本文将介绍迪米特法则的概念、重要性以及在实际项目中的应用。 一、迪…

【微服务】springcloud集成sleuth与zipkin实现链路追踪

目录 一、前言 二、分布式链路调用问题 三、链路追踪中的几个概念 3.1 什么是链路追踪 3.2 常用的链路追踪技术 3.3 链路追踪的几个术语 3.3.1 span ​编辑 3.3.2 trace 3.3.3 Annotation 四、sluth与zipkin概述 4.1 sluth介绍 4.1.1 sluth是什么 4.1.2 sluth核心…

使用Ultimate-SD-Upscale进行图片高清放大

之前我们介绍过StableSR进行图片高清放大&#xff0c;如果调的参数过大&#xff0c;就会出现内存不足的情况&#xff0c;今天我们介绍另外一个进行图片高清放大的神器Ultimate-SD-Upscale&#xff0c;他可以使用较小的内存对图像进行高清放大。下面我们来看看如何使用进行操作。…

总线协议:GPIO模拟SMI(MDIO)协议:SMI协议介绍

0 工具准备 TN1305 Technical note IEEE802.3-2018 STM32F4xx中文参考手册 1 SMI介绍 1.1 SMI总体框图 站管理接口SMI&#xff08;Serial Management Interface&#xff09;&#xff0c;也可以称为MDIO接口&#xff08;Management Data Input/Output Interface&#xff09;。…

C语言——内存函数介绍和模拟实现

之前我们讲过一些字符串函数&#xff08;http://t.csdnimg.cn/ZcvCo&#xff09;&#xff0c;今天我们来讲一讲几个内存函数&#xff0c;那么可能有人要问了&#xff0c;都有字符串函数了&#xff0c;怎么又来个内存函数&#xff0c;这不是一样的么&#xff1f; 我们要知道之前…

Android问题记录

一 Android编程怎样用ICC校准颜色&#xff1f; 在Android编程中&#xff0c;ICC颜色校准通常是通过使用Color Management API进行的。以下是使用ICC校准颜色的步骤&#xff1a; 首先&#xff0c;确保你的设备支持色彩管理。你可以通过调用ColorManagement.isColorManagementSu…

华为原生 HarmonyOS NEXT 鸿蒙操作系统星河版 发布!不依赖 Linux 内核

华为原生 HarmonyOS NEXT 鸿蒙操作系统星河版 发布&#xff01;不依赖 Linux 内核 发布会上&#xff0c;余承东宣布&#xff0c;HarmonyOS NEXT鸿蒙星河版面向开发者开放申请。 申请链接 鸿蒙星河版将实现原生精致、原生易用、原生流畅、原生安全、原生智能、原生互联6大极致原…

MATLAB Fundamentals>>>Fill Missing Values

MATLAB Fundamentals>Preprocessing Data>Interpolating Missing Data> (1/4) Fill Missing Values This code sets up the activity. x [0 NaN 7 8 NaN 2 -3 NaN -8] plot(x,"s-","LineWidth",1.5) 任务1&#xff1a; Create a vector y th…

04 思维导图的方式回顾ospf

思维导图的方式回顾OSPF 1 ospf 领行学习思维导图 1.1 ospf 的工作过程 建立领据表同步数据库计算路由表1.2 ospf 的状态 1.3 ospf的报文 1.4 ospf的L

Arduino开发实例-LJ12A3-4-Z/BX 电感式接近传感器驱动

LJ12A3-4-Z/BX 电感式接近传感器驱动 文章目录 LJ12A3-4-Z/BX 电感式接近传感器驱动1、LJ12A3-4-Z/BX 电感式接近传感器介绍2、硬件准备及接线3、代码实现1、LJ12A3-4-Z/BX 电感式接近传感器介绍 接近传感器用于检测附近物体的存在。 LJ12A3-4-Z / BX 传感器有三个引脚,其中两…