Create a starter project

• 3 minutes

We'll use a starter project so we can begin writing code quickly. The starter contains the minimum structure we need to start developing a React application by using Snowpack:

• Two files
• Two empty directories

Clone the repository and install packages

1. Open a terminal or command window and run the following commands:

   # 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. Install the required packages by using the following command in the same terminal or command window:

   npm install
   

3. Open the directory in Visual Studio Code by running the following command:

   code .
   

Explore the starter

Let's explore the folders and files in the starter project:

• package.json contains the list of packages and scripts:
  • Packages:
    • React for React
    • ReactDOM to mount our application inside the browser
  • Scripts:
    • start to run the development server from Snowpack:
      • It virtually builds all JavaScript and HTML files.
      • It hosts and automatically restarts the server as files are changed.
    • build to generate production files for deployment
• snowpack.config.js contains the core configuration for Snowpack.
  • mount creates two virtual directories for our Snowpack server.
    • public contains all static files (such as HTML, CSS, and images). It's hosted as /.
    • src contains all JSX files and associated React files. It's hosted as dist.
• public contains all static files.
• src contains all React files.