【React框架基础知识】React框架的简介与基本使用方法

一、简介

React：由Facebook开发的用于构建用户界面的JavaScript库(开源)。

1.1 为什么要学前端框架？

原生Javascript有很多痛点：

原生JavaScript操作DOM繁琐、效率低(DOM-API操作UI)

document.getElementById('app');
document.querySelector('#app');
document.getElementByTagName('h1');

使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排。
原生JavaScript没有组件化编码方案，代码复用率低。

1.2 React有哪些特点？

它有以下几个特点：

声明式编程
组件化
- 可自定义有状态的组件
- 灵活使用组件简化开发
一次开发，随处编写
- 既可以使用Node进行服务器渲染，或使用React Native开发原生移动应用。
使用虚拟DOM + 优秀的Diffing算法，尽量减少与真实DOM的交互。

1.2.1 为什么React高效

使用虚拟DOM,不总是直接操作页面真实的DOM。
使用DOM Diffing算法对新、旧两个虚拟DOM进行比较，最小化页面重绘。

二、基本使用方法

2.1 在HTML中引入React

不涉及复杂的工具或安装需求，只需引入几个.js文件就可以将React组件添加到现有的HTML页面中。

2.1.1 在HTML中添加一个容器

<div id="container"></div>

2.1.2 添加`Script`标签

①引入库文件

<!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"，节约传输成本--><!-- Ps：两者之间的顺序不能搞反了-->
<!-- 引入react核心库 -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

react.js：React核心库
react-dom.js：提供操作DOM的react扩展库
babel.min.js，用于将jsx转为js

②编写jsx代码

<!-- 法1： 加载需要的React 组件-->
<script src="xxx.js"></script><!-- 法2： 加载需要的React 组件-->
<script type="text/babel" > /* 此处一定要写babel *///1.创建虚拟DOMconst VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 *///2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('container'))
</script>

2.2 使用Create-React-App

Create-React-App 让你仅通过一行命令，即可构建现代化的 Web 应用。

You’ll need to have Node >= 14 on your local development machine (but it’s not required on the server). You can use nvm (macOS/Linux) or nvm-windows to switch Node versions between different projects.

创建之前检查一下自己的Node版本(>=14)。

```
# 安装
npm init react-app my-app
```

# 切换到对应目录，运行内置命令
cd my-app/
npm start

【React框架基础知识】React框架的简介与基本使用方法相关推荐

echarts结合react开发基础知识学习
echarts基础知识学习 1.echarts简介 ECharts,一个使用 JavaScript 实现的开源可视化库,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,S ...
计算机网络基础知识论文摘要,计算机网络基础知识论文大纲格式计算机网络基础知识论文框架如何写...
[100个]计算机网络基础知识论文大纲格式供您参考,希望能解决毕业生们的计算机网络基础知识论文框架如何写相关问题,写好提纲那就开始写计算机网络基础知识论文吧! 五.高职<计算机网络>课程活 ...
【STM32】基础知识第一课单片机简介
[STM32]基础知识第一课单片机简介单片机是什么单片机和电脑区别单片机的特点单片机有什么用单片机发展历程单片机发展趋势 CISC vs RISC CISC 和 RISC 举例冯诺依 ...
Spring框架基础知识
本人博客文章网址:https://www.peretang.com/basic-knowledge-of-spring-framework/ Spring框架简介 Spring , 一个开源的框架 , ...
适用于所有人的Nextjs-具有一些React的基础知识
具备一些基本的React和JavaScript知识,您将一路走来 (With some basic React and JavaScript knowledge, you'll be on your ...
Django框架基础知识汇总（有项目版）
Web框架本质## web系统概念 1. Http,无状态,短连接 2. 浏览器(socket客户端).网站(socket服务端) web框架本质 import socket def handle_r ...
Hadoop框架--基础知识
如果有天堂,天堂应该是图书馆的模样. –博尔赫斯 (不那么冷就更好了) 主要内容:Hadoop.hive.HBASE.zookeeper.MySQL.sqoop.kafka(有时间补).日志一.什么 ...
unittest框架-基础知识
一.什么是UnitTest框架 UnitTest是python自带的一个单元测试框架,用它来做单元测试. 对于测试来说,unittest框架的作用是自动化脚本(用例代码)执行框架,使用unittest ...
【深度学习基础知识 - 21】加快模型训练速度的方法
在深度学习任务中,虽然可以通过堆叠参数.设计更复杂的结构来提高模型的表征能力,但这也会导致模型的计算量增加,训练时间延长,大大降低模型的产出效率.这篇文章根据博主的经验简单介绍一些加快模型训练速度的方 ...
js基础知识温习：Javascript中如何模拟私有方法
本文涉及的主题虽然很基础,在很多人眼里属于小伎俩,但在JavaScript基础知识中属于一个综合性的话题.这里会涉及到对象属性的封装.原型.构造函数.闭包以及立即执行表达式等知识. 公有方法公有方法 ...

【React框架基础知识】React框架的简介与基本使用方法

一、简介

1.1 为什么要学前端框架？

1.2 React有哪些特点？

1.2.1 为什么React高效

二、基本使用方法

2.1 在HTML中引入React

2.1.1 在HTML中添加一个容器

2.1.2 添加`Script`标签

2.2 使用Create-React-App

【React框架基础知识】React框架的简介与基本使用方法相关推荐

最新文章

热门文章

【React框架基础知识】React框架的简介与基本使用方法

一、简介

1.1 为什么要学前端框架？

1.2 React有哪些特点？

1.2.1 为什么React高效

二、基本使用方法

2.1 在HTML中引入React

2.1.1 在HTML中添加一个容器

2.1.2 添加Script标签

2.2 使用Create-React-App

【React框架基础知识】React框架的简介与基本使用方法相关推荐

最新文章

热门文章

2.1.2 添加`Script`标签