不同的构建方式
在你的项目中开始使用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:
[email protected]
Ok to proceed? (y)执行命令后，它应输出后续步骤供您操作：
cd my-first-react-app
npm install
npm run dev如果一切都按计划进行，请前往 ，在那里您将看到以下页面：localhost:5173
深入研究
其中包含一些有用的信息，您现在应该花时间浏览一下。
package.jsonpackage-lock.json.gitignoreREADME.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>
);哇！这里有很多。你现在不会认识到这一点（如果有的话）。以下是正在发生的事情的简要概述：
- 我们导入自身及其同伴包。
ReactReactDOM - 我们从
App.jsx导入App组件，以便我们可以将其放置（渲染）在DOM中。 - 我们导入了一些
CSS样式（你可以从Webpack材料中识别出这种语法）。 - 我们通过调用
ReactDOM.createRoot创建一个根节点，这个根节点对应index.html中的root元素。 - 我们调用附加到
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 开发的宝贵工具。
