10 herramientas ReactJS para mejorar tus habilidades de desarrollo web

¿Sabía que la mayoría de los currículums enviados para trabajos son rechazados de un solo vistazo? Este es un hecho desalentador si está buscando comenzar 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 ir a la universidad para aprender nuevas habilidades de código abierto; todo lo que necesitas es un sentido de dirección y autodisciplina.

ReactJS es una de las muchas habilidades que sería prudente aprender en su camino 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 los conoce, encontrará que ReactJS es un excelente punto de partida como programador.

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

Índice

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

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

    Dado que ReactJS es una de las bibliotecas JavaScript frontend más poderosas 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 vincular a su pila de tecnología favorita para crear aplicaciones ligeras. poder usar reaccionar para crear cualquier cosa escalable: tableros 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 familiarizarse con React es usar 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 dará algo para mostrar a los posibles empleadores.

    1. npm

    Si desea comenzar con JavaScript (incluida la biblioteca React), debe instalar el Nodo (npm). Al igual que el administrador de paquetes que viene 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 los componentes de 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 el repositorio, visite Nodejs.org para averiguar cómo instalar Node.js y npm.

    2. Crea la aplicación React

    Crea la aplicación React es un proyecto estándar 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 front-end, una estructura de proyecto, un entorno de desarrollador y una optimización de aplicaciones para la producción en segundos sin ninguna configuración. Puede 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 ella código fuente en su repositorio de GitHub.

    Instalarlo con:

    npm start
    npm init react-app my-app

    Si no desea utilizar la aplicación Create React, hay otras opciones estándar Caldera de reacción Y Reaccionar con la honda. Ambos están bien mantenidos y son de código abierto bajo la licencia MIT.

    3. Reacciona a la vista

    Reaccionar vista es una herramienta de visualización de uso común que proporciona un árbol jerárquico de los componentes activos (como un diagrama de flujo) de toda la aplicación. Se puede agregar directamente como una extensión de Chrome y necesita las herramientas de desarrollo de 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 más necesita interactuar. Al pasar el cursor sobre los nodos, puede ver el estado actual y las propiedades. React Sight es muy útil para depurar un proyecto grande y complejo.

    React Sight es de código abierto bajo la licencia MIT y puedes acceder a él código fuente en su repositorio de GitHub. Instalar React Sight desde La tienda en línea de Chrome.

    4. Reacciona Bella

    reacciona bella es una biblioteca de componentes de React configurable que contiene componentes reutilizables como Toggle, Rating, DatePicker, Button, Card, Select y otros para brindar una experiencia de usuario fluida. Los componentes son personalizables y de apoyo. AIRE estándares de accesibilidad. Ofrece varios temas, como los populares Belle y Bootstrap.

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

    Instalarlo con:

    npm install belle

    5. Árbol de hoja perenne

    Basado en la interfaz de usuario de React primitiva, Hojas perennes es un marco de interfaz de usuario que contiene componentes altamente refinados que puede usar para crear su proyecto. Una cosa que les gusta a los desarrolladores de esta herramienta es su importación perfecta de componentes.

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

    Instalarlo con:

    npm install --save evergreen-ui

    6. poco

    Morder 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 de código
    • Aumente la eficiencia del diseño y el desarrollo
    • Mantiene la coherencia de la interfaz de usuario y la experiencia del usuario.
    • Aumentar la estabilidad de un proyecto

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

    Instalarlo con:

    $ npm install bit-bin --global

    7. Libro de cuentos

    Libro de historia le permite configurar un servidor de desarrollo en vivo que admita la recarga en caliente, para que pueda crear componentes aislados de todo su 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 posiblemente mostrar sus creaciones de forma interactiva.

    Además, Storybook API ofrece una gran variedad de funciones y facilita la configuración como ninguna otra. Se utiliza en la producción de empresas como Coursera, Squarespace y Lonely Planet.

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

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

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

    Entonces, ejecútalo con:

    $ npm run storybook

    8. Formik

    Formik ayuda a crear y validar módulos 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 las propiedades 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 puedes acceder a él código fuente en su repositorio de GitHub.

    Instalarlo con:

    $ npm install formik --save

    9. Sumérgete

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

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

    • Immer está fuertemente tipado: Esto 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 de estado requieren que escriba una gran cantidad de código estándar. Immer es diferente. Le permite escribir menos código (y más conciso).
    • Immer le permite usar estructuras de datos JS: Es posible producir estados inmutables en Immer utilizando estructuras de datos JS básicas.

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

    Instalarlo con:

    $ npm install immer

    10. Reaccionar Proto

    reaccionar proto es una herramienta de creación de prototipos de aplicaciones para desarrolladores y diseñadores. Te ayuda a diseñar la estructura de tu proyecto para tomar decisiones con anticipación, para que no pierdas tiempo haciendo cambios 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 lo ayuda a etiquetar todos los componentes potenciales y asignarles nombres, propiedades y una jerarquía para la creación de prototipos.

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

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

    $ npm install

    Ejecuta la aplicación con:

    $ npm start

    Para iniciar un entorno de desarrollo, ejecute:

    $ npm run dev

    Mejora tu carrera con las herramientas de ReactJS

    No hay escasez de recursos para JavaScript. Para obtener más información sobre los marcos que he mencionado en este artículo, además de muchos otros, consulte el Fantástica reacción repositorio en GitHub, una lista de cosas interesantes relacionadas con React.

    Al aprender estas 10 herramientas imprescindibles, aumentará su productividad y su currículum, y lo más importante, tendrá una buena comprensión del desarrollo web basado en JavaScript.

    Artículos de interés

    Subir