应用程序结构

无论大小如何，大多数 React 应用程序都将共享一个通用结构。

这是这种结构的一个例子。花点时间四处探索，看看一切是如何工作的：

import React from 'react';
import { createRoot } from 'react-dom/client';

import App from './components/App';

const root = createRoot(
  document.querySelector('#root')
);

root.render(<App />);

让我们分析这些文件。

Index

根 index.js 文件通常是将要执行的第一部代码。它负责渲染我们的 React 应用程序，将我们编写的 React 元素转换为实时 DOM 节点。

通常，在整个代码库中只会有一个地方调用 react-dom 的 createRoot 和 render 方法。尽管可以有多个应用程序根节点，在逐步从其他框架或技术栈迁移至 React 时，通常只这样做。

在这个文件中做“设置”任务是很常见的。例如，这个文件是导入全局 CSS 文件或设置任何错误日志记录服务的好地方。

因为 index.js 更像是一个设置文件而不是应用程序的活动部分，我们通常不希望在这里渲染大量的 JSX。在这里包含标题、按钮和页脚会很奇怪；那些内容在应用程序中出现，而我们现在还在设置应用程序。

除了一些提供者组件（在课程后面讨论），该文件通常只呈现单个元素： <App /> 。

App

我们的项目中经常有一个称为 App 的组件，缩写为“Application”。

这是我们项目中的“主基”React 组件，是每个其他组件的祖先组件。在 React 应用程序中选择一个随机组件，你应该能够追溯到其 App 的血统。

此组件有时会管理“核心”布局内容，如页眉和页脚。在较小的应用程序中，就像这里显示的“hello world”示例中，我们会在该组件中渲染额外的 UI，尽管当应用程序变得更大时，我们通常不会看到太多这方面的内容。

如果您使用像 React Router 这样的路由解决方案，我们的顶级路由通常包含在此文件中。

每个项目都是不同的，如何构建这个组件没有硬性规定。重要的是 App 应该向开发人员展示应用程序的结构。这是开发人员检查、了解工作原理的主要基地。

Modules

通常我们使用 ES 模块系统将我们的应用程序拆分为多个文件。

继续前进

我想分享这个关于应用程序结构的快速课程，因为在接下来的课程中我们将多次使用它！

例如，您可能会看到类似这样的内容：

import FancyButton from './FancyButton';

function App() {
  return (
    <FancyButton>
      Click me!
    </FancyButton>
  );
}

export default App;

为保持注意力集中和精简，我们没有展示 index.js ，使用 createRoot 和 render() 调用。每当未显示时，您可以假定其渲染 App 组件。

部分沙盒中还会“秘密”包含一些最小的样式。如果您对某些样式的工作方式感到好奇，您可以在浏览器开发工具中检查它们！