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></html>
- <head></head>
- <body></body>
- <div></div>
2) 文本格式化
html
- <h1></h1>
- <h2></h2>
- <h3></h3>
- ... ...
- <h6></h6>
3) 列表
html
- <ul><li></ul></li>
- <b><i>
4) 图像
html
- <img src=" ">
5) 链接
html
- <a href=" ">
6) 语义
html
- <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官方文档

技术好文陆续推出,欢迎持续关注和点赞。
您的认可,我的动力!😃