Cómo desarrollar un proyecto React profesional

Cómo desarrollar un proyecto React profesional

Cuando empiezas una nueva aplicación de React te puedes preguntar cómo configurarla de forma profesional. ¿Qué herramientas deberías utilizar? ¿Qué bibliotecas necesitas desde el principio?


Basado en la pila tecnológica más popular de React este artículo le guiará a través de la configuración de una nueva aplicación utilizando


  • Next.js
  • Typescript
  • ESLint
  • Prettier
  • styled-components
  • Cypress
  • Storybook

Next.js y TypeScript

Next.js es el framework de React más utilizado. Tiene un montón de características interesantes como el renderizado del lado del servidor que son importantes para muchas aplicaciones profesionales. Muchos desarrolladores tienden a usarlo para cualquier proyecto nuevo de React.


Este comando crea una nueva aplicación Next.js usando TypeScript. (Siéntete libre de eliminar la opción --typescript si ya tienes demasiado que aprender).


Se le pedirá un nombre de proyecto y el gestor de paquetes de su elección. Yo simplemente elegí npm.


NOTA: 


Si planeas alojar el proyecto en GitHub es posible que quieras renombrar la rama master a main con este comando: git branch -m master main


ESLint

La aplicación Next.js ya está configurada con ESLint, que se utiliza para detectar errores mediante el análisis estático del código.


Para mi gusto, las reglas por defecto que vienen con Next.js no son lo suficientemente estrictas. Por ejemplo, las variables no utilizadas no causan un error. Un Conjunto de reglas estándar que se encuentra en los documentos de ESLint es eslint:recommended Podemos ampliarlo en el eslintrc.json archivo de configuración.


Prettier

Prettier se utiliza para formatear automáticamente su código de acuerdo con un estándar. Eso hace que su código sea más legible y le ahorra mucho esfuerzo manual.


Puedes usar un plugin de Prettier para tu IDE. Yo uso VS Code y su extensión más bonita 


Para integrar Prettier con ESLint se puede utilizar el programa puede utilizar el eslint-config-prettier y añadelo a tu confi eslintrc.json. De esta manera no se producen conflictos entre Prettier y ESLint.


La aplicación Next.js no utiliza el formato Prettier por defecto. Ejecute npx prettier --write para formatear todos los archivos.


styled-components

styled-components es una biblioteca muy popular para escribir CSS personalizado. Next.js no lo soporta de forma inmediata, pero este repo oficial de ejemplo nos muestra cómo configurarlo. Primero, instalamos la biblioteca.


Luego añadimos styledComponents: true a la opción del compilador en el archivo next.config.js.


Eso es todo. Para utilizar los estilos globales o el ThemeProvider es necesario editar el archivo pages/_app.tsx como se muestra aquí.


Cypress

Cypress es una herramienta que se utiliza comúnmente para escribir pruebas de extremo a extremo (lo que significa que prueba todo el sistema, desde el frontend hasta la base de datos, al igual que un usuario real).


Para la configuración, los documentos de Next.js son de nuevo muy útiles. Primero, instalamos Cypress.


Entonces añadimos "cypress": "cypress open" a la sección de scripts en nuestro archivo package.json.


Finalmente, ejecuta npm run cypress para inicializar el proyecto. Esto crea algunas carpetas y pruebas de demostración en su repositorio. A continuación, se abre la interfaz de usuario de Cypress donde puedes ejecutar las pruebas de demostración.


Cuando abra los archivos de prueba se dará cuenta de que ESLint se queja de que las funciones globales como describe o it no existen. Para eliminar estos errores podemos instalar un plugin de ESLint y ajustar el archivo de configuración eslintsrc.json.


Storybook

Storybook es una herramienta muy utilizada para documentar y probar visualmente los componentes de la interfaz de usuario. Según la documentación, primero tenemos que inicializar el proyecto.


A continuación, ejecute Storybook. Se abrirá una nueva pestaña del navegador en la que podrá jugar con algunos componentes de demostración.


Reactions

4

0

0

0

Access hereTo be able to comment

TheWhiteCode.com is not the creator or owner of the images shown, references are: