👻 📈 ↔️ Actualización con las mejores herramientas de desarrollo web React 🕴️ 🌐 🕴️

Puede ser más valioso si aprende las mejores herramientas para desarrollar aplicaciones web con React.

El empleador rechaza la mayoría de los currículums simplemente ejecutándolos en diagonal. Esto es un poco desalentador, ¿verdad? Por eso es muy importante que vea inmediatamente los conocimientos y habilidades que necesita de usted. Ahora es un buen momento para actualizar, especialmente si no tiene nada de qué presumir en su currículum. No necesitas ir a la universidad para aprender nuevas habilidades: solo necesitas ir en la dirección correcta y no desviarte de ella.

Si, por ejemplo, sabe cómo hacerlo en ReactJS, esto le permitirá convertirse en un especialista más solicitado. Si es un desarrollador web principiante y ya conoce JavaScript y HTML, ReactJS es el siguiente paso.

En este artículo, compartiré mi lista de herramientas y bibliotecas que vale la pena aprender para convertirse en un buen desarrollador de JavaScript y usar React.

¿Qué es React y por qué vale la pena aprenderlo?

React es una biblioteca js para el desarrollo de interfaces de usuario que Facebook lanzó en mayo de 2013 (y sigue siendo compatible). Le permite crear interfaces de usuario dinámicas en JavaScript.

Dado que React es una de las bibliotecas js más poderosas que existen, puede hacer muchas cosas buenas aprendiéndola. React es utilizado por los desarrolladores de Amazon, PayPal, BBC, CNN y muchos otros gigantes tecnológicos. Además, la biblioteca es lo suficientemente flexible para satisfacer cualquier necesidad. Se puede utilizar junto con su pila de tecnología favorita. React se puede utilizar para crear paneles de datos, aplicaciones de mensajería, aplicaciones de redes sociales, aplicaciones web de una sola página y blogs personales, entre otros.

Aprender a React mientras trabaja en proyectos reales no solo lo ayudará a aprender rápidamente, sino que también le dará la oportunidad de lucirse ante posibles empleadores.

1.npm

Está claro que esta herramienta no será una revelación para nadie. Simplemente no podía ignorarlo.

Para trabajar con JavaScript (incluida la biblioteca React), debe instalar el administrador de paquetes de Node ( npm ). Al igual que el administrador de paquetes que viene con su distribución de Linux (o Chocolatey para Windows o Homebrew para macOS), npm proporciona comandos para consultar el repositorio de software e instalar los paquetes necesarios, incluidos los componentes de ReactJS.

Puede instalar Node.js (y npm junto con él) desde el repositorio de su distribución de Linux.

En Fedora o Red Hat Enterprise Linux, haga lo siguiente:

$ sudo dnf install nodejs

En Ubuntu o Debian, ligeramente diferente:

$ sudo apt install nodejs npm

Si npm no está incluido en el repositorio de su distribución, visite Nodejs.org para aprender cómo instalar Node.js y npm en este caso.

2. Inicio rápido

Create React App es un proyecto de plantilla para crear rápidamente aplicaciones React. Configurar un proyecto de trabajo en React solía ser una tarea tediosa. Pero con esta herramienta, puede configurar su canal de construcción de frontend, la estructura del proyecto, el entorno y la optimización de la aplicación para una configuración cero en segundos. Puedes hacerlo con un comando. Además, si necesita una configuración más compleja, puede "extraer" la aplicación Create React y editar sus archivos de configuración directamente.

La aplicación Create React se distribuye de código abierto bajo la licencia MIT. Su código fuente está en el repositorio de GitHub.

Instalación:

npm start
npm init react-app my-app

Si no desea utilizar la aplicación Create React, puede mirar hacia React Boilerplate y React Slingshot . Ambos son de código abierto bajo la licencia MIT.

3. Reaccionar la vista

React Sight es una popular herramienta de visualización que le permite presentar su aplicación como un árbol jerárquico de componentes (como un diagrama de flujo). Se puede conectar como una extensión de Chrome (aún necesita reaccionar devtools para mostrar información sobre su aplicación). Usando su interfaz, puede agregar filtros para enfocarse en los componentes con los que necesita interactuar más. Al pasar el cursor sobre los nodos, se mostrará información sobre el estado actual y los accesorios del componente. React Sight es muy útil para depurar proyectos grandes y complejos.

React Sight se lanza bajo la licencia MIT y puede acceder a su código fuente en el repositorio de GitHub. Puede utilizar la tienda web de Chrome para instalarlo .

4. Reacciona Belle

React Belle es una biblioteca React personalizada que contiene componentes reutilizables: Alternar, Clasificación, Selector de fecha, Botón, Tarjeta, Seleccionar y más. Está diseñado para brindar una experiencia de usuario conveniente. Los componentes están optimizados para dispositivos móviles y de escritorio. Son altamente personalizables y apoyan los estándares de accesibilidad para personas con discapacidades ( WAI-ARIA ). La biblioteca admite varios temas como Belle y Bootstrap.

Belle se lanza bajo la licencia MIT y puede acceder a su código fuente en el repositorio de GitHub.

Instalación:

npm install belle

5. Evergreen

Construido sobre una primitiva de React UI, Evergreen es un marco de interfaz de usuario que contiene componentes de alta calidad que puede usar para construir su proyecto. A los desarrolladores les encanta esta herramienta por su fácil importación de componentes.

Evergreen se lanza bajo la licencia MIT y puede acceder a su código fuente en el repositorio de GitHub.

Instalación:

npm install --save evergreen-ui

6. Bit

Bit es una plataforma en línea y una herramienta de línea de comandos para publicar y compartir aplicaciones React. Esta es una de las mejores opciones si está creando y compartiendo componentes. Su mercado es un lugar donde las personas pueden publicar sus aplicaciones React y buscar los componentes que necesitan. Por lo tanto, no tiene que reinventar la rueda cada vez que necesite una nueva aplicación o componente React.

Así que Bit:

proporciona reutilización de código;
aumenta la eficiencia del diseño y desarrollo;
mantiene la consistencia de UI y UX;
aumenta la estabilidad del proyecto.

Bit se publica bajo la licencia Apache 2.0 y puede acceder a su código fuente en el repositorio de GitHub.

Instalación:

$ npm install bit-bin --global

7. Libro de cuentos

Storybook es una herramienta para desarrollar rápidamente componentes de la interfaz de usuario. Le permite ver una biblioteca de componentes y rastrear el estado de cada uno. Con StoryBook, puede desarrollar componentes por separado de su aplicación, lo que facilita la reutilización y prueba de los componentes de la interfaz de usuario.

Además, la API de Storybook ofrece muchas funciones y facilita la personalización. Empresas como Coursera, Squarespace y Lonely Planet utilizan esta herramienta.

El Storybook se publica bajo la licencia MIT y puedes acceder a su código fuente en el repositorio de GitHub.

Primero instale Storybook usando los siguientes comandos:

$ cd my-react-app
$ npx -p @storybook/cli sb init

A continuación, ejecute el comando de ejecución:

$ npm run storybook

8. Formik

Formik le ayuda a crear y validar formularios durante la depuración, las pruebas y el análisis. Le permite crear formularios dinámicos, por lo que no necesita cambiar o actualizar manualmente el estado y los accesorios de sus componentes. Esto hace que el desarrollo sea más rápido y agradable.

Formik se lanza bajo la licencia MIT y puede acceder a su código fuente en el repositorio de GitHub.

Instalación:

$ npm install formik --save

9. Immer

Immer es una biblioteca js que le permite mantener la inmutabilidad mientras aumenta la complejidad de la estructura del proyecto. Más precisamente, la biblioteca facilita mantener su código inmutable.

Algunas de las principales características de Immer son:

Immer está fuertemente tipado: esto es útil cuando su objeto de estado es de un tipo.
Immer encoge el texto estándar: la mayoría de las herramientas de gestión estatal requieren que escriba una gran cantidad de código estándar. Immer le permite escribir menos código.
Immer le permite utilizar estructuras de datos JS: puede crear estados inmutables en Immer utilizando estructuras de datos JS básicas.

Immer se lanza bajo la licencia MIT y puede acceder a su código fuente en el repositorio de GitHub.

Instalación:

$ npm install immer

10. Reaccionar Proto

React Proto es una herramienta de creación de prototipos de aplicaciones para desarrolladores y diseñadores. Le ayuda a planificar la estructura de su proyecto para que pueda tomar decisiones con anticipación. Por lo tanto, no pierde el tiempo haciendo cambios durante el desarrollo. Esta herramienta es especialmente útil para las personas que prefieren el diseño a la codificación: por ejemplo, puede arrastrar y soltar elementos en lugar de escribir código para hacerlo. La herramienta le ayuda a marcar todos los componentes seleccionados y darles nombres, propiedades y jerarquía.

React Proto se publica bajo la licencia MIT y puede acceder a su código fuente en el repositorio de GitHub.

Para instalarlo, primero bifurque el repositorio . Luego instale las dependencias con:

$ npm install

Entonces corre:


$ npm start
$ npm run dev

Un nuevo paso en tu carrera

Básicamente, puedes encontrar muchas cosas de JavaScript y React tú mismo. Pero para obtener más información sobre las herramientas que mencioné en este artículo (y muchas otras), consulte el repositorio Awesome React GitHub.

Al estudiar e implementar estas herramientas, aumentará la productividad y hará que su currículum sea más atractivo para el empleador.

Actualización con las mejores herramientas de desarrollo web React