【React入门必备知识篇01】--- React 基础 &amp； JSX

最新推荐文章于 2024-06-18 11:15:52 发布

2401_84520215

最新推荐文章于 2024-06-18 11:15:52 发布

阅读量875

点赞数 15

分类专栏： 2024年程序员学习文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/2401_84520215/article/details/138036328

版权

2024年程序员学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上Java开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：xhs1999xhs （备注Java）

正文

前言	❤️ 只有与自己和解，故事才会翻到下一页 ❤️

【React入门必备知识篇01】— React 基础 & JSX

- 一、React 基础

一、React 基础

（1）React 概述

1.1 什么是 React

1️⃣ React 是一个用于构建用户界面的 JavaScript 库。

2️⃣ React 主要用来写HTML页面，或构建Web应用。如果从 MVC 的角度来看，React 仅仅是视图层（V），也就是只负责视图的渲染，而并非提供了完整的 M 和 C 的功能。

3️⃣ React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

1.2 React 的特点

1.2.1 声明式设计

1️⃣ 你只需要描述 UI（HTML）看起来是什么样，就跟写HTML一样；

2️⃣ React 负责渲染 UI，并在数据变化时更新 UI；

代码演示如下：

const jsx = <div className="app">
	<h1>Hello React! 动态变化数据：{count}</h1>
</div>

1.2.2 基于组件

组件是 React 最重要的内容；
组件表示页面中的部分内容；
组合、复用多个组件，可以实现完整的页面功能；
通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中；

1.2.3 学习一次，随处使用

使用 React 可以开发 Web 应用；
使用 React 可以开发移动端原生应用（react-native）；
使用 React 可以开发 VR（虚拟现实）应用（react 360）等；

（2）React 的基本使用

2.1 React 的安装

安装命令：npm i react react-dom

react 包是核心，提供创建元素、组件等功能
react-dom 包提供 DOM 相关功能等

2.2 React 的使用

1️⃣ 引入 react 和 react-dom 两个 js 文件；

2️⃣ 创建 React 元素；

3️⃣ 渲染 React 元素到页面中；

完整代码演示如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>react基本使用</title>
</head>

<body>
    <div id="root"></div>

    <!-- 1 引入js文件 -->
    <script src="./node\_modules/react/umd/react.development.js"></script>
    <script src="./node\_modules/react-dom/umd/react-dom.development.js"></script>

    <script>
 // 2 创建react元素
 // 参数一：元素名称
 // 参数二：元素属性
 // 参数三：元素的子节点
 const title = React.createElement('h1', null, 'Hello React')

 // 3 渲染react元素
 // 参数一：要渲染的react元素
 // 参数二：挂载点
 ReactDOM.render(title, document.getElementById('root'))
 </script>
</body>

</html>

2.3 方法说明

React.createElement() 说明（了解即可）

// 返回值：React元素
// 第一个参数：要创建的React元素名称
// 第二个参数：该React元素的属性
// 第三个及其以后的参数：该React元素的子节点
const el = React.createElement('h1', { title: '标题' }, 'Hello React')

ReactDOM.render() 说明

// 第一个参数：要渲染的React元素
// 第二个参数：DOM对象，用于指定渲染到页面中的位置
ReactDOM.render(el, document.getElementById('root'))

（3）React 脚手架的使用

3.1 React 脚手架意义

脚手架是开发现代Web 应用的必备；
充分利用 Webpack、Babel、ESLint 等工具辅助项目开发；
零配置，无需手动配置繁琐的工具即可使用；
关注业务，而不是工具配置；

3.2 使用 React 脚手架初始化项目

初始化项目，命令：npx create-react-app my-app
启动项目，在项目根目录执行命令：npm start

npx 命令介绍：

npm v5.2.0 引入的一条命令；
目的：提升包内提供的命令行工具的使用体验；
从前：先安装脚手架包，再使用这个包中提供的命令；
现在：无需安装脚手架包，就可以直接使用这个包提供的命令；

3.3 在脚手架中使用 React

1️⃣ 导入 react 和 react-dom 两个包；

import React from 'react'
import ReactDOM from 'react-dom'

2️⃣ 调用 React.createElement() 方法创建 react 元素；

3️⃣ 调用 ReactDOM.render() 方法渲染 react 元素到页面中；

（4）React 基础小结

React是构建用户界面的JavaScript库。
使用 react 时，推荐使用脚手架方式。
初始化项目命令：npx create-react-app my-app 。
启动项目命令：yarn start（或 npm start）。
React.createElement() 方法用于创建 react 元素（知道）。
ReactDOM.render() 方法负责渲染 react 元素到页面中。

二、JSX

（1）JSX 的基本使用

1.1 createElement() 的问题

繁琐不简洁。
不直观，无法一眼看出所描述的结构。
不优雅，用户体验不爽。

在这里插入图片描述

1.2 JSX 简介

1️⃣ JSX 是 JavaScript XML 的简写，表示在 JavaScript 代码中写 XML（HTML）格式的代码。

2️⃣ 优势：声明式语法更加直观、与HTML结构相同，降低了学习成本、提升开发效率。

3️⃣ JSX 是 React 的核心内容。

1.3 使用步骤

1️⃣ 使用 JSX 语法创建 react 元素；

// 使用 JSX 语法，创建 react 元素：
const title = <h1>Hello JSX</h1>

2️⃣ 使用 ReactDOM.render() 方法渲染 react 元素到页面中；

// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))

😆思考：为什么脚手架中可以使用 JSX 语法？😆：

JSX 不是标准的 ECMAScript 语法，它是 ECMAScript 的语法扩展。
需要使用 babel 编译处理后，才能在浏览器环境中使用。
create-react-app 脚手架中已经默认有该配置，无需手动配置。
编译 JSX 语法的包为：https://babeljs.io/docs/en/babel-preset-react

1.4 注意事项

React元素的属性名使用驼峰命名法。
特殊属性名：class → className、for → htmlFor、tabindex → tabIndex 。
没有子节点的React元素可以用 /> 结束。
推荐：使用小括号()包裹 JSX ，从而避免 JS 中的自动插入分号陷阱。

（2）JSX 中使用 JavaScript 表达式

2.1 嵌入 JS 表达式

数据存储在JS中
语法：{ JavaScript表达式 }
注意：语法中是单大括号，不是双大括号！

完整代码演示如下：

import React from 'react'
import ReactDOM from 'react-dom'

/\* 
 JSX中使用JavaScript表达式
\*/
const name = 'Jack'
const age = 19

const title = (
    <h1>
        Hello JSX, {name}, 年龄：{age}
    </h1>
)

// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))

2.2 注意事项

单大括号中可以使用任意的 JavaScript 表达式
JSX 自身也是 JS 表达式
注意：JS 中的对象是一个例外，一般只会出现在 style 属性中
注意：不能在{}中出现语句（比如：if/for 等）

（3）JSX 的条件渲染

场景：loading效果
条件渲染：根据条件渲染特定的 JSX 结构
可以使用 if/else 或三元运算符或逻辑与运算符来实现

完整代码演示如下：

import React from 'react'
import ReactDOM from 'react-dom'

/\* 
 条件渲染：
\*/
const isLoading = false

// if-else:
// const loadData = () => {
// if (isLoading) {
// return <div>loading...</div>
// }
// return <div>数据加载完成，此处显示加载后的数据</div>
// }

// 三元表达式：
// const loadData = () => {
// return isLoading ? (<div>loading...</div>) : (<div>数据加载完成，此处显示加载后的数据</div>)
// }

// 逻辑与运算符：
const loadData = () => {
    return isLoading && (<div>loading...</div>)
}

const title = (
    <h1>
        条件渲染：
        {loadData()}
    </h1>
)

// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))

（4）JSX 的列表渲染

如果要渲染一组数据，应该使用数组的 map() 方法；
注意：渲染列表时应该添加 key 属性，key 属性的值要保证唯一；
原则：map() 遍历谁，就给谁添加 key 属性；
注意：尽量避免使用索引号作为 key；

完整代码演示如下：

import React from 'react'
import ReactDOM from 'react-dom'

/\* 
 列表渲染：
\*/

// 歌曲列表：
const songs = [
    { id: 1, name: '海阔天空' },
    { id: 2, name: '光辉岁月' },
    { id: 3, name: '冷雨夜' },
]

const list = (
    <ul>
        {songs.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
)

// 渲染react元素
ReactDOM.render(list, document.getElementById('root'))

（5）JSX 的样式处理

5.1 行内样式 — style

代码演示如下：

<h1 style={{ color: 'red', backgroundColor: 'skyblue' }}>
	JSX的样式处理
</h1>

5.2 类名 — className（推荐）

代码演示如下：

<h1 className="title">
	JSX的样式处理
</h1>

（6）JSX 小结

JSX 是React 的核心内容。
JSX 表示在JS代码中写HTML结构，是React声明式的体现。
使用 JSX 配合嵌入的 JS 表达式、条件渲染、列表渲染，可以描述任意 UI
结构。
推荐使用 className 的方式给JSX添加样式。
React 完全利用 JS 语言自身的能力来编写UI，而不是造轮子增强 HTML 功
能。

三、总结

😝 由于内容较多，所以我决定分开写啦，我会坚持一直更新呢！喜欢的朋友们记得点点赞哦！ 😝

最后

分享一套我整理的面试干货，这份文档结合了我多年的面试官经验，站在面试官的角度来告诉你，面试官提的那些问题他最想听到你给他的回答是什么，分享出来帮助那些对前途感到迷茫的朋友。

面试经验技巧篇

经验技巧1 如何巧妙地回答面试官的问题
经验技巧2 如何回答技术性的问题
经验技巧3 如何回答非技术性问题
经验技巧4 如何回答快速估算类问题
经验技巧5 如何回答算法设计问题
经验技巧6 如何回答系统设计题
经验技巧7 如何解决求职中的时间冲突问题
经验技巧8 如果面试问题曾经遇见过，是否要告知面试官
经验技巧9 在被企业拒绝后是否可以再申请
经验技巧10 如何应对自己不会回答的问题
经验技巧11 如何应对面试官的“激将法”语言
经验技巧12 如何处理与面试官持不同观点这个问题
经验技巧13 什么是职场暗语

面试真题篇

真题详解1 某知名互联网下载服务提供商软件工程师笔试题
真题详解2 某知名社交平台软件工程师笔试题
真题详解3 某知名安全软件服务提供商软件工程师笔试题
真题详解4 某知名互联网金融企业软件工程师笔试题
真题详解5 某知名搜索引擎提供商软件工程师笔试题
真题详解6 某初创公司软件工程师笔试题
真题详解7 某知名游戏软件开发公司软件工程师笔试题
真题详解8 某知名电子商务公司软件工程师笔试题
真题详解9 某顶级生活消费类网站软件工程师笔试题
真题详解10 某知名门户网站软件工程师笔试题
真题详解11 某知名互联网金融企业软件工程师笔试题
真题详解12 国内某知名网络设备提供商软件工程师笔试题
真题详解13 国内某顶级手机制造商软件工程师笔试题
真题详解14 某顶级大数据综合服务提供商软件工程师笔试题
真题详解15 某著名社交类上市公司软件工程师笔试题
真题详解16 某知名互联网公司软件工程师笔试题
真题详解17 某知名网络安全公司校园招聘技术类笔试题
真题详解18 某知名互联网游戏公司校园招聘运维开发岗笔试题

资料整理不易，点个关注再走吧

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：xhs1999xhs （备注Java）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

真题详解8 某知名电子商务公司软件工程师笔试题
真题详解9 某顶级生活消费类网站软件工程师笔试题
真题详解10 某知名门户网站软件工程师笔试题
真题详解11 某知名互联网金融企业软件工程师笔试题
真题详解12 国内某知名网络设备提供商软件工程师笔试题
真题详解13 国内某顶级手机制造商软件工程师笔试题
真题详解14 某顶级大数据综合服务提供商软件工程师笔试题
真题详解15 某著名社交类上市公司软件工程师笔试题
真题详解16 某知名互联网公司软件工程师笔试题
真题详解17 某知名网络安全公司校园招聘技术类笔试题
真题详解18 某知名互联网游戏公司校园招聘运维开发岗笔试题

[外链图片转存中…(img-tY9bBdiu-1713686063763)]

资料整理不易，点个关注再走吧

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：xhs1999xhs （备注Java）
[外链图片转存中…(img-IOgSPr6H-1713686063763)]

2401_84520215

关注

15
点赞
踩
29

收藏

觉得还不错? 一键收藏
0
评论
【React入门必备知识篇01】--- React 基础 &amp； JSX

1️⃣React是一个用于构建用户界面的 JavaScript 库。2️⃣React主要用来写HTML页面，或构建Web应用。如果从 MVC 的角度来看，React 仅仅是视图层（V），也就是只负责视图的渲染，而并非提供了完整的 M 和 C 的功能。3️⃣React起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。1️⃣JSX是 JavaScript XML 的简写，表示在 JavaScript 代码中写 XML（HTML）格式的代码。
复制链接

扫一扫