4 Consejos que debes saber antes de comenzar un proyecto con React

Cristian Alarcón Pieriz
Nov 8 · 3 min read

Como React no es un framework, no tiene una estructura de directorios o librerías que nos ayuden con los distintos ámbitos importantes a la hora de desarrollar nuestras web apps, por ende nos toca definir desde como estructurar los componentes, hasta que usaremos para hacer unit tests.

Antes de comenzar a construir un proyecto usando React es necesario revisar algunos puntos importantes.

1. Definir estructura y dependencias

  • Patrón de diseño de componentes
  • Estructura de directorios
  • Librería de enrutamiento
  • Librería para manejo de store (Redux, Redux-Saga, Redux-Observable, Redux-Thunk)
  • Librerías para unit tests (Jest, react-testing-library, Enzyme)
  • Typescript o Javascript
  • Estilos (CSS, SASS, SCSS, LESS)
  • Framework de diseño (Material, Bootstrap)
  • Librería/API para hacer http requests (Axios, Fetch, Ajax)

Al principio se ve una situación algo compleja al existir tantas opciones y muchas opiniones dentro de la comunidad. Muchas de las decisiones van a depender del contexto, la dificultad del proyecto y el enfoque que se debe dar.

Es importante mencionar que no existe una única forma, o un paquete de librerías que nos asegurarán el éxito de nuestro proyecto, todo siempre va a depender de tus habilidades y expertise con tecnologías Frontend Web.

2. Patrón de diseño de contenedores y componentes

La idea es poder desarrollar nuestros componentes de forma funcional (véase conceptos de programación funcional y componentes funcionales) y que sean re-utilizables, por ende crearemos componentes contenedores/vistas (smart components) que estarán encargados de contener la lógica de la aplicación y componentes de presentación (dumb components) que muestran datos o realizan ciertos eventos que pueden ser enviados al redux store (inputs, sliders, modals, etc).

3. Estructura de directorios

Una de las principales características que ha hecho muy popular a React es su flexibilidad, por lo tanto, existen varias formas de estructurar un proyecto, por lo tanto esto siempre dependerá del alcance y definiciones del mismo.

A continuación propongo una estructura base con la que he construido algunos proyectos:

4. Seleccionar librerías o dependencias para tu proyecto

Para este punto tengo una breve historia. Hace algún tiempo me encontré en la situación de dar continuidad a un proyecto que había sido desarrollado anteriormente. Llevaba varios meses sin tener una actualización de sus dependencias y al momento que se decide migrar de yarn a npm por políticas de la empresa, me encontré con el problema de que habían muchas dependencias obsoletas o abandonadas por el creador, lo que hizo imposible migrar sin tener que cambiar muchas cosas centrales del desarrollo.

En este caso se había desarrollado utilizando una librería de server-side-rendering, que posteriormente se había migrado a otro repositorio con una implementación totalmente diferente que requería dedicar muchas horas en la migración.

Si bien React es una librería bien flexible y, nos da la libertad de integrar cualquier dependencia desarrollada por la comunidad en nuestro proyecto, es importante tener en cuenta al momento de elegir ciertos factores:

  1. Equipo de desarrollo y mantenimiento detrás del repositorio
  2. Cantidad de descargas
  3. Cantidad de estrellas
  4. Issues reportados en el repositorio
  5. Actividad de la comunidad
  6. Documentación
  7. Artículos referentes al mismo
  8. Comparar con otras similares

Estos puntos nos ayudarán a entender si nuestras dependencias tendrán vida útil durante el proceso de desarrollo y mantenimiento de nuestro proyecto, así evitar dolores fuertes en migraciones o cambios a nuevas implementaciones en funcionalidades core de nuestro proyecto.

Lectura adicional

Cristian Alarcón Pieriz

Written by

Web UI Developer (React/Angular) 👨🏻‍💻 Musician and guitar player 🎸

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade