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

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官方文档

技术好文陆续推出,欢迎持续关注和点赞。

您的认可,我的动力!😃

相关阅读:

  1. React简介
  2. Python网络爬虫爬取图片实战
  3. 用Django创建一个Web项目
  4. 2025最新版MySQL安装使用指南
  5. JavaScript编程基础 - 对象
  6. 用Visual Studio Code搭建JavaScript开发环境
相关推荐
天宇&嘘月2 小时前
web第三次作业
前端·javascript·css
laimaxgg3 小时前
Qt常用控件之单选按钮QRadioButton
开发语言·c++·qt·ui·qt5
小王不会写code3 小时前
axios
前端·javascript·axios
luckyext4 小时前
HBuilderX中,VUE生成随机数字,vue调用随机数函数
前端·javascript·vue.js·微信小程序·小程序
小小码农(找工作版)4 小时前
JavaScript 前端面试 4(作用域链、this)
前端·javascript·面试
鱼樱前端5 小时前
深入JavaScript引擎与模块加载机制:从V8原理到模块化实战
前端·javascript
yangjiajia1234566 小时前
vue3 ref和reactive的区别
前端·javascript·vue.js
诚信爱国敬业友善6 小时前
Vue 基础二(进阶使用)
前端·javascript·vue.js
なし.7 小时前
【Web前端开发精品课 HTML CSS JavaScript基础教程】第二十四章课后题答案
前端·javascript·css·html