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.rhkb.cn/news/82227.html

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

相关文章

【Matplotlib】一文搞定Matplotlib绘图配置（大三学长的万字笔记）

【Matplotlib】一文搞定Matplotlib绘图配置（大三学长的万字笔记）

文章目录 一、Matplotlib介绍1 - 介绍2 - 安装 二、基本配置1 - 中文配置2 - 查看字体库3 - 基本绘图4 - 线样式和颜色 三、画布配置1 - 基本配置2 - 多图绘制 | 同一画布&#xff08;重叠&#xff09;3 - 多图绘制 | 多个画布4 - 多图绘制 | 同一画布&#xff08;子图&#xf…
阅读更多...
海外媒体发稿：软文写作方法方式？一篇好的软文理应合理规划？

海外媒体发稿：软文写作方法方式？一篇好的软文理应合理规划？

不同种类的软文会有不同的方式&#xff0c;下面小编就来来给大家分析一下&#xff1a; 方法一、要选定文章的突破点&#xff1a; 所说突破点就是这篇文章文章软文理应以什么样的视角、什么样的见解、什么样的语言设计理念、如何文章文章的标题来写。不同种类的传播效果&#…
阅读更多...
【Leetcode】对称二叉树||递归（击败100%）

【Leetcode】对称二叉树||递归（击败100%）

step by step. 题目&#xff1a; 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 1&#xff1a; 输入&#xff1a;root [4,2,7,1,3,6,9] 输出&#xff1a;[4,7,2,9,6,3,1]示例 2&#xff1a; 输入&#xff1a;root [2,1,3] 输出…
阅读更多...
使用node.js 搭建一个简单的HelloWorld Web项目

使用node.js 搭建一个简单的HelloWorld Web项目

文档结构 config.ini #将本文件放置于natapp同级目录 程序将读取 [default] 段 #在命令行参数模式如 natapp -authtokenxxx 等相同参数将会覆盖掉此配置 #命令行参数 -config 可以指定任意config.ini文件 [default] authtokencc83c08d73357802 #对应一条隧…
阅读更多...
Android 性能调优之bitmap的优化

Android 性能调优之bitmap的优化

背景 Android开发中&#xff0c;加载图片过多、过大很容易引起OutOfMemoryError异常&#xff0c;即我们常见的内存溢出。因为Android对单个应用施加内存限制&#xff0c;默认分配的内存只有几M&#xff08;具体视不同系统而定&#xff09;。而载入的图片如果是JPG之类的压缩格…
阅读更多...
Python爬虫在电商数据挖掘中的应用

Python爬虫在电商数据挖掘中的应用

作为一名长期扎根在爬虫行业的专业的技术员&#xff0c;我今天要和大家分享一些有关Python爬虫在电商数据挖掘中的应用与案例分析。在如今数字化的时代&#xff0c;电商数据蕴含着丰富的信息&#xff0c;通过使用爬虫技术&#xff0c;我们可以轻松获取电商网站上的产品信息、用…
阅读更多...
【数学】协方差介绍、相关系数介绍，Python代码

【数学】协方差介绍、相关系数介绍，Python代码

协方差 协方差&#xff08;Covariance&#xff09;是统计学中用来衡量两个随机变量之间关系的一种度量。它反映了这两个变量的变化趋势是否一致&#xff0c;即当一个变量偏离其均值时&#xff0c;另一个变量是否也倾向于偏离其均值。协方差可以帮助我们了解变量之间的线性关系…
阅读更多...
【JAVA】七大排序算法(图解)

【JAVA】七大排序算法(图解)

稳定性&#xff1a; 待排序的序列中若存在值相同的元素&#xff0c;经过排序之后&#xff0c;相等元素的先后顺序不发生改变&#xff0c;称为排序的稳定性。 思维导图&#xff1a; &#xff08;排序名称后面蓝色字体为时间复杂度和稳定性&#xff09; 1.直接插入排序 核心思…
阅读更多...
【Vue3】Teleport 传送组件

【Vue3】Teleport 传送组件

Teleport 组件是 Vue.js 3 中引入的特性之一&#xff0c;它允许将组件的内容传送&#xff08;teleport&#xff09;到当前组件之外的目标位置&#xff0c;这在处理复杂的布局、模态框等方案时非常有用。 A.vue <template><div class"dialog"><heade…
阅读更多...
Android Studio新版本logcat过滤说明

Android Studio新版本logcat过滤说明

按包名过滤 //输入package:&#xff08;输入一个p就会有提示的&#xff09; &#xff0c;后面加上包名 比如: package:com.xal.runcontrol package:包名可以完整或者输部分包名即可 package:包名需要输完整准确 package~:正则表达式过滤 不了解正则表达式的可以参考&#…
阅读更多...
用了回不去的卷王机械键盘，看这些就够了

用了回不去的卷王机械键盘，看这些就够了

前几天出了一期不同价位鼠标推荐&#xff1a;外设圈彻底开卷&#xff0c;2023 下半年无脑入鼠标推荐表来了&#xff01; 结果不少小伙伴儿留言&#xff0c;鼠标是有了&#xff0c;还缺一把趁手好用且高性价比的机械键盘&#xff0c;并强烈要求咱再出一期。 话不多说&#xff0…
阅读更多...
docker-compose部署milvus

docker-compose部署milvus

部署milvus 上一篇介绍了使用kubernetes来部署milvus&#xff0c;这篇介绍下使用docker-compose来部署milvus。 下载docker-compose docker-compose的Github地址https://github.com/docker/compose/releases下载最新版的 docker-compose-linux-x86_64 在服务器上使用 wget …
阅读更多...
vue+Highcharts绘制3D饼图

vue+Highcharts绘制3D饼图

效果图 一、下载highcharts插件 npm install highcharts 二、main.js全局配置插件 import Highcharts from "highcharts/highcharts"; import highcharts3d from "highcharts/highcharts-3d"; highcharts3d(Highcharts); 三、封装highcharts.vue组件 …
阅读更多...
多功能翻译工具——图片翻译器

多功能翻译工具——图片翻译器

这是一款多功能的翻译工具&#xff0c;简单几步即可完成图片翻译操作&#xff0c;支持多种语言的翻译&#xff0c;包括英语、法语、德语、西班牙语等&#xff0c;并支持文档翻译、pdf翻译、同声传译等形式的翻译功能。可以轻松翻译图片、pdf、execl、txt、word等格式的文档&…
阅读更多...
java 企业工程管理系统软件源码+Spring Cloud + Spring Boot +二次开发+ MybatisPlus + Redis em

java 企业工程管理系统软件源码+Spring Cloud + Spring Boot +二次开发+ MybatisPlus + Redis em

​ 鸿鹄工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离构建工程项目管理系统 1. 项目背景 一、随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大。为了提高工程管理效率、减轻劳动强度、提高信息处理速度和准确性&#xff0c;公司对内…
阅读更多...
jmeter如何压测和存储

jmeter如何压测和存储

一、存储过程准备&#xff1a; 1、建立一个空表&#xff1a; 1 CREATE TABLE test_data ( id NUMBER, name VARCHAR2(50), age NUMBER ); 2、建立一个存储过程&#xff1a; 1 2 3 4 5 6 7 8 9 CREATE OR REPLACE PROCEDURE insert_test_data (n IN NUMBER) AS BEGIN --E…
阅读更多...
代码随想录二刷博客Day3~Day4

代码随想录二刷博客Day3~Day4

707. 设计链表 这道题的解题思路其实就是让我们模拟一个链表的实现&#xff1a; 首先我们先要创建一个内部类作为链表的结点&#xff0c;这个内部类要包含两个元素&#xff0c;一个是val值&#xff0c;一个是指向下一个节点的指针 在构造方法这里我们要初始化一个虚拟头街点…
阅读更多...
2023年第三届工业自动化、机器人与控制工程国际会议 | IET独立出版 | EI检索

2023年第三届工业自动化、机器人与控制工程国际会议 | IET独立出版 | EI检索

会议简介 Brief Introduction 2023年第三届工业自动化、机器人与控制工程国际会议&#xff08;IARCE 2023&#xff09; 会议时间&#xff1a;2023年10月27 -30日 召开地点&#xff1a;中国成都 大会官网&#xff1a;www.iarce.org 2023年第三届工业自动化、机器人与控制工程国际…
阅读更多...
java泛型和通配符的使用

java泛型和通配符的使用

泛型机制 本质是参数化类型(与方法的形式参数比较&#xff0c;方法是参数化对象)。 优势:将类型检查由运行期提前到编译期。减少了很多错误。 泛型是jdk5.0的新特性。 集合中使用泛型 总结&#xff1a; ① 集合接口或集合类在jdk5.0时都修改为带泛型的结构② 在实例化集合类时…
阅读更多...
2023河南萌新联赛第（五）场：郑州轻工业大学--买爱心气球

2023河南萌新联赛第（五）场：郑州轻工业大学--买爱心气球

题目链接&#xff1a;A-买爱心气球_2023河南萌新联赛第&#xff08;五&#xff09;场&#xff1a;郑州轻工业大学 (nowcoder.com) 题目描述 Alice 和 Bob 是一对竞技编程选手&#xff0c;他们路过了一家气球店&#xff0c;发现有 m 个大爱心气球和 n 个小爱心气球。他们决定玩…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023