号称前端第一框架的React ！

在现在这个超卷的社会，企业对计算机开发者的技术要求越来越高，这让开发者不得不频繁的巩固加学习新的技术，作为前端开发者，精通Vue框架的开发，可以让你找到一个不错的工作，如果能够把React玩的也很溜，那么就可以升职加薪了！哈哈哈哈，让我们一起朝着精通Vue和React去学习！

什么是React

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发并维护，首次在 2013 年 5 月作为开源项目发布。React 最初设计用于创建快速且响应式的 Web 应用程序前端，但随着生态系统的发展，它也被广泛应用于构建移动应用、桌面应用甚至服务器端渲染。

React 的核心特性包括：

组件化： dom 编程已过去，性能不好，而 React 它强调组件化的开发方式，开发者可以将 UI 分解为独立、可复用的组件。每个组件负责单一功能，并可以通过属性（props）和状态（state）来控制其行为和显示。
虚拟 DOM： React 使用虚拟 DOM 技术来提高渲染效率。当组件的状态或属性发生变化时，界面会自动更新，React 会计算出新的虚拟 DOM 树，并与之前的树进行比较，仅更新必要的部分（属于响应式编程），从而减少浏览器重绘和布局的成本。
声明式编程： React 鼓励声明式的编码风格，即描述你希望 UI 看起来是什么样子，而不是如何通过一系列指令来实现变化。这使得代码更易于理解和维护。
JSX： React 使用一种叫做 JSX 的语法扩展，它允许在 JavaScript 中内联 HTML 标签，使构建组件更加直观。

React是来自FaceBook，特别适合中大型项目开发，但是相比于Vue，它的学习成本高，但是也深受前端开发者的喜爱，有人认为React是前端第一框架，有人认为Vue更优雅，但是！！！小孩子才做选择题，咱们两个都学！

创建React

初始化一个项目：
css 复制代码
```
npm i -g create-react-app
```
react/vue 是企业级应用，create-react-app 是来自Facebook官方推出的项目脚手架（可以快速开发）， -g 是全局安装，我们可以通过 npm config ls 打印所有配置信息,被安装到了你node的文件下了。
输入指令create-react-app react-test创建React文件输入文件名（注意不能大写）:
- 当出现这个的时候，意味着你的文件创建完成了。
启动React

当出现这个页面，你的React就正式启动了。

除了使用create-react-app,还可以使用vite创建React项目，也可以创建Vue项目，而这个vite是Vue.js的创建者尤雨溪开发的，它是一个现代化的前端构建工具和开发服务器。提供一个快速且高效的工作流程，特别是在开发阶段，通过利用现代浏览器对 ES 模块（ESM）的支持来实现这一点。

下面我们使用Vite可以更快的创建一个React:

输入指令npm init vite，创建React项目文件名：
使用上下按键移动，指定创建React项目：
- 选择JavaScript开发
然后根据提示，启动！

npm install是下载项目的依赖，package.json内是React项目所需的依赖包和版本号，而package-lock.json文件则是依赖的版本记录。

输入npm run dev 启动React。

项目结构

src 开发目录，代码的主战场
1. main.jsx 这个文件称为入口文件,项目的单点入口。
  - react.creatElement 创建节点
  - root.render 挂载到root节点
2. index.css 是全局样式文件。
node_modules 存放的依赖包
package.json 项目描述文件
public 静态资源目录
index.html 首页提供html模板以及 #root 挂载点

自定义组件挂载

组件 component就像拼乐高

根组件 App
1. JSX 里用html标签的方式开插入
2. 标签不是html内置标签，而是组件本身的名字
子组件
- 旧开发打理的是真实DOM树
- 组件树（React 组件树）子组件

生成的入口文件长这样，他会在index.html的DOM树找到ID为root的挂载点，然后挂载一个组件名为App的组件。

如何自定义挂载组件呢！在生成的 src目录下 - > 删除assets文件、清空index.css全局样式，清空App.jsx。

目录结构：

在index.css全局样式加入如下代码：

css 复制代码

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;   
}

至于为什么这样做，我们后面在讲浏览器优化的时候会提到的，这里通常使用的*通配符比较消耗性能，做了很多没必要的匹配。

旧开发的组件创建：

这里你就可以看到文字靠边了，页面自带的边距被清除，而且被挂载的element2元素也被显示了，ReacteDOM调用的方法就是返回index.html的挂载点，然后将挂载点交给React接管，使root能够操作挂载点了。

使用es6的新方法：

es6 的功能：
- class 让js成为大型企业开发语言，传统的面向对象，设计模式好用起来原型面向对象，其它开发者不太熟悉，class 只是语法糖，底层逻辑还是prototype
- extends 轻松实现继承，面向对象层次更加细腻
- 封装、继承、多态
- 以react 源码为例，Component 组件基类 constructor super(props) 基类构造函数先执行构造自己的状态必须重写render 方法返回组件的JSX

我们还是使用生成的入口文件：

对App组件进行修改如下：

scala 复制代码

import { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>Hello World</h1>
      </div>
    );
  }
}

export default App;

一样的可以实现自定义组件的挂载，是不是觉得这样更加优雅呢！！反正我是觉得这个更好用的。

好了，今天的内容就分享到这吧，后面会陆续发出Vue实战和React实战的小demo，想要学Vue或者React的jym快行动起来吧，点点关注不迷路哦！