julio 30, 2020

Cómo configurar una aplicación React con Parcel

La figura de Webpack fue una de las barreras de entrada para los que deseaban aprender React, por lo que explicaremos cómo configurar una aplicación React con Parcel y así evitar confusiones.

Después de que React saliera por primera vez en su versión beta, el equipo de Facebook creó la aplicación create-react, que fue un intento de girar una aplicación React, la cual era una versión cargada a algo tan sencillo como escribir un comando:

npx create-react-app my-app

El método de crear una la aplicación React es favorable y brinda ciertas ventajas desde el primer momento de iniciar, además de ser una app larga y pesada.

Esa pesadez proviene de las muchas dependencias, cargadores, complementos, etc. instalados de forma automática como node_modules que ocupan mucho espacio para cada aplicación.

Presentación de Parcel

Parcel es un “paquete de aplicaciones web rápido y de configuración desde cero”, lo que implica que maneja una gran cantidad de material de agrupamiento y permite crear una configuración relativamente ágil de React (o cualquier otro proyecto web que necesite agrupación).

Para configurar la aplicación React “Hello World” se requiere realizar los siguientes pasos.

1 crear una carpeta para el proyecto

2 crear el archivo package.json

En la nueva carpeta cd hay que ejecutar:

npm init -y

Esto creará el archivo package.json de forma automática.

3. Instalar 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 …

4. Agrega un script “inicio” a package.json

En el archivo package.json, en la sección “secuencias de comandos”, se debe agregar la siguiente secuencia “inicio”:

“start”: “parcel index.html –open”

5. Crear el archivo index.html y agregar un par de líneas

En VS Code, se puede crear un nuevo archivo llamado index.html y usar el acceso directo emmet incorporado para generar un archivo HTML estándar repetitivo escribiendo un signo de exclamación y pulsando la tecla Tab.

Archivo index.html
Archivo index.html
Visualización
Visualización

Para continuar necesitamos agregar dos cosas:

  • Un marcador de posición div en el que se insertará la aplicación React
  • Un script para leer en el archivo de entrada de JavaScript (como se indica a continuación)

En el body de index.html, se tiene que agregar:

<body>

    <div id=”root”></div>

    <script src=”./index.js”></script>

</body>

6. Crear el archivo index.js

Generar un nuevo archivo llamado index.js e ingresar elcódigo de reacción básico:

// index.js

import React from “react”

import ReactDOM from “react-dom”

ReactDOM.render(<h1>Hello world!</h1>, document.getElementById(“root”))

7. Comenzar desde la terminal, ejecutando:

npm start

Parcel se encargará del resto, y la aplicación React estará lista para funcionar.

Parcel cuenta con soporte para todo tipo de extensiones de desarrollo web, transpiladores, sintaxis, etc. Aunque no es pequeño , los node_modules de una aplicación Parcel ocupan un 50% menos de espacio una computadora promedio con un 71.3 MB, 528 items.

Leíste: Cómo configurar una aplicación React con Parcel, te recomendamos: Cómo configurar HTTPS con create-react-app

Te invitamos a que nos sigas en nuestras redes sociales: Facebook, Twitter, Instagram y Youtube con el perfil: @tortugacode