从头开始创建 React 项目

7 分钟

在此模块中，我们使用了初学者项目，以便快速掌握并运用新技能。通过这种设置，我们可以重点关注 React 和一些新语法。你可以根据需要使用初学者项目完成自己的工作。

你有可能会想要从头开始生成项目。若要从空文件夹开始生成，请按照此单元中的步骤操作。如同在初学者项目中的操作一样，这些步骤也使用 Snowpack。

此单位是可选单元。如果不需要创建自己的项目，请继续学习下一个单元。

了解项目结构

核心设置包含两个用于存储代码的主文件夹：

public
- 包含任何 HTML、CSS、图像或其他静态文件
- 存储 index.html 和 index.css 文件
src
- 包含需要呈现的任何文件
- 存储所有 .jsx 文件

我们还将创建两个文件，用于配置应用程序：

package.json：包含用于应用程序的包和脚本的列表
snowpack.config.js：包含 Snowpack 的配置选项

我们的应用程序需要三个主程序包：

Snowpack：用于将 JSX 呈现为 HTML 和 JavaScript
React：用于创建组件
React-DOM：用于载入应用程序

创建初始结构

在空目录中，首先使用 npm 安装必要的组件。然后配置 Snowpack 并将脚本添加到 package.json 文件。

打开终端或命令窗口。然后运行以下命令，为 npm 创建目录和 package.json。在 Mac 或 Linux 上，使用 mkdir，在 Windows 上，使用 md 创建目录。

# Windows
md react-recipes && cd react-recipes
md src
md public
touch package.json
echo "{}" > package.json

# Linux or macOS
mkdir react-recipes && cd react-recipes
mkdir src
mkdir public
touch package.json
echo "{}" > package.json

在同样的终端或命令窗口中运行以下代码。
```
npm install --save-dev snowpack
npm install react react-dom
```
注意

Snowpack 是一个开发依赖项。也就是说，它不是生产所必需的，它用于在生成过程中生成所需的 JavaScript 和 HTML 文件。
通过运行以下命令在 Visual Studio Code 中打开目录。
```
code .
```

设置 Snowpack

Snowpack 等工具大多数时候会自行完成配置，这是它们的优点之一。不过，我们需要显示代码的文件夹结构。为显示文件夹结构，我们将设置 snowpack.config.js 文件中的选项。

在 Visual Studio Code 中，选择“文件”>“新建文件”，以创建一个新文件。
将该文件命名为 snowpack.config.js。

将以下代码添加到此新文件。

module.exports = {
    mount: {
        'public': '/',
        'src': '/dist'
    }
}

此代码将指示 Snowpack 使用 public 文件夹作为应用程序的根。它还将 src 目录设置为它将生成的 JavaScript 文件和 HTML 文件所在的虚拟位置。

创建 npm 脚本

我们将两个脚本与 Snowpack 一起使用，以便支持开发工作。第一个脚本用于启动开发服务器。应用程序发生修改时，此操作会自动刷新页面。当我们准备好生成部署所需的所有文件时，将用到第二个脚本。

在 Visual Studio Code 中，打开 package.json 文件。

在文件底部的最后一个花括号 (}) 上方，添加以下代码。此代码创建启动和生成脚本。

{
    "scripts": {
        "start": "snowpack dev",
        "build": "snowpack build"
    }
}

整个文件现在应如以下代码所示。

{
  "devDependencies": {
    "snowpack": "^2.18.5"
  },
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "scripts": {
      "start": "snowpack dev",
      "build": "snowpack build"
  }
}

选择“文件”>“全部保存”，以保存所有文件。

现在，你已完成设置初学者项目！可以添加 index.html、App.jsx 和其他文件，就像前面单元中的操作方法一样。

从头开始创建 React 项目

了解项目结构

创建初始结构

设置 Snowpack

创建 npm 脚本

反馈