React sin Create React App Parte I

Create React App es una muy buena alternativa cuando queremos empezar un nuevo proyecto, para la mayoría de estos, nos basta con la configuración inicial de esta herramienta. Pero si queremos una aplicación más simple, o si queremos tener una configuración más personalizada, debemos conocer cómo configurar nuestro proyecto.

Aprenderemos a configurar babel, webpack y a crear nuestros propios scripts para hacer funcionar nuestro proyecto.

Lo primero que debemos hacer es crear una nueva carpeta donde vamos a crear nuestro proyecto, he iniciar nuestra aplicación con yarn init y responder a las preguntas que se nos muestran en consola.

El anterior es un ejemplo de una configuración inicial, y la cual usamos para crear este nuevo proyecto.

Para tener en cuenta: algunas de las preguntas tienen valores asignados por defecto, los valores que vemos dentro de los paréntesis. Si queremos conservar estos valores, simplemente debemos darle Enter.

Esta configuración crea un archivo package.json con el siguiente contenido:

Primero debemos instalar, como dependencia de desarrollo, babel. Esto lo hacemos haciendo uso del siguiente comando:

Los presets son las configuraciones de babel que usaremos para transformas nuestro código. Para instalar los presets anteriores corremos el siguiente comando:

env: es una mezcla de las configuraciones de babel-preset-es2015, babel-preset-es2016, y babel-preset-es2017 juntas.

react: nos permite utilizar toda la sintaxis relacionada con react y con jsx.

Y los plugins son extensiones de la funcionalidad de babel. En este caso instalamos react-hot-reloader, que nos permite hacer cambios en nuestros componentes de react sin necesidad de recargar nuestra página. Para instalarlo corremos el comando:

Por si solo babel no hace nada, para poder hacerlo funcionar vamos a tener que configurar webpack, que actualmente está en la versión 4. Para esto instalamos webpack.

creamos un archivo llamado webpack.config.js y agregamos el siguiente contenido:

En esta configuración inicial lo que haremos es lo siguiente:

Webpack no es un tema complejo, solo debemos seguir unos simples pasos para lograr la configuración deseada. Por hoy dejaremos en este punto, continuaremos está semana en la segunda parte.

Related posts:

The purpose of this article is to shed some light on all the bootstrap grid has to offer and how to easily implement it in your next project. This article assumes you already have bootstrap added to…