Creación de un proyecto React desde cero

Completado

En este módulo, hemos usado un proyecto de inicio para ponernos en marcha rápidamente. Este programa de instalación nos permitió centrarnos en React y en parte de la nueva sintaxis. Puede usar el proyecto de inicio para su propio trabajo.

Puede que desee intentar crear un proyecto desde cero. Para iniciar desde una carpeta vacía, siga los pasos de esta unidad. En los pasos se usa Snowpack, al igual que en el proyecto de inicio.

Esta unidad es opcional. Si no necesita crear su propio proyecto, continúe con la unidad siguiente.

Descripción de la estructura del proyecto

Nuestra configuración principal tiene dos carpetas principales que almacenan código:

• public
  • Contiene HTML, CSS, imágenes u otros archivos estáticos
  • Almacena los archivos index.html e index.css
• src
  • Contiene los archivos que deben representarse
  • Almacena todos los archivos .jsx

También crearemos dos archivos para configurar nuestra aplicación:

• package.jsen: contiene la lista de paquetes y scripts para nuestra aplicación
• snowpack.config.js: contiene opciones de configuración para Snowpack

Necesitamos tres paquetes principales para nuestra aplicación:

• Snowpack: se usa para representar JSX en HTML y JavaScript
• React: se usa para crear nuestros componentes
• React-DOM: se usa para montar la aplicación

Creación de la estructura inicial

En un directorio vacío, empiece por instalar los componentes necesarios mediante npm. A continuación, configure Snowpack y agregue los scripts al archivo package.json.

1. Abra una ventana de terminal o comandos. Después, ejecute los siguientes comandos para crear el directorio y el archivo package.json para npm. En Mac o Linux, use mkdir y, en Windows, use md para crear un directorio.

   # Windows
   md react-recipes && cd react-recipes
   md src
   md public
   touch package.json
   echo "{}" > package.json
   
   # Linux or macOS
   mkdir react-recipes && cd react-recipes
   mkdir src
   mkdir public
   touch package.json
   echo "{}" > package.json
   

2. Ejecute el código siguiente en la misma ventana de terminal o comandos.

   npm install --save-dev snowpack
   npm install react react-dom
   

   Nota:

   Snowpack es una dependencia de desarrollo. Es decir, no se necesita para la producción, ya que genera los archivos JavaScript y HTML necesarios durante el proceso de compilación.

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

   code .
   

Configuración de Snowpack

Una de las ventajas de una herramienta como Snowpack es que se configura automáticamente en su mayor parte. Sin embargo, es necesario indicar la estructura de carpetas del código. Para indicar la estructura de carpetas, se establecen opciones en el archivo snowpack.config.js.

1. En Visual Studio Code, cree un archivo nuevo; para ello, seleccione Archivo>Nuevo archivo.

2. Asigne al archivo el nombre snowpack.config.js.

3. En el nuevo archivo, asigne el siguiente código.

   module.exports = {
       mount: {
           'public': '/',
           'src': '/dist'
       }
   }
   

Este código indica a Snowpack que use nuestra carpeta public como la raíz de la aplicación. También establece el directorio src como ubicación virtual para los archivos JavaScript y HTML que generará.

Creación de los scripts de npm

Para admitir nuestro trabajo de desarrollo, usaremos dos scripts con Snowpack. El primer script inicia el servidor de desarrollo. Esta acción actualiza automáticamente nuestra página cuando modificamos nuestra aplicación. El segundo script se usa cuando estamos preparados para compilar todos nuestros archivos para la implementación.

1. En Visual Studio Code, abra el archivo package.json.

2. En la parte inferior del archivo, encima de la última llave (}), agregue el código siguiente. Este código crea los scripts de inicio y compilación.

   {
       "scripts": {
           "start": "snowpack dev",
           "build": "snowpack build"
       }
   }
   

   Ahora, todo el archivo debería tener un aspecto similar al siguiente código.

   {
     "devDependencies": {
       "snowpack": "^2.18.5"
     },
     "dependencies": {
       "react": "^17.0.1",
       "react-dom": "^17.0.1"
     },
     "scripts": {
         "start": "snowpack dev",
         "build": "snowpack build"
     }
   }
   

3. Guarde todos los archivos; para ello, seleccione Archivo>Guardar todo.

Ahora, ya ha configurado el proyecto de inicio. Puede agregar los archivos index.html, App.jsx, entre otros, tal como hizo en las unidades anteriores.