Un tutorial completo de React Boilerplate: de cero a héroe

Cuando estamos comenzando a aprender React, para hacer nuestros proyectos necesitamos hacer un modelo desde cero o usar algunos proporcionados por la comunidad. Casi todas las veces es la aplicación create-react-app la que usamos para crear una aplicación sin configuración de compilación. O simplemente hacemos nuestra propia plantilla desde cero.

A partir de esto, me viene a la mente: ¿por qué no hacer un boilerplate con todas las dependencias que siempre uso y dejarlo listo? La comunidad también pensaba de esa manera, por lo que ahora tenemos varios modelos repetidos creados por la comunidad. Algunos son más complejos que otros, pero siempre tienen el mismo objetivo de ahorrar el máximo de tiempo.

Este artículo le enseñará cómo puede construir su propia plantilla desde cero con las principales dependencias utilizadas en la comunidad de React hoy. Usaremos algunas de las características modernas más comunes en estos días y, desde allí, puede personalizarlas de la forma que desee.

¡El texto estándar creado por este artículo estará disponible aquí!

Empezando

En primer lugar, vamos a crear una carpeta para comenzar nuestro modelo. Puedes nombrarlo como quieras, yo nombraré el mío react-bolt .

Abra su terminal y créelo así:

mkdir react-bolt

Ahora, vaya a su carpeta creada y escriba el siguiente comando:

npm init -y

NPM creará un package.jsonarchivo para usted, y todas las dependencias que instaló y sus comandos estarán allí.

Ahora, vamos a crear la estructura de carpetas básica para nuestra plantilla. Va a ser así por ahora:

react-bolt |--config |--src |--tests

Webpack

Webpack es el paquete de módulos más famoso para aplicaciones JavaScript en la actualidad. Básicamente, agrupa todo su código y genera uno o más paquetes. Puedes aprender más acerca de esto aquí.

En este texto modelo lo usaremos, así que instale todas estas dependencias:

npm install --save-dev webpack webpack-cli webpack-dev-server webpack-merge html-webpack-plugin clean-webpack-plugin img-loader url-loader file-loader 

Ahora en nuestra configcarpeta, vamos a crear otra carpeta llamada webpack, luego dentro de esa webpackcarpeta crearemos 5 archivos.

Cree un archivo llamado paths.js. Dentro de ese archivo estará el directorio de destino para todos sus archivos de salida.

Dentro de él, ponga todo este código:

Ahora, cree otro archivo llamado rules.jsy coloque el siguiente código allí:

Después de eso, crearemos 3 archivos más:

webpack.common.babel.js

webpack.dev.babel.js

webpack.prod.babel.js

Básicamente, en nuestro webpack.common.babel.jsarchivo, configuramos nuestra configuración de entrada y salida e incluimos también los complementos necesarios. En el webpack.dev.babel.jsarchivo, hemos configurado el modo de desarrollo. Y en nuestro webpack.prod.babel.jsarchivo, hemos configurado el modo de producción.

Después de eso, en nuestra carpeta raíz, crearemos el último archivo de paquete web llamado webpack.config.jsy pondremos el siguiente código:

Nuestra configuración de paquete web está lista, así que ahora vamos a trabajar en otras partes de la plantilla con Babel, ESLint, Prettier, etc.

Babel

Creo que casi todos los que trabajan con React probablemente hayan oído hablar de Babel y de cómo este sencillo transpilador ayuda a nuestras vidas. Si no sabe lo que es, Babel es básicamente un transpilador que convierte su código JavaScript en un antiguo JavaScript ES5 simple que se puede ejecutar en cualquier navegador.

Vamos a utilizar un montón de complementos de Babel, así que en nuestra carpeta raíz, instale:

npm install --save-dev @babel/core @babe/cli @babel/node @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread @babel/plugin-syntax-dynamic-import @babel/plugin-syntax-import-meta @babel/plugin-transform-async-to-generator @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react @babel/register @babel/runtime babel-eslint babel-jest babel-loader [email protected]

Después de esto, crearemos un archivo en nuestra carpeta raíz llamado .babelrcy dentro de ese archivo, vamos a poner el siguiente código:

Ahora nuestro proyecto está compilado por Babel y podemos usar la sintaxis de JavaScript de próxima generación sin ningún problema.

ESLint

La herramienta más utilizada para proyectos de linting en la actualidad es ESLint. Es realmente útil encontrar ciertas clases de errores, como los relacionados con el alcance de la variable, la asignación a variables no declaradas, etc.

Primero, instale las siguientes dependencias:

npm install --save-dev eslint eslint-config-airbnb eslint-config-prettier eslint-loader eslint-plugin-babel eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react 

Luego, en nuestra carpeta raíz, cree un archivo llamado .eslintrc y coloque el siguiente código allí:

Más bonita

Prettier es básicamente un formateador de código. Analiza su código y lo reimprime con sus propias reglas que toman en cuenta la longitud máxima de línea, envolviendo el código cuando es necesario.

Solo necesitas instalarlo:

npm install --save-dev prettier

Y en nuestra carpeta raíz, crea un archivo llamado .prettierrc y coloca el siguiente código allí:

Reaccionar

React es una biblioteca de aplicaciones JavaScript de código abierto para crear interfaces de usuario. Fue desarrollado por Facebook y tiene una gran comunidad detrás de él. Si está leyendo este artículo, supongo que ya conoce React, pero si desea obtener más información al respecto, puede leer aquí.

Vamos a instalar las siguientes dependencias:

npm install --save react react-dom cross-env

Y dentro de nuestra srccarpeta, crearemos un archivo HTML simple index.htmly pondremos el siguiente código:

After that, we’re going to create a simple React project. Inside our src folder, create a index.js file like this:

Inside our src folder we’re going to have the following structure:

src |--actions |--components |--reducers |--reducers |--store

Create a file called App.js inside the components folder, and put in the following code:

Redux

Redux makes it easy to manage the state of your application. Another way of looking at this is that it helps you manage the data you display and how you respond to user actions. These days a lot of people prefer other options like MobX or just the setState itself, but I’m gonna stick with Redux for this boilerplate.

First, we’re going to install some dependencies:

npm install --save redux react-redux redux-thunk

Then, we’re going to create our Redux store, and put some state there. In our store folder, create an index.js file and put that following code there:

Now, inside our reducers folder create an index.js and put the following code:

Last, we’re gonna to our index.js in our src folder, and wrap the code with the /> and pas s our store as props to make it available to our application.

It’s going to be like this:

All done. Our Redux store is configured and ready to go.

React Router

React Router is the standard routing library for React. Basically, itkeeps your UI in sync with the URL. We’re gonna use it in our boilerplate, so install it:

npm install --save react-router-dom

After that, go to our index.js in our src folder and wrap all the code there with the

r>.

Our index.js in our src folder it’s going to end up like this:

Styled Components

Styled Components makes CSS easy for everyone, as it helps you organize your React project. Its objective is to write more small and reusable components. We’re gonna use it, and if you want to learn more about it, read up here.

First, install it:

npm install --save styled-components

Then, in our App.js file inside our components folder, we’re going to create a simple title using Styled Components. Our title is going to be like this:

And inside our file, we need to import styled components, so our file is going to end up like this:

Jest & React Testing Library

Jest is an open-source JavaScript testing library from Facebook. It makes it easy to test your application, and gives us a lot of information about what is giving the right output and what’s not. React Testing Library is a very light-weight solution for testing React components. Basically, this library is a replacement for Enzyme.

Every application needs some kind of tests. I’m not gonna write tests in this article but I’m gonna show you how you can configure these tools to start testing your applications.

First, we’re gonna install both:

npm install --save-dev jest jest-dom react-testing-library

After that, go to our package.json and put the following after all:

Then, go to our config folder, and inside it created another folder called tests and inside that folder, create 2 files.

First, create a file called jest.config.js and put in the following code:

Then, create a file called rtl.setup.js and put in the following code:

All done. Our boilerplate is ready to go and you can use it now.

Now go to our file package.json and put in the following code:

Now, if you run the command npm start and go to localhost:8080, we should see our application working fine!

If you want to see my final code, the boilerplate created by this article is available here!

I have some ideas for some features that I’d love to include in the boilerplate, so please feel free to contribute!

? Follow me on Twitter!

Follow me on GitHub!

I’m looking for a remote opportunity, so if have any I’d love to hear about it, so please contact me!