Cómo configurar una aplicación React con Parcel

Durante mucho tiempo, Webpack fue una de las mayores barreras de entrada para alguien que deseaba aprender React. Hay muchas configuraciones estándar que pueden ser confusas, especialmente si eres nuevo en React.

Incluso en una charla que trata de mostrar lo fácil que es configurar React, puede ser muy difícil intentar aprender todos y cada uno de los pasos del proceso de configuración.

No mucho después de que React saliera de la versión beta, el equipo de Facebook creó la aplicación create-react-app. Fue un intento de hacer girar una (versión muy completa de una) aplicación React tan simple como escribir un solo comando:

npx create-react-app my-app

¡Agradable! Y honestamente, ¿esto? El método para crear una nueva aplicación React es increíble si quieres algo que tenga muchas campanas y silbidos desde el principio , y estás de acuerdo con que tu aplicación se inicie como una aplicación bastante pesada / grande.

Esa pesadez proviene de las muchas dependencias, cargadores, complementos, etc. instalados automáticamente, ya node_modulesque ocupan mucho espacio para cada aplicación. La imagen de resumen del Finder a continuación es de una de mis aplicaciones de crear-reaccionar-aplicaciones. ?

Presentando Parcel

Parcel es un "paquete de aplicaciones web ultrarrápido y sin configuración". Esto significa que maneja muchas de las cosas difíciles de empaquetar bajo el capó y le permite crear una configuración relativamente ajustada de React (o cualquier otro proyecto web que requiera empaquetar).

Entonces, veamos qué se necesita para configurar la aplicación React "Hello World" básica que muestra un h1elemento.

Paso 1: crea una nueva carpeta para tu proyecto

Suficientemente fácil. ?

Paso 2: crea tu package.jsonarchivo

En la terminal, cden la nueva carpeta y ejecutar:

npm init -y

Esto crea automáticamente el package.jsonarchivo.

Paso 3: Instale Parcel, React y ReactDOM

npm install --save-dev parcel-bundler # Shorthand version: npm i -D parcel-bundler npm install react react-dom # Shorthand version: npm i react react-dom # Note that npm will automatically save dependencies to package.json now, so there's no longer a need to do npm install --save ...

Paso 4: agregue una secuencia de comandos de "inicio" a package.json

En el package.jsonarchivo, en la sección "secuencias de comandos", agregue la siguiente secuencia de comandos de "inicio":

"start": "parcel index.html --open"

Paso 5: crea el index.htmlarchivo y agrega un par de líneas

En VS Code, puede crear un nuevo archivo llamado index.htmly usar el acceso directo emmet incorporado para crear un archivo HTML repetitivo estándar escribiendo un signo de exclamación y presionando la tecla Tab en su teclado.

Antes de continuar, debemos agregar 2 cosas:

  1. Un divmarcador de posición donde se insertará nuestra aplicación React
  2. A scriptpara leer en el archivo de entrada de JavaScript (que crearemos a continuación)

En el bodyde index.html, agregue:

Paso 6: crea el index.jsarchivo

Cree un nuevo archivo llamado index.jse ingrese su código de React básico:

// index.js import React from "react" import ReactDOM from "react-dom" ReactDOM.render(

Hello world!

, document.getElementById("root"))

Paso 7: ¡Ponlo en marcha!

¡Eso es! Ahora desde la terminal, ejecuta:

npm start

Parcel se encargará del resto y tendrás una aplicación React completamente funcional.

Conclusión

Si está interesado, tómese un tiempo para leer detenidamente la documentación de Parcel para comprender mejor todas las maravillas que conlleva el uso de Parcel, sin requerir ninguna configuración por su parte.

Parcel viene con soporte para todo tipo de extensiones de desarrollo web comunes, transpiladores, sintaxis, etc.

Aunque no es pequeño , los node_modules de una aplicación Parcel ocupan un 50% menos de espacio en su computadora:

¡Gracias, Parcel!