Creación de un proyecto de inicio

Completado

Usaremos un proyecto de inicio para que podamos empezar a escribir código rápidamente. El proyecto de inicio contiene la estructura mínima que necesitamos para empezar a desarrollar una aplicación React con Snowpack:

  • Dos archivos
  • Dos directorios vacíos

Clonación del repositorio e instalación de paquetes

  1. Abra una ventana de terminal o comandos y ejecute los siguientes 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 los paquetes necesarios mediante el comando siguiente en la misma ventana de terminal o comandos:

    npm install
    
  3. Abra el directorio en Visual Studio Code mediante la ejecución de este comando:

    code .
    

Exploración del proyecto de inicio

Vamos a examinar las carpetas y los archivos del proyecto de inicio:

  • package.jsen contiene la lista de paquetes y scripts:
    • Paquetes:
      • React para React
      • ReactDOM para montar la aplicación en el explorador
    • Scripts:
      • start para ejecutar el servidor de desarrollo desde Snowpack:
        • Compila prácticamente todos los archivos JavaScript y HTML.
        • Hospeda y reinicia automáticamente el servidor a medida que se modifican los archivos.
      • build para generar archivos de producción para la implementación
  • snowpack.config.js contiene la configuración básica de Snowpack.
    • mount crea dos directorios virtuales para el servidor Snowpack.
      • public contiene todos los archivos estáticos (como HTML, CSS e imágenes). Se hospeda como /.
      • src contiene todos los archivos JSX y los archivos de React asociados. Se hospeda como dist.
  • public contiene todos los archivos estáticos.
  • src contiene todos los archivos de React.