React 入门 - 01

本章内容

目录

• • [1. 简介](#1. 简介)
  • • [1.1 初始 React](#1.1 初始 React)
    • [1.2 React 相关技术点](#1.2 React 相关技术点)
    • [1.3 React.js vs Vue.js](#1.3 React.js vs Vue.js)
  • [2. React 开发环境准备](#2. React 开发环境准备)
  • • [2.1 关于脚手架工具](#2.1 关于脚手架工具)
    • [2.2 create-react-app 构建一个 React 项目工程](#2.2 create-react-app 构建一个 React 项目工程)

1. 简介

1.1 初始 React

React JS 是 Facebook 在 2013年5月开源的一款前端框架，其带来一种全新的"函数式"编程风格，迄今为止，有着健全的文档和完善的社区。

React16 和之后的版本，称之为 "React Fiber"，其性能和便捷度上都得到了极大的提升。在 React 的使用中，我们会看到全球范围内的开发者解决统一问题时的不同解决方案。

官网地址
中文官方网站

1.2 React 相关技术点

• React JS: 使用 React 的语法来编写一些网页&交互行为
• React Native: 使用 React 语法编写原生 APP 应用
• React VR/ React 360: 在 React 的语法基础上，开发一些 VR/全景应用

1.3 React.js vs Vue.js

React.js 相比于 Vue.js，其灵活性更加强，所以在处理一些复杂的业务时，技术方案的选型上更加丰富。Vue.js 提供了丰富的 API，实现功能会更加简单，但灵活性会有所限制。

因此，一般复杂度较高的项目采用 React.js ,而面向用户端、复杂度不高时可选用 Vue.js

2. React 开发环境准备

使用 React 编码，一般有两种方式

• 方式一（不推荐）：直接使用 <script>标签引入相关的 React 文件。如果项目比较庞大，可以对 js 文件进行拆分，拆分后的文件使用 script 标签进行引入。这是一种比较古老的方式，性能可能很低，可维护性也比较差。

• 方式二（推荐）：使用"脚手架"工具进行工程搭建。常用的有 React 官方提供的 create-react-app 或者 vite

2.1 关于脚手架工具

"脚手架"本质上是前端开发过程中的辅助工具，可以使用它来构建一个完整项目的开发流程和目录。内部允许我们使用一定的方式去互相引用 js 文件。再通过其编译，产生的代码可以直接被浏览器识别运行。

"脚手架"的编写可以使用 Grunt 、Glup、Webpack、Vite 等工具。

初学 React 时，可以使用 React 官方提供的脚手架-- create-react-app。

2.2 create-react-app 构建一个 React 项目工程

• 确认你已经安装了 node
• 安装 create-react-app 脚手架（如果没有按此步骤安装，可直接按照官网步骤进行构建项目）

npm install create-react-app -g

• 打开终端，输入命令，等待目录自动创建，创建后启动项目，使用浏览器打开相应地址

create-react-app react-demo

cd react-demo
npm start

到此，本章内容结束！