Analicemos algunas herramientas excelentes que pueden hacer que los desarrolladores de React sean m谩s productivos y mejorar la calidad de su trabajo.
Por lo general, cuando comienzo un nuevo proyecto, uso mi propia plantilla para las herramientas que agregu茅 a esta lista. Tambi茅n trabajo con otras herramientas como Material UI. Los estudi茅, cre茅 varias aplicaciones con su ayuda e implement茅 un par de peque帽os proyectos, luego de lo cual decid铆 compartir los resultados.
As铆 que echemos un vistazo a la lista final.
ESLint
ESLint tiene mucho que cambiar para cualquier desarrollador de JavaScript, incluidos los fan谩ticos de React. El servicio ofrece algoritmos inteligentes que analizan r谩pidamente el c贸digo en busca de posibles errores.
Adem谩s, le permite solucionar autom谩ticamente los problemas encontrados sin cambios de sintaxis.
Para comenzar, recomendar铆a usar la configuraci贸n sugerida por los desarrolladores de Airbnb. Contiene:
- Soporte incorporado para la biblioteca React (por ejemplo, soporte para reglas para usar hooks).
- C茅ntrese en las mejores pr谩cticas.
ESLint es imprescindible para cualquier proyecto, y la configuraci贸n de Airbnb es una de mis favoritas. Le agregu茅 algo, pero queda el 90% de la configuraci贸n inicial.
Poco
Bit proporciona algo que los desarrolladores de React necesitan como plataforma de colaboraci贸n. Permite a los equipos trabajar juntos en componentes individuales.
Es una utilidad de l铆nea de comandos que le permite escribir c贸digo reutilizable. Bit es completamente de c贸digo abierto y esta es una de las razones de su popularidad.
La mayor parte de la funcionalidad est谩 relacionada con la creaci贸n de componentes at贸micos, por lo que se pueden compartir f谩cilmente con otros desarrolladores. Adem谩s, tambi茅n existe la posibilidad de verificar las dependencias de los componentes, prob谩ndolos por separado del proyecto principal.
Crear aplicaci贸n React
Como desarrollador de React, sabes muy bien cu谩nto tiempo lleva iniciar un nuevo proyecto. Para ahorrar tiempo, los desarrolladores de Facebook sugirieron la aplicaci贸n Create React .
Este es un "constructor" inicial que le permite concentrarse en desarrollar, no personalizar, React. Todo lo que necesita hacer es ejecutar el comando npx create-react-app my-app. Entonces tienes una aplicaci贸n completamente configurada para el proyecto.
Create React App aumentar谩 enormemente su eficiencia si trabaja como aut贸nomo de React para varios clientes al mismo tiempo.
Reaccionar Cosmos
React Cosmos es un entorno de desarrollo dise帽ado para crear interfaces de usuario escalables y de alta calidad.
El servicio hace posible participar f谩cilmente en la creaci贸n de prototipos y pruebas de componentes de interfaz individuales. Adem谩s, puede iterar con 茅l sin temor a romper su c贸digo. Facilita el proceso de depuraci贸n al aislar los componentes.
React Cosmos se utiliza mejor para trabajar con aplicaciones de nivel empresarial. La divisi贸n de un proyecto en componentes peque帽os y reutilizables hace posible escribir c贸digo de calidad que es f谩cil de mantener.
React Toolbox
Al comienzo de este art铆culo, mencion茅 que uso Material UI para la mayor铆a de los proyectos. Hay una raz贸n para eso: me encanta Material Design, y Material UI es lo que me queda completamente.
Pero tambi茅n hay alternativas. Uno de ellos es React Toolbox . Esta es una colecci贸n de componentes de uso com煤n desarrollados con Material Design. Utiliza m贸dulos CSS para mayor flexibilidad.
En el momento de escribir este art铆culo, React Toolbox incluye 28 componentes. Algunos de ellos son Application Drawer, Date Picker, Switcher y Snack Bar.
Reaccionar Bootstrap
El sitio web optimizado para dispositivos m贸viles es un est谩ndar moderno. Los usuarios esperan que su sitio funcione bien en cualquier dispositivo. Los sitios con dise帽o receptivo hacen que incluso los motores de b煤squeda se destaquen.
Muchos desarrolladores utilizan Bootstrap para crear sitios web adaptables y escalables con dise帽os profesionales. El problema es que Bootstrap viene con componentes nativos que no est谩n integrados con React.
La soluci贸n es el paquete React Bootstrap de c贸digo abierto . Todos sus componentes Bootstrap se han modificado espec铆ficamente para los desarrolladores de React.
Reaccionar tirachinas
驴Quiere acelerar el desarrollo de su aplicaci贸n React? Intenta evaluar React Slingshot . Es una plantilla que combina React, Redux y Babel.
La caracter铆stica m谩s importante de Slingshot que lo distingue de otras herramientas es su r谩pida respuesta. Esta funci贸n automatiza el proceso de formaci贸n de pelusa, pruebas unitarias y recarga en caliente cada vez que se actualiza la aplicaci贸n. De esta forma, puede centrarse en la l贸gica empresarial en lugar de en tareas superfluas.
Reactide
Dicen que un desarrollador es tan bueno como su editor. Quiz谩s esto no sea del todo cierto, pero el editor es muy 煤til en nuestro trabajo. Personalmente, soy un gran admirador de JetBrains y WebStorm. Mi elecci贸n es IDE, pero pruebo alternativas de vez en cuando.
Por ejemplo, encontr茅 que Reactide es un IDE para React. Me sorprendi贸 mucho este hallazgo y prob茅 la herramienta.
Result贸 que tiene caracter铆sticas interesantes. Por ejemplo, puede representar los componentes de su proyecto directamente en el IDE. Tambi茅n hay un servidor Node.js incorporado que est谩 integrado con el simulador del navegador.
Una herramienta interesante, aunque no creo que la cambie por completo. Pero esta es una buena opci贸n para aquellos que est谩n trabajando con React o aprendiendo y no quieren tener problemas incluso durante la fase de configuraci贸n.
Biblioteca de pruebas de reacci贸n
"隆Pruebas primero!" - lo que repito constantemente.
En otras palabras, es importante tener un conjunto de herramientas de prueba. React Testing Library es una peque帽a biblioteca. Le permite probar su c贸digo React sin demasiados problemas. La biblioteca es f谩cil de usar y agrega capacidades a las bibliotecas est谩ndar como react-dom y react-dom / test-utils.
Una excelente documentaci贸n con algunos buenos ejemplos lo pondr谩 en funcionamiento r谩pidamente.
Libro de cuentos
Storybook proporciona un entorno de desarrollo interactivo en el que puede crear nuevos componentes, probarlos o seleccionar componentes existentes de una biblioteca.
Storybook es lo suficientemente flexible como para funcionar con cualquier marco de JavaScript importante. Por ejemplo, React, Vue.js, Angular, Svelte, Marko e incluso HTML sin formato.
Lo mejor de Storybook es que viene con varios complementos. Aqu铆 hay una serie de adiciones que encuentro interesantes:
- google-analytics (agrega compatibilidad con Google Analytics para componentes);
- broma ;
- storyshots (comprobaci贸n de componentes mediante instant谩neas);
- viewport (cambiar el marcado para componentes receptivos)
Espero que aprecies esta lista. Si utiliza otras herramientas interesantes que no se mencionan en el texto, 隆escriba sobre ellas en los comentarios!