React 入门学习

React 入门

  • 一、基本认识
    • 1.1、前言
    • 1.2、什么是
    • 1.3、编译<br>
    • 1.4、特点
    • 1.5、高效
  • 二、React环境和基本使用
    • 2.1、环境搭建
    • 2.2、脚手架项目基本使用
      • 2.2.1、src
      • 2.2.2、public
      • 2.2.3、package.json
  • 三、JSX的理解和使用
  • 四、模块与模块化, 组件与组件化的理解
    • 4.1、模块与组件
    • 4.2、模块化与组件化
  • 参考地址

一、基本认识

1.1、前言

React 使用称为 JSX（JavaScript 和 XML）的 HTML-in-JavaScript 语法。
熟悉 HTML 和 JavaScript 可以帮助您学习 JSX，并更好地确定应用程序中的错误是与 JavaScript 还是与 React 的更特定领域相关.

1.2、什么是

React 是一个用于构建用户界面的库。

React 不是一个框架 —— 它的应用甚至不局限于 Web 开发，它可以与其他库一起使用以渲染到特定环境。 例如，React Native 可用于构建移动应用程序；React 360 可用于构建虚拟现实应用程序…… 为了构建 Web 应用，开发人员将 React 与 ReactDOM 结合使用。 React 和 ReactDOM 通常被与其他真正的 Web 开发框架相提并论，并用于解决相同的问题。当我们将 React 称为“框架”时，就是在进行口语化的理解。

1.3、编译

浏览器是无法读取直接解析 JSX 的。我们的表达式经过（ Babel 或 Parcel 之类的工具）编译

1.4、特点

  • JSX
  • Declarative Programming（声明式编程）
  • Funational Programming（函数式编程）
    • 不是单纯的声明式还是函数式编程，都有借鉴
  • Component-Based (组件化编码)
  • Learn Once, Write Anywhere(支持客户端与服务器渲染)
  • Virtual DOM（虚拟DOM）
  • 单向数据流（Flux）
  • React Native
  • TypeScript

1.5、高效

虚拟(virtual)DOM, 不总是直接操作DOM(批量更新, 减少更新的次数) 高效的DOM Diff算法, 最小化页面重绘(减小页面更新的区域)

二、React环境和基本使用

2.1、环境搭建

关注此链接的 2.5 章节

2.2、脚手架项目基本使用

2.2.1、src

源码存放的目录

2.2.1.1、App.js

  • import
  • App 组件
  • Export 语句 
//允许在此脚本中使用其他文件中的代码
import logo from './logo.svg';
import './App.css';//方法返回一个 JSX 表达式，这个表达式定义了浏览器最终要渲染的 DOM。
function App() {return (<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo" /><p>Edit <code>src/App.js</code> and save to reload.</p><aclassName="App-link"href="https://reactjs.org"target="_blank"rel="noopener noreferrer">Learn React</a></header></div>);
}//export default App 语句使得 App 组件能被其他模块使用
export default App;

2.2.1.2、index.js 

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
//App 组件被用到的地方
import App from './App';
import reportWebVitals from './reportWebVitals';
//我们想要渲染的组件，在这个例子中是 <App /> .
// 我们想要渲染组件所在的 DOM 元素，在这个例子中是带着 root 标签的元素。让我们看一下 public/index.html 的代码，可以看到这有一个 <div> 元素 在 <body> 里。
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><App /></React.StrictMode>
);// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

index.css
定义了运用于整个 app 的 global style

2.2.2、public

包含了开发应用时浏览器会读取的文件

  • src代码会嵌入此文件(index.html)

2.2.3、package.json

为了建立该应用程序所管理着的文件信息

三、JSX的理解和使用

JSX（JavaScript XML）是一种在React中编写用户界面的语法扩展，它允许你在JavaScript代码中直接书写类似HTML的结构。

下面是一些JSX的基本语法规则：

  1. 元素定义：JSX元素以类似HTML标签的方式定义，通常以大写字母开头。

    const element = <h1>Hello, JSX!</h1>;

  2. 嵌套元素：JSX元素可以嵌套，就像在HTML中一样。

    const element = (<div><h1>Hello</h1><p>JSX is awesome!</p></div>
);

  3. JavaScript 表达式：你可以在JSX中使用花括号 {} 来包含任意的JavaScript表达式。

    const name = "Alice";
const element = <h1>Hello, {name}!</h1>;

  4. 属性：你可以给JSX元素添加属性，就像在HTML中一样。

    const element = <img src="image.jpg" alt="An image" />;

  5. class 和 style：由于class是JavaScript的保留关键字，因此在JSX中使用CSS类名需要使用className。

    const element = <div className="my-class">Styled div</div>;

    同样地，style属性应该是一个对象，其中的属性名需要使用驼峰命名法。

    const styles = {backgroundColor: "blue",color: "white"
};const element = <div style={styles}>Styled div</div>;

    如果styles直接赋值给style，写成：

    const element = <div style={{backgroundColor: "blue",color: "white"}}>Styled div</div>;

  6. 自闭合标签：与HTML一样，JSX中的标签也可以是自闭合的。

    const element = <input type="text" />;

  7. 注释：JSX中的注释需要用花括号包裹起来。

    const element = (<div>{/* This is a comment */}<p>JSX with comments</p></div>
);

在React应用程序中，JSX被Babel等工具转换成普通的JavaScript代码，以便浏览器可以理解和渲染。

四、模块与模块化, 组件与组件化的理解

4.1、模块与组件

  • 模块:
    理解: 向外提供特定功能的js程序, 一般就是一个js文件
    为什么: js代码更多更复杂
    作用: 复用js, 简化js的编写, 提高js运行效率
  • 组件:
    理解: 用来实现特定功能效果的代码集合(html/css/js)
    为什么: 一个界面的功能太复杂了
    作用: 复用编码, 简化项目界面编码, 提高运行效率

定义组件: 

 // MyComponent.jsimport React, { Component } from 'react';class MyComponent extends Component {// 组件的定义}export default MyComponent;

引用他: 

	// 另一个文件中import MyComponent from './MyComponent';// 使用导入的组件

4.2、模块化与组件化

  • 模块化:
    当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
  • 组件化:
    当应用是以多组件的方式实现功能, 这上应用就是一个组件化的应用

参考地址

MDN

https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started

BILIBILI 尚硅谷

https://www.bilibili.com/video/BV1wy4y1D7JT/?p=26&spm_id_from=333.1007.top_right_bar_window_history.content.click

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

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

相关文章

nginx基础

nginx基础

nginx 具体就是一个轻量级以及高性能的web服务软件。 nginx特点 1、稳定性高。&#xff08;但不如apache&#xff09; 2、系统资源消耗比较低。&#xff08;处理http请求的并发能力较高&#xff0c;单台处理器可以处理3w-5w的并发请求&#xff09; 注&#xff1a;一般在企…
阅读更多...
请解释一下JavaScript中的基本数据类型和引用数据类型，以及它们在内存中的存储方式。

请解释一下JavaScript中的基本数据类型和引用数据类型，以及它们在内存中的存储方式。

1、请解释一下JavaScript中的基本数据类型和引用数据类型&#xff0c;以及它们在内存中的存储方式。 JavaScript中有两种类型的数据&#xff1a;基本数据类型&#xff08;也称为原始数据类型&#xff09;和引用数据类型。 基本数据类型包括&#xff1a; Number&#xff08;数…
阅读更多...
用PointNet分类3D点云

用PointNet分类3D点云

在本教程中&#xff0c;我们将学习如何训练PointNet进行分类。 我们将主要关注数据和训练过程&#xff1b; 展示如何从头开始编码 Point Net 的教程位于此处。 本教程的代码位于这个Github库中&#xff0c;我们将使用的笔记本位于这个Github库中。 一些代码的灵感来自于这个Git…
阅读更多...
Java仓库管理系统设计与实现

Java仓库管理系统设计与实现

仓库管理系统 JAVA/数据库 课程设计 仓库管理系统 使用 MySQL和Idea 功能需求 1、问题描述 设计一个仓储管理系统&#xff0c;对仓库货品进行管理&#xff0c;出入库进行记录。 主要功能包括&#xff0c;货品添加修改&#xff0c;出库、入库、库存查询等功能&#xff0c;现…
阅读更多...
【密码学】六、公钥密码

【密码学】六、公钥密码

公钥密码 1、概述1.1设计要求1.2单向函数和单向陷门函数 2、RSA公钥密码体制2.1加解密2.2安全性分析 3、ElGamal公钥密码体制3.1加解密算法3.2安全性分析 4、椭圆曲线4.1椭圆曲线上的运算4.2ECC 5、SM2公钥密码体制5.1参数选取5.2密钥派生函数5.3加解密过程5.3.1初始化5.3.2加密…
阅读更多...
安装linux操作系统

安装linux操作系统

安装虚拟机的步骤&#xff1a; 安装linux系统 之后开启虚拟机 之后重启&#xff0c;打开虚拟机&#xff0c;登录root账号
阅读更多...
探索泛型与数据结构：解锁高效编程之道

探索泛型与数据结构：解锁高效编程之道

文章目录 引言第一部分&#xff1a;了解泛型1.1 为什么使用泛型1.2 使用泛型的好处 第二部分&#xff1a;泛型的使用场景2.1 类的泛型2.2 方法的泛型2.3 接口的泛型 第三部分&#xff1a;泛型通配符3.1 通配符3.2 通配符的受限泛型 第四部分&#xff1a;数据结构和泛型的应用4.…
阅读更多...
微信小程序开发摇一摇功能_javascript技巧

微信小程序开发摇一摇功能_javascript技巧

方法定义&#xff1a; let shakeInfo {openFlag: false,// 是否开启摇一摇&#xff0c;*****注意&#xff1a;如果是小程序全局监听摇一摇&#xff0c;这里默认为trueshakeSpeed: 110,//设置阈值,越小越灵敏shakeStep: 2000,//摇一摇成功后间隔lastTime: 0,//此变量用来记录…
阅读更多...
cmake 如何添加依赖库

cmake 如何添加依赖库

1 说明 cmake 经常需要添加依赖库&#xff0c;但是不知如何确定依赖的库名称&#xff0c;如何编写 2 环境 ubuntu 机器 3 依赖方法 以 dbus 为例 3.1、确定库的名字 通过dpkg 命令搜索库名&#xff0c;如下所示&#xff0c;确定libdbus-1-dev 为自己需要的版本 usereba…
阅读更多...
MySQL 事务

MySQL 事务

目录 一、事务的概念 二、事务的ACID特点 1&#xff09;事务的原子性 2&#xff09;事务的一致性 3&#xff09;事务的隔离性 &#xff08;1&#xff09;脏读 &#xff08;2&#xff09;不可重复读 &#xff08;3&#xff09;幻读 &#xff08;4&#xff09; 丢失更…
阅读更多...
测试开发之前端篇-Web前端简介

测试开发之前端篇-Web前端简介

自从九十年代初&#xff0c;人类创造出网页和浏览器后&#xff0c;Web取得了长足的发展&#xff0c;如今越来越多的企业级应用也选择使用Web技术来构建。 前面给大家介绍网络协议时讲到&#xff0c;您在阅读这篇文章时&#xff0c;浏览器是通过HTTP/HTTPS协议向服务器发送请求…
阅读更多...
MyBatisPlus

MyBatisPlus

一、MyBatis-Plus 1、简介 [MyBatis-Plus&#xff08;简称 MP&#xff09;是一个 MyBatis 的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生。 我们的愿景是成为 MyBatis 最好的搭档&#xff0c;就像魂斗罗中的 1P、2P&#…
阅读更多...
探索ES高可用：滴滴自研跨数据中心复制技术详解

探索ES高可用：滴滴自研跨数据中心复制技术详解

Elasticsearch 是一个基于Lucene构建的开源、分布式、RESTful接口的全文搜索引擎&#xff0c;其每个字段均可被索引&#xff0c;且能够横向扩展至数以百计的服务器存储以及处理TB级的数据&#xff0c;其可以在极短的时间内存储、搜索和分析大量的数据。 滴滴ES发展至今&#xf…
阅读更多...
Telink泰凌微TLSR8258蓝牙开发笔记（一）

Telink泰凌微TLSR8258蓝牙开发笔记（一）

一、开发环境搭建 1.1、软件开发环境&#xff1a; 1.1.1、开发的IDE&#xff1a; IDE下载链接 1.1.2、烧录工具 DBT下载地址 1.1.3、蓝牙SDK 蓝牙SDK下载地址 1.2、硬件开发环境 8258开发板烧录工具一套 二、运行例程&#xff0c;并使能打印调试信息功能 File-->Impo…
阅读更多...
c#学习记录-文件操作

c#学习记录-文件操作

文件操作/文件夹操作 文件夹会创建在\bin\Debug\net6.0 namespace _23_文件操作 {internal class Program{static void Main(string[] args){-------------------文件操作File--------------//复制方法1FileInfo myFile new FileInfo("E:\\VScodes\\第四季-高级编程\\2…
阅读更多...
状态模式（C++）

状态模式（C++）

定义 允许一个对象在其内部状态改变时改变它的行为。从而使对象看起来似乎修改了其行为。 应用场景 在软件构建过程中&#xff0c;某些对象的状态如果改变&#xff0c;其行为也会随之&#xff0c;而发生变化&#xff0c;比如文档处于只读状态&#xff0c;其支持的行为和读写…
阅读更多...
xshell新建文件传输失败-使用sftp如何上传及下载数据

xshell新建文件传输失败-使用sftp如何上传及下载数据

问题描述 我在使用xshell时&#xff0c;点击操作栏中的新建文件传输&#xff0c;报错为&#xff1a;要继续使用此程序&#xff0c;您必须应用最新的更新或使用新版本&#xff0c;然后就给我跳到了sftp界面&#xff0c;界面上显示的是当前目录&#xff0c;我要下载数据到本地。 …
阅读更多...
C++中动态数组的使用

C++中动态数组的使用

C中动态数组的使用 假设要在应用程序中存储医院的病历&#xff0c;程序员将无法知道需要处理的病历数上限。就小医院而言&#xff0c;为稳妥起见&#xff0c;程序员可对上限做合理的假设。在这种情况下&#xff0c;程序员将预留大量的内存&#xff0c;进而降低系统的性能。 为…
阅读更多...
仅使用 CSS 创建打字机动画效果

仅使用 CSS 创建打字机动画效果

创建打字机效果比您想象的要容易。虽然实现这种效果的最常见方法是使用 JavaScript&#xff0c;但我们也可以使用纯 CSS 来创建我们的打字机动画。 在本文中&#xff0c;我们将了解如何仅使用 CSS 创建打字机动画效果。它简单、漂亮、容易。我们还将看看使用 CSS 与 JavaScrip…
阅读更多...
全球互联网步入IPv6时代，IPv4逐渐告别历史舞台

全球互联网步入IPv6时代，IPv4逐渐告别历史舞台

随着互联网技术的飞速发展&#xff0c;全球互联网正迎来IPv6与IPv4并存转型阶段。IPv6, 新一代互联网协议&#xff0c;以其更大的地址空间和更高的效率正逐渐取代IPv4成为互联网的主导。 全球互联网开始全面实施IPv6这意味着IPv4时代正在逐渐走向尾声。IPv4与IPv6为互联网协议版…
阅读更多...
最新文章

Copyright @ 2022~2023