创建初学者项目

已完成

我们将使用初学者项目，这样就可以快速开始编写代码。 初学者项目包含开始使用 Snowpack 开发 React 应用程序所需的最小结构：

• 两个文件
• 两个空目录

克隆存储库并安装包

1. 打开终端或命令窗口，并运行以下命令：

   # Linux or macOS
   git clone https://github.com/MicrosoftDocs/mslearn-react
   cd mslearn-react/code/0-starter
   
   # Windows
   git clone https://github.com/MicrosoftDocs/mslearn-react
   cd mslearn-react/code/0-starter
   

2. 在同一个终端或命令窗口中使用以下命令，以安装所需的包：

   npm install
   

3. 通过运行以下命令在 Visual Studio Code 中打开目录：

   code .
   

浏览初学者项目

我们来浏览一下初学者项目中的文件夹和文件：

• package.json 包含包和脚本的列表：
  • 包：
    • React 包表示 React
    • ReactDOM 包用于将应用程序载入浏览器
  • 脚本：
    • start 用于从 Snowpack 运行开发服务器：
      • 实际上，它会生成所有 JavaScript 和 HTML 文件。
      • 当文件更改时，它将承载并自动重启服务器。
    • build 用于生成部署所需的生产文件
• snowpack.config.js 包含 Snowpack 的核心配置。
  • mount 将为 Snowpack 服务器创建两个虚拟目录。
    • public 包含所有静态文件（HTML、CSS 和图像等）。 它托管为 /。
    • src 包含所有 JSX 文件和关联的 React 文件。 它托管为 dist。
• public 包含所有静态文件。
• src 包含所有 React 文件。