Criar um projeto inicial

Concluído

Usaremos um projeto inicial para podermos começar a escrever código rapidamente. O projeto inicial contém a estrutura mínima necessária para começar a desenvolver um aplicativo do React usando o Snowpack:

• Dois arquivos
• Dois diretórios vazios

Clonar o repositório e instalar pacotes

1. Abra um terminal ou uma janela de comando e execute os seguintes comandos:

   # 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. Instale os pacotes necessários usando o seguinte comando no mesmo terminal ou janela:

   npm install
   

3. Abra o diretório no Visual Studio Code executando o seguinte comando:

   code .
   

Explorar o projeto inicial

Vamos explorar as pastas e os arquivos do projeto inicial:

• package.json contém a lista de pacotes e scripts:
  • Pacotes:
    • React para React
    • ReactDOM para montar nosso aplicativo dentro do navegador
  • Scripts:
    • iniciar para executar o servidor de desenvolvimento do Snowpack:
      • Ele cria virtualmente todos os arquivos JavaScript e HTML.
      • Ele hospeda e reinicia automaticamente o servidor conforme os arquivos são alterados.
    • build para gerar arquivos de produção para implantação
• O snowpack.config.json contém a configuração principal para Snowpack.
  • mount cria dois diretórios virtuais para o servidor Snowpack.
    • public contém todos os arquivos estáticos (como HTML, CSS e imagens). Ele é hospedado como /.
    • src contém todos os arquivos JSX e os arquivos React associados. Ele é hospedado como dist.
• public contém todos os arquivos estáticos.
• src contém todos os arquivos React.