当前位置：首页 > article >正文

React 前端框架1

article 2024/12/5 4:26:54

一、React 简介

（一）什么是 React

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开源并维护。它采用了组件化的开发思想，允许开发者将复杂的 UI 拆分成一个个独立、可复用的小组件，就如同搭积木一般，通过组合这些 “积木”（组件）来构建出完整且功能丰富的页面或者应用程序。例如，一个电商网站中，商品展示的卡片、导航栏、侧边栏等都可以分别作为独立的组件进行开发，然后灵活地组装在一起。

（二）React 的特点

高效性：
- React 使用了虚拟 DOM（Virtual DOM）技术。简单来说，虚拟 DOM 是真实 DOM 的一种轻量级的 JavaScript 表示形式。当组件的状态或者属性发生变化时，React 会先在虚拟 DOM 上进行相应的更新操作，然后通过对比新旧虚拟 DOM 的差异（这个过程叫 Diffing），只将有变化的部分精准地更新到真实 DOM 中，而不是像传统方式那样直接操作整个真实 DOM，大大减少了不必要的 DOM 操作，从而提高了页面的渲染效率，让应用的交互体验更加流畅。
组件化与复用性：
- 组件是 React 的核心概念，每个组件都有自己独立的逻辑、样式和结构。我们可以方便地在不同的地方复用已经编写好的组件，减少了重复代码的编写。比如，在多个页面都需要使用相同样式和功能的按钮组件时，只需要创建一次这个按钮组件，然后在其他地方按需引入使用即可，这极大地提高了开发效率，也方便后期的维护和扩展。
单向数据流：
- React 遵循单向数据流的原则，数据从父组件流向子组件，子组件不能直接修改父组件传递过来的数据，只能通过调用父组件传递过来的回调函数等方式来告知父组件数据需要变更，这种清晰的数据流向使得组件之间的数据交互更加可预测，易于理解和调试，能有效避免复杂应用中数据混乱的问题。

二、React 环境搭建

（一）使用 Create React App 工具（推荐新手使用）

Create React App 是 Facebook 官方提供的一个脚手架工具，它可以帮助我们快速搭建一个基于 React 的项目开发环境，免去了繁琐的配置过程。

安装步骤：
1. 首先确保你的电脑已经安装了 Node.js（因为 Create React App 依赖于 Node.js 的包管理工具 npm 或者 yarn）。
2. 打开命令行终端，输入以下命令来创建一个新的 React 项目（这里以项目名为 my-react-app 为例）：
  使用 npm：npx create-react-app my-react-app
  或者使用 yarn：yarn create react-app my-react-app
3. 等待安装过程完成后，进入项目目录：cd my-react-app
4. 启动项目开发服务器，在命令行中输入：npm start（使用 npm 时）或者 yarn start（使用 yarn 时），此时浏览器会自动打开一个页面，显示 React 的默认欢迎界面，就表示项目搭建成功啦，可以开始进行 React 开发了。

（二）手动配置 React 项目（适合有一定经验的开发者）

如果你想要对项目的配置有更多的掌控权，也可以选择手动配置 React 项目环境，不过这相对来说步骤会复杂一些，涉及到配置 webpack（用于模块打包）、Babel（用于将 ES6 等新语法编译成浏览器能识别的代码）等工具，以下是大致的步骤概述：

创建项目目录，比如 my-manual-react-app，进入该目录后初始化一个 npm 项目（通过 npm init -y 命令）。
安装 React 和 React DOM 库：npm install react react-dom。
安装 webpack、webpack-cli 以及相关的 loader（比如用于处理 CSS、JavaScript 等文件的 loader）：例如，npm install webpack webpack-cli style-loader css-loader babel-loader @babel/core @babel/preset-env @babel/preset-react -S。
配置 webpack 的配置文件（webpack.config.js），定义入口文件、输出路径、模块规则等内容。
配置 Babel 的配置文件（.babelrc），指定要使用的预设（presets），比如 @babel/preset-env 用于处理 ES6 等新的 JavaScript 语法，@babel/preset-react 用于处理 React 的 JSX 语法等。
创建 HTML 文件作为项目的入口页面，在其中引入打包后的 JavaScript 文件等，然后通过命令行运行 webpack 命令来进行项目的打包构建等操作。