主页 > IT业界 >

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

IT业界
2025-09-03 16:18:01

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( )以及其它）解构数组和对象错误处理