React开发——环境配置

不同的构建方式

在你的项目中开始使用React有多种方式，从附加一组从CDN提供React的标签，到强大的工具链和框架，这些工具链和框架具有高度可配置性，允许增加可扩展性和优化。

一些这样的工具链包括：

• Vite的React配置

• Gatsby

• NextJS

• Create React App（已弃用）

  自 2016 年推出以来，Create React App 或 CRA 是搭建新 React 项目的官方方式。不幸的是，由于多种原因，CRA 在 2023 年初被弃用。由于CRA的受欢迎程度，您会在许多教程和指南中看到它。但是，不再建议将其用于新项目。

在你开始编写任何提供功能的代码之前，你至少需要配置以下内容：

• 包管理（NPM，Yarn）
• 模块捆绑（Webpack，Parcel）
• 编译（Babel）
• React本身

简化流程

Vite 为开发人员构建前端工具，并利用最新技术提供出色的开发人员体验。幸运的是，它也迎合了 React 生态系统。我们将使用 Vite 的 CLI 快速创建一个模板 React 项目。

创建React应用

请确保您使用的是 Node 的 LTS 版本，否则可能会出现错误。启动一个终端实例，进入包含项目的文件夹，然后输入以下命令：cd

npm create vite@latest my-first-react-app -- --template react

如果看到以下输出，请输入并按：yenter

Need to install the following packages:
  create-vite@5.X.X
Ok to proceed? (y)

执行命令后，它应输出后续步骤供您操作：

cd my-first-react-app
npm install
npm run dev

如果一切都按计划进行，请前往 ，在那里您将看到以下页面：localhost:5173

深入研究

其中包含一些有用的信息，您现在应该花时间浏览一下。

• package.json
• package-lock.json
• .gitignore
• README.md

public文件夹是与应用相关的所有静态资产的存储位置。这可能包括浏览器的图像、图标和信息文件。

在main.jsx文件夹内，您可以找到运行应用的代码。此处的文件用作应用程序的入口点。让我们打开文件，看看我们是否能理解发生了什么：

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

哇！这里有很多。你现在不会认识到这一点（如果有的话）。以下是正在发生的事情的简要概述：

1. 我们导入自身及其同伴包。React ReactDOM
2. 我们从 App.jsx 导入 App 组件，以便我们可以将其放置（渲染）在 DOM 中。
3. 我们导入了一些 CSS 样式（你可以从 Webpack 材料中识别出这种语法）。
4. 我们通过调用 ReactDOM.createRoot 创建一个根节点，这个根节点对应 index.html 中的 root 元素。
5. 我们调用附加到 root 对象的 render 方法，括号内有一些非常有趣的语法。

可以看到创建和挂载应用这方面React和Vue的区别：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App),
}).$mount('#app')

Vue 实例是通过 new Vue() 创建的，然后使用 render 函数来指定要渲染的组件（在这里是 App 组件），最后使用 $mount 方法将应用挂载到 DOM 中的某个元素（在这里是 id 为 app 的元素）。

而在 React 中，你需要单独引入 ReactDOM，因为 React 和 ReactDOM 是分开的。

React 主要关注组件和应用的逻辑，而 ReactDOM 则处理渲染和与 DOM 的交互。

这样做的好处是，React 可以用于更多的环境，而不仅仅是浏览器。例如，React Native 使用 React 来创建组件，但是它有自己的渲染库来将这些组件渲染到原生应用中。

代码检查配置

请务必同时设置 eslint-config-prettier 来帮助保持你的 React 代码尽可能干净。

开发人员工具

随着 React 的进步，你的项目无疑会变得越来越大，包含越来越多的组件，功能级别也越来越高。

发生这种情况时，能够跟踪应用内部的移动部件（并对其进行实时更改）以了解和调试代码非常有用。为此，我们可以使用一个名为 React Developer Tools 的 Chrome 扩展程序。

我们建议尽早安装它并习惯使用它，因为它是有效 React 开发的宝贵工具。