【JavaScript--React】本篇文章将带你体验不同于vue框架的react框架

🚗个人主页：最好的人啊

🚌系列专栏：HTML/CSS

🚐推荐一款模拟面试、刷题神奇、从基础到大厂的面试题库，要想走上人生巅峰迎娶白富美赶快点击这个网站⚡不要犹豫，白富美在向你招手，快来注册吧！

目录

一，首先我要知什么是React？

二，体验React

三 ，认识React

1，概念：

2，特点：

3，高效的原因：

四，虚拟DOM

1， 概念

2，创建虚拟DOM ---步骤

第一种 JS创建拟DOM

第二种 JSX创建虚拟DOM

五，JSX语法

1，概念：

2， 定义虚拟DOM时不要用引号。

3，标签混入JS表达式需要用{}

4， className样式的类名

5， 内联样式

6， 只有一个根标签

7，标签必须闭合

8， 标签首字母

9， js表达式

六，JSX小案例

---

一，首先我要知什么是React？

React 是一个用于构建用户界面的 JavaScript 库。（只关注视图），起源于Facebook的内部项目，该公司对市场上所有 JavaScript MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站。于2013年5月开源。

二，体验React

体验 React React 从诞生之初就是可被逐步采用的，因而你可以按需引入或多或少的 React 特性。不管你是想体验下 React，用它给简单的 HTML 页面增加一点交互，还是要开始一个完全由 React 驱动的复杂应用，该章节内容里的链接都能帮你快速开始。

经典代码演示：

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

三 ，认识React

1，概念：

React 是一个用于构建用户界面的 JavaScript 库

2，特点：

声明式编程：React 使创建交互式 UI ，当数据变动时 React 能高效更新并渲染合适的组件。

组件化: 构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。

Css html js  封装一个组件

高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。

灵活：无论你现在使用什么技术栈，都可通过引入 React 来开发新功能。

3，高效的原因：

• 使用虚拟(virtual)DOM,不总是直接操作页面真实DOM。
• DOM Diffing算法,最小化页面重绘

说明：React并不会提高渲染速度,反