当前位置：首页 > news >正文

React入门 – 1. 学习React的预备知识

news 来源：原创 2025/5/19 16:08:30

React入门 – 1. 学习React的预备知识

Prepared Knowledge to Learn React Development

By Jackson@ML

众所周知，React是Meta开发的Web UI框架（库），以便实现动态Web站点。真因为是这样，学习React之前，需要储备一定的知识和技能。

本文简要介绍学习和实践React需要具备的知识及技能，以备有兴趣的读者学习借鉴。

在这里插入图片描述

首先，面向互联网和Web开发，React功能强大。既然是面向Web，那么基于Web网页设计的三要素（HTML，CSS和JavaScript）就必须先打好基础。

其次，动态网页基于静态网页，也就是说，JavaScript语言是在HTML，CSS基础上添加到网页文件中的，它是脚本语言。充分利用React做好基础开发，则应该首先了解JavaScript基本概念和方法。

同时，React是一个须声明的、高效的和灵活的JavaScript库，用于构建用户界面（UI），它也允许由所谓的“组件”的小而精的代码片段组成复杂的用户界面。

React使用现代JavaScript语言功能搭建，因此通常使用其ES6版本，由此，开发者可以使用React编程开发出Web应用程序；同时，也可以用React Native开发移动应用程序。

因此，要想开发出好用、高效的Web应用程序，就必须先学习HTML，CSS及相关知识技能，切实打好基础;

只有凭借扎实的JavaScript知识，并加强JavaScript ES6语言和实践技能，快速协同React代码，最终方能实现React在Web端和移动端的产品开发。

学好React需要具备的知识技能如下。

1. HTML

HTML(Hypertext Markup Language，超文本标记语言)，用于描述Web页面结构和内容。开发人员需要使用带有开始和结束的一对标签（尖括号< >），作为HTML元素（Elements）来标记HTML文档。

同样，用户需要能够与网页上的元素进行交互。这意味着 HTML 文档必须以 JavaScript 代码可以查询和更新的方式表示。这就是 DOM（Document Object Model，文档对象模型） 的功能。它是 HTML 文件中对象的模型。

Web 开发人员通过 JavaScript 与 DOM 交互，以更新内容、设置事件和为 HTML 元素添加动画。

以下是HTML语言针对不同用途而需要掌握的主要标签：

1）设计和风格

-	<html></html>
-	<head></head>
-	<body></body>
-	<div></div>

2）文本格式化

-	<h1></h1>
-	<h2></h2>
-	<h3></h3>
-	… …
-	<h6></h6>

3）列表

-	<ul><li></ul></li>
-	<b><i>

4）图像

-	<img src=” ”>

5）链接

-	<a href=” ”>

6）语义

-	<header>

• 可参考HTML学习指南。

在这里插入图片描述

2. CSS

Cascading Style Sheets（CSS）即层叠样式表。

CSS用于设置HTML样式，在学习React之前，也需要掌握必要的CSS概念和方法；由于React也涉及到设置组件样式，因此，基本的CSS知识无疑对掌握React大有裨益。

需要率先熟悉的CSS样式有：

字体样式（字体大小、颜色等等）
Flex Box设计（用CSS条目设计Flex Box方案）
CSS选择器（Selectors）
位置，padding, margin和显示
颜色，背景色和图标等

• 可参考：CSS样式表基础(CSS Styling Basics)。

在这里插入图片描述

3. Java Script

React是基于JavaScript的，它用JavaScript语言编写完成，并使用ES6版本；因此，学习React之前，有必要了解JavaScript基本知识和方法。

另外，JavaScript是Web开发使用的编程语言，而React是一个JavaScript UI库；因此，学好 React，势必要精通JavaScript。

必要的Java Script相关学习条目有：

数据类型
变量类型(var, let和const)
条件语句
循环语句
对象、数组和函数
ES6箭头函数
内置函数（例如：map( ), forEach( )以及其它）
解构数组和对象
错误处理

*可参考：现代JavaScript指南

在这里插入图片描述

4. 包管理器(Node, npm)

React作为JavaScript的UI库，平常开发时会遇到向React应用程序添加其它包；JavaScript标准库的包包含模块所需全部文件。

如果需要有效管理这些有用的包以及依赖项(dependencies)，因此，可以使用JS后端NPM(Node Package Manager) 包管理器。

以下是开发前必备NPM的工作：

用命令行安装npm模块
安装包（作为dependency）
启动命令
更新npm版本
在package.json文件中搜索

有了上述的知识和技能基础，React应用开发将迎刃而解。接下来，让我们逐步深入探讨React开发Web应用程序吧。

*供参考：npm官方文档

在这里插入图片描述
技术好文陆续推出，欢迎持续关注和点赞。

您的认可，我的动力！😃

React入门 – 1. 学习React的预备知识