创建初学者项目

已完成

我们将使用初学者项目,这样就可以快速开始编写代码。 初学者项目包含开始使用 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 文件。