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.
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
