姓名:王泽华;学号:22011211045;学院:通信工程学院
原文链接:https://blog.csdn.net/m0_62118859/article/details/124292122
【嵌牛导读】React 是最流行的前端框架之一。对比近两年 Vue 和 Angular 的下载量,还有 2021 年开发者使用的 web 框架的 比例 ,可以看到 React 是前端工程师应该必备技能之一,现在很多大厂也在使用它。下面将具体介绍React的基本知识。
【嵌牛鼻子】React、脚手架
【嵌牛提问】React是干什么的?如何使用React?
一、React 介绍
了解 react 的历史背景和基本概念
React 起源于 Facebook 的内部项目。因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在 2013 年 5 月开源了。

React 是一个用于构建用户界面的 JavaScript 库。可以理解它只负责 MVC 中的视图层渲染,不直接提供数据模型和控制器功能。react-router 实现路由,redux 实现状态管理,可以使用它们来构建一个完整应用。
React 中文站,React 官方中文文档 – 用于构建用户界面的 JavaScript 库
总结: React 是 Facebook 开源的,现在它是最流行的前端框架大厂必备,React 本身是一个构建 UI 的库,如果需要开发一个完整的 web 应用需要配合 react-router,redux等。
二、React 特点
了解 react 的三个核心特点
1.声明式
React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图,当数据变动时 React 能高效更新并渲染合适的组件。 以声明式编写 UI,可以让你的代码更加可靠,且方便调试。

2.组件化
创建拥有各自状态的组件,再由这些组件构成更加复杂的 UI。 组件逻辑使用 JavaScript 编写而非模版,因此你可以轻松地在应用中传递数据,并使得状态与 DOM 分离。

3.一次学习,跨平台编写

总结: 声明式 UI 更清晰快捷,组件化开发更灵活,可支持 SSR,SPA ,NativeApp,VR 多平台。
三、React 脚手架
掌握使用 create-react-app 脚手架创建项目
创建项目方式:
全局安装脚手架再使用命令创建项目
使用 npx 远程调用脚手架创建项目
方式 1
全局安装
# 全局安装脚手架
npm i create-react-app -g
创建项目
# project-name 项目名称
create-react-app project-name
方式 2
npx 安装,npm5.2+支持
# project-name 项目名称
npx create-react-app project-name
推荐: 使用方式 2这样每次使用的最新脚手架创建项目,创建完毕使用 npm start 启动项目。
四、 React 基本使用
在 create-react-app 脚手架创建项目中,掌握使用 react 基本步骤
使用步骤:
导入 react react-dom 两个包
使用 react 创建 react 元素(虚拟 DOM)
使用 react-dom 渲染 react 元素
落地代码:src 内文件删除,创建src/index.js
导包

创建 react 元素

渲染 react 元素

总结: 使用 react 创建元素,使用 react-dom 渲染元素。
五、React 创建元素练习
掌握使用 react 创建嵌套元素
练习题目:
使用 react 创建如下元素

落地代码:

总结: 使用 createElement 创建元素非常麻烦、可读性差、不优雅,开发中推荐使用 JSX 来声明 UI。