Iniciar React con magia de Parcel

Iniciar un nuevo proyecto, no es algo que hagamos todos los d铆as, pero siempre tiene una emoci贸n especial. Siempre hay algo nuevo que queremos probar en cada init. Una de las barreras para comenzar a trabajar con React puede ser la configuraci贸n que requiere webpack, para eso se cre贸 el famoso m贸dulo que nos facilita la vida create-react-app que en su versi贸n 2 vino con muchas mejoras muy interesantes, gracias a la magia de los react-scripts podemos tener webpack, babel y todo lo que necesita React funcionando en un par de minutos.

Pero en este universo de los bundler o empaquetadores, tenemos un aliado conocido como Parcel que nos facilita muchas configuraciones de una forma muy ligera y casi m谩gica, para comenzar un proyecto de React con Parecel, solo necesitas unos pocos pasos, como veremos ahora:

Base

Abre una terminal y ejecuta los siguientes comandos

mkdir react-parcel-app-demo cd react-parcel-app-demo npm init -y npm i react react-dom npm i -D parcel-bundler babel-preset-react babel-preset-env mkdir src touch src/index.html touch src/index.js

Hello React

Ahora con un poco de c贸digo puedes crear el "Hola Mundo" en React

  • En el archivo index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>React Parcel Demo</title> </head> <body> <div id="app"></div> <script src="./index.js"></script> </body> </html>
  • En el archivo index.js
import React from 'react' import { render } from 'react-dom' const App = () => { return ( <div> <h1>Hello React from Parcel</h1> </div> ) } render(<App />, document.getElementById('app'))

Con estos dos archivos listos solo necesitas ejecutar una l铆nea m谩s para ver la aplicaci贸n corriendo: parcel -p 3001 ./src/index.html. Tambi茅n puedes agregar a tu archivo package.json en la secci贸n de scripts las siguientes l铆neas:

"start": "parcel -p 3001 ./src/index.html", "build": "parcel build ./src/index.html/"

De esta forma puedes ejecutar tu aplicaci贸n con npm start y visualizarla en el navegador ingresando a la url http://localhost:3001.

Ual脿, tu aplicaci贸n deber铆a estar diciendo Hello React from Parcel

Ahora SASS

Uno de los mayores inconvenientes de create-react-app llega a la hora de querer implementar transpiladores de estilos como Sass, pero Parcel lo hace por ti. De la siguiente manera:

mkdir src/sass touch src/sass/main.scss
  • En el archivo sass/main.scss
1*, 2*::after 3,*::before { 4 margin: 0; 5 padding: 0; 6 box-sizing: inherit; 7} 8html { 9 font-size: 62.5%; 10} 11body { 12 background-color: #ecf0f1; 13 color: #d35400; 14 font-family: sans-serif; 15 font-size: 16px; 16 line-height: 1.7rem; 17 padding: 3rem; 18} 19h1 { 20 text-align: center; 21 margin-top: 5rem; 22 font-size: 6rem; 23}

Ahora importamos el archivo main.scss, en index.js agrendo lo siquiente:

import./sass/main.scss鈥

Parcel sabr谩 que necesitamos el m贸dulo que interpreta los archivos de estilo SASS y lo usar谩 en la marcha para leer nuestro c贸digo sin necesidad de hacer ninguna configuraci贸n adicional.

Debes detener el servidor de desarrollo y volver a iniciarlo para que cargue el m贸dulo que necesita.

Y por arte de Parcel tendr茅mos los estilos cargados en nuestra aplicaci贸n.

Puedes encontrar el c贸digo resultante de este post en github aqu铆.

Actualizado 24/10/2019 a las 00:55