Saltar al contenido

Las 10 herramientas principales de ReactJS utilizadas por los desarrolladores más exitosos: DEV

Aumente su valor para los empleadores aprendiendo estas herramientas principales para desarrollar aplicaciones web en React.

¿Sabía que la mayoría de los currículums presentados para trabajos son rechazados con solo un vistazo? Ese es un hecho abrumador si está tratando de iniciarse en el desarrollo web, pero hay formas de mejorar lo que tiene para ofrecer a posibles empleadores y clientes. Para los desarrolladores de aplicaciones, ahora es un buen momento para aumentar sus habilidades, y el código abierto es la mejor vía para el desarrollo profesional. No es necesario asistir a la universidad para aprender nuevas habilidades de código abierto; todo lo que necesita es sentido de dirección y autodisciplina.

ReactJS es una de las muchas habilidades que sería prudente aprender para convertirse en un desarrollador web exitoso. Si ya se siente cómodo con JavaScript y HTML, es una próxima tecnología natural para aprender. Si aún no está familiarizado con ellos, entonces encontrará en ReactJS un gran lugar para comenzar como programador.

En este artículo, compartiré mis 10 herramientas y bibliotecas principales que lo ayudarán a calificar para un trabajo (o ser un aficionado serio, si lo prefiere) como desarrollador de JavaScript.

¿Qué es React y por qué debería aprenderlo?

React es una biblioteca de JavaScript para el desarrollo de la interfaz de usuario (UI) que Facebook introdujo en mayo de 2013 (y aún mantiene). Utiliza JavaScript para el desarrollo y componentes de máquinas de estado simples que representan contenido dinámico con facilidad.

Debido a que ReactJS es una de las bibliotecas de JavaScript frontend más potentes disponibles, debe aprender a usarla si desea crear aplicaciones increíbles. Es una fuerza impulsora detrás de las interfaces de Amazon, PayPal, BBC, CNN y muchos otros gigantes tecnológicos. Además, la biblioteca flexible se adapta a cualquier necesidad y se puede conectar a su pila de tecnología favorita para crear aplicaciones ligeras. Puede usar React para crear cualquier cosa escalable: paneles de datos, aplicaciones de mensajería, aplicaciones de redes sociales, aplicaciones de una sola página e incluso sitios de blogs personales.

Una de las formas más efectivas de dominar React es utilizar sus herramientas para crear aplicaciones web para proyectos del mundo real. No solo lo ayudará a aprender el marco y las herramientas, sino que también le brindará algo para mostrar a los posibles empleadores.

Si desea comenzar con JavaScript (incluida la biblioteca React), debe instalar el administrador de paquetes de Node (npm). Al igual que el administrador de paquetes que se envía con su distribución de Linux (o Chocolatey en Windows o Homebrew en macOS), npm proporciona un comando para consultar un repositorio de software e instalar lo que necesita. Esto incluye bibliotecas importantes, como componentes ReactJS.

Probablemente pueda instalar Node.js (y npm junto con él) desde el repositorio de su distribución de Linux. En Fedora o Red Hat Enterprise Linux:

***$ *sudo dnf install nodejs**

En Ubuntu o Debian:

***$ *sudo apt install nodejs npm**

Si su distribución no ofrece npm en su repositorio, visite Nodejs.org para averiguar cómo instalar Node.js y npm.

2. Cree la aplicación React

Create React App es un proyecto modelo para comenzar con React. Antes de que Facebook lanzara la aplicación Create React, configurar un proyecto de trabajo en React era una tarea tediosa. Pero con esta herramienta, puede configurar una canalización de compilación de frontend, estructura de proyecto, entorno de desarrollador y optimización de aplicaciones para producción en segundos sin configuración. Puedes lograr todo esto con un solo comando. Además, si necesita una configuración más avanzada, puede “expulsar” de la aplicación Create React y editar sus archivos de configuración directamente.

La aplicación Create React es de código abierto bajo la licencia MIT y puede acceder a su código fuente en su repositorio de GitHub.

Instálelo con:

**npm start
npm init react-app my-app**

Si no desea utilizar la aplicación Create React, otras opciones estándar son React Boilerplate y React Slingshot. Ambos están bien mantenidos y son de código abierto bajo la licencia MIT.

3. Reaccionar la vista

React Sight es una herramienta de visualización de uso común que proporciona un árbol de jerarquía de componentes en vivo (como un diagrama de flujo) de toda su aplicación. Se puede agregar directamente como una extensión de Chrome y necesita herramientas de desarrollo React para leer información sobre su aplicación. Con su rica interfaz, incluso puede agregar filtros para enfocarse en los componentes con los que necesita interactuar más. Al pasar el mouse sobre los nodos, puede mostrar el estado actual y los accesorios. React Sight es muy útil para depurar un proyecto grande y complejo.

React Sight es de código abierto bajo la licencia MIT, y puede acceder a su código fuente en su repositorio de GitHub. Instale React Sight desde la tienda web de Chrome.

4. Reacciona Belle

React Belle es una biblioteca de componentes React configurable que contiene componentes reutilizables como Toggle, Rating, DatePicker, Button, Card, Select y otros para proporcionar una experiencia de usuario fluida. Los componentes son personalizables y admiten los estándares de accesibilidad ARIA. Ofrece diferentes temas, como el popular Belle y Bootstrap.

Belle es de código abierto bajo la licencia MIT y puede acceder a su código fuente en su repositorio de GitHub.

Instálelo con:

5. Evergreen

Construido sobre la primitiva React UI, Evergreen es un marco de UI que contiene componentes altamente pulidos que puede usar para construir su proyecto. Una cosa que a los desarrolladores les gusta de esta herramienta es su fácil importación de componentes.

Evergreen es de código abierto bajo la licencia MIT y puede acceder a su código fuente en su repositorio de GitHub.

Instálelo con:

**npm install --save evergreen-ui**

6. Bit

Bit ofrece una plataforma en línea y una herramienta de línea de comandos para publicar y compartir aplicaciones React. Es una de las mejores opciones si está creando y compartiendo componentes. Su mercado es una tienda donde las personas pueden publicar sus aplicaciones React y otras personas pueden buscar los componentes que necesitan, por lo que no tienen que reinventar la rueda cada vez que necesitan una nueva aplicación React. Las características principales de Bit incluyen:

Permite la reutilización del código

Aumenta la eficiencia del diseño y desarrollo

Mantiene la coherencia de UI y UX

Aumenta la estabilidad de un proyecto

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

Instálelo con:

***$ *npm install bit-bin --global**

7. Libro de cuentos

Storybook te permite configurar un servidor de desarrollo en vivo que admite la recarga en caliente, para que puedas crear componentes de forma aislada de todo tu proyecto. Ayuda con la reutilización de componentes, la capacidad de prueba y la velocidad de desarrollo. También ofrece un editor de interfaz de usuario en línea que le permite desarrollar, inspeccionar y, finalmente, mostrar sus creaciones de forma interactiva.

Además, la API de Storybook ofrece innumerables funciones y facilita la configuración como ninguna otra. Es utilizado en la producción por empresas como Coursera, Squarespace y Lonely Planet.

Storybook es de código abierto bajo la licencia MIT y puede acceder a su código fuente en su repositorio de GitHub.

Primero, instale Storybook usando los siguientes comandos (tenga en cuenta que uno usa un comando npx, que está relacionado con npm pero es único):

***$ *cd my-react-app**

***$ *npx -p @storybook/cli sb init**

A continuación, ejecútelo con:

***$ *npm run storybook**

8. Formik

Formik ayuda a crear y validar formularios para depurar, probar y razonar en React. Le permite generar formularios dinámicos, por lo que no tiene que cambiar o actualizar manualmente el estado y los accesorios de los componentes del formulario. Es un paso hacia una experiencia de desarrollo más rápida y agradable.

Formik es de código abierto bajo la licencia MIT y puede acceder a su código fuente en su repositorio de GitHub.

Instálelo con:

***$ *npm install formik --save**

9. Immer

Immer es una biblioteca de JavaScript que le permite modificar objetos anidados sin temor a mutarlos. Su propósito es simplificar la inmutabilidad en su código.

Estas son algunas de las principales características de Immer:

Immer está fuertemente tipado: Es útil cuando su objeto de estado tiene un tipo.

Immer reduce el código repetitivo: La mayoría de las herramientas de administración estatal requieren que escriba mucho código repetitivo. Immer es diferente. Te permite escribir menos (y más conciso) código.

Immer le permite utilizar estructuras de datos JS: Puede producir estados inmutables en Immer mediante el uso de estructuras de datos JS básicas.

Immer es de código abierto bajo la licencia MIT y puede acceder a su código fuente en su repositorio de GitHub.

Instálelo con:

***$ *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 diseñar la estructura de su proyecto para tomar decisiones con anticipación, de modo que no pierda tiempo haciendo cambios más adelante en el desarrollo. Esta herramienta ayuda específicamente a las personas que prefieren el diseño a la codificación; por ejemplo, puede arrastrar y soltar elementos en lugar de escribirlos. La herramienta le ayuda a marcar todos los componentes potenciales y darles nombres, propiedades y una jerarquía para la creación de prototipos.

React Proto es de código abierto bajo la licencia MIT, y puede acceder a su código fuente en su repositorio de GitHub.

Para instalarlo, primero, bifurque el repositorio. A continuación, instale las dependencias con:

Ejecute la aplicación con:

Para iniciar un entorno de desarrollo, ejecute:

Este contenido se publicó originalmente aquí.