号称前端第一框架的React ！

站长

2024年08月05日 20:55 · 阅读数 47

在现在这个超卷的社会，企业对计算机开发者的技术要求越来越高，这让开发者不得不频繁的巩固加学习新的技术，作为前端开发者，精通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

初始化一个项目：
```
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的组件。

号称前端第一框架的React ！

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

目录结构：

号称前端第一框架的React ！

在index.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;   
}

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

旧开发的组件创建：

号称前端第一框架的React ！

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

使用es6的新方法：

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

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

号称前端第一框架的React ！

对App组件进行修改如下：

import { Component } from "react";

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

export default App;

号称前端第一框架的React ！

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

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

转载自:https://juejin.cn/post/7388057629774512154