React.js, o simplemente React, es una biblioteca de JavaScript popular para crear interfaces de usuario gráficas o front-end para aplicaciones en línea. Para los ingenieros de Java de pila completa, también es una de las habilidades más importantes. React JS, a veces conocido simplemente como React, ha evolucionado a pasos agigantados en los últimos años, convirtiéndose en el conjunto de herramientas de facto para el desarrollo de GUI basado en componentes. Está respaldado por Facebook. Aunque existen marcos front-end alternativos como Angular y Vue.js, React se destaca porque se concentra solo en el desarrollo de GUI basado en componentes y no se desvía hacia otras áreas.
Por ejemplo, Angular es un marco completo que incluye un sistema de inyección de dependencia, un sistema de enrutamiento, manejo de formularios, solicitudes HTTP, animaciones, compatibilidad con i18n y una estructura de módulo potente con carga diferida simple.
React es una opción maravillosa si ya tiene bibliotecas para realizar esas cosas o si no las necesita todas a la vez. Sin embargo, comprender React no es sencillo, especialmente si eres nuevo en el desarrollo web.
Echemos un vistazo a la hoja de ruta paso a paso para ver cómo puede obtener las habilidades que necesitará para convertirse en un desarrollador de React en 2022:
1. Los Fundamentos
Debe conocer los fundamentos, independientemente de cualquier marco o biblioteca que estudie para la programación web, y por conceptos básicos, me refiero a HTML, CSS y JavaScript, que son los tres fundamentos del desarrollo web.
HTML
Debido a que proporciona el marco para una página web, es uno de los pilares principales y el talento más crucial para los desarrolladores web. Si está interesado en aprender HTML, eche un vistazo a mi colección de clases gratuitas de HTML.
CSS
Es el segundo pilar del desarrollo web y se utiliza para hacer que las páginas en línea parezcan agradables. Si quieres estudiar CSS, mi lista de cursos gratuitos de desarrollo web incluye un puñado de clases gratuitas de CSS.
JavaScript
Este es el tercer pilar del desarrollo web y es lo que le permite hacer que sus sitios sean interactivos. También es por eso que existe el marco React; como resultado, debe estar familiarizado con JavaScript y comprenderlo bien antes de intentar dominar React JS. Eche un vistazo a mi selección de clases gratuitas de JavaScript para comenzar.
2. Habilidades De Desarrollo En General
No importa si es un desarrollador frontend, un desarrollador backend o un ingeniero de software completo. Para tener éxito en la industria de la programación, necesitará conocer algunos talentos básicos de desarrollo, y aquí hay una lista de algunos de ellos.
Conoce GIT
En 2022, debe tener un conocimiento profundo de Git. Cree algunos repositorios de GitHub, comparta su código con otros y descubra cómo obtener el código de Github en su IDE elegido. Git Complete: La guía completa paso a paso de Git es un curso maravilloso si quieres aprender.
Comprender El Protocolo Http(S)
Si desea trabajar como desarrollador web, debe tener un conocimiento profundo de HTTP. No espero que estudie la especificación, pero debe saber cómo usar los métodos de solicitud HTTP típicos como GET, POST, PUT, PATCH, DELETE y OPTIONS, así como también cómo funciona HTTP/HTTPS en general.
Familiarizarse Con La Terminal
Aunque no se requiere que un desarrollador front-end conozca Linux o la terminal, le recomiendo que se familiarice con la terminal y configure su shell (bash, zsh, csh), entre otras cosas. Si quieres aprender a usar la terminal y bash, te recomiendo tomar este curso de Udemy Shell Scripting.
Estructuras De Datos Y Algoritmos
Esta es otra de las habilidades generales de programación que no es necesaria para convertirse en desarrollador de React, pero es esencial para convertirse en programador en primer lugar.
Familiarícese Con Los Patrones De Diseño Y La Arquitectura De Software.
No es necesario comprender los patrones de diseño, como los algoritmos de aprendizaje y las estructuras de datos, para convertirse en desarrollador de React, pero lo beneficiará mucho. Los patrones de diseño son soluciones probadas y verdaderas para los problemas que surgen en el desarrollo de software de manera regular.
3. Conozca React.js
Este es el punto esencial. Para convertirse en desarrollador de React, primero debe estudiar React y dominarlo. El sitio web oficial es el mejor lugar para aprender React, sin embargo, como novato, puede ser un poco intimidante.
4. Comprender Cómo Usar Las Herramientas De Construcción
Si desea trabajar como desarrollador profesional de React, debe familiarizarse con las herramientas que usará como desarrollador web, como herramientas de compilación, herramientas de prueba unitaria y herramientas de depuración.
Para comenzar, estas son algunas de las herramientas de desarrollo especificadas en esta hoja de ruta:
Gestores De Paquetes
- npm
- hilo
- npm
Corredores De Tareas
- programas escritos usando npm
- trago
- paquete web
- Enrollar
- Paquete o empaquetar
Además, no es necesario comprender todas estas tecnologías; para los novatos, simplemente aprender npm y webpack debería ser suficiente. Puede pasar a tecnologías adicionales una vez que haya adquirido una mejor comprensión del desarrollo web y el ecosistema React.
5. Diseño
Saber un poco de estilo no te hará daño si quieres ser un desarrollador front-end como un desarrollador de React. A pesar de que el RoadMap especifica CSS Preprocessors, CSS Frameworks, CSS Architecture y CSS in JS,
Le recomiendo que, como mínimo, comprenda Bootstrap, el marco CSS más importante que puede encontrar de vez en cuando.
También puede estudiar Materialise o Material UI si desea dar un paso más y comprender el arranque.
6. Administración Del Estado
Otro tema crucial en el que debe concentrarse un desarrollador de React es este. Las siguientes son las ideas y los marcos a comprender, de acuerdo con la hoja de ruta:
- API para el estado y el contexto del componente
- redux
- Acciones que son asincrónicas (Efectos secundarios)
- Thunk redux
- Mejor promesa Redux
- saga de redux
- Reducción observable
- ayudantes
- Revancha
- Reseleccionar
- Persistencia de datos
- Persistir en redux
- Fénix resucitado
- Formulario Redux
- MobX
- Ganchos en React
Si todo esto es demasiado para ti, te recomiendo centrarte en Redux.
7. Tipo De Damas
Debido a que JavaScript no es un lenguaje con muchos tipos, no podrá usar un compilador para detectar problemas relacionados con tipos.
La verificación de tipos puede ayudarlo a detectar muchos errores a medida que su aplicación se expande, especialmente si utiliza extensiones de JavaScript como Flow o TypeScript para verificar todo el proyecto.
Incluso si no los utiliza, React tiene capacidades de verificación de tipos incorporadas, y saber cómo usarlas puede ayudarlo a detectar errores temprano.
Debido a que Angular también utiliza TypeScript, creo que vale la pena estudiar TypeScript además de JavaScript y, si está de acuerdo, puede inscribirse en el curso Ultimate TypeScript en Udemy.
8. Asistentes De Formulario
Además de Type Checkers, Form Helps como Redux Form, que ofrece el mejor enfoque para administrar el estado de su formulario en Redux, también son beneficiosos. También puede consultar Formik, Formsy y Final Form además de Redux Form.
9. Programación
Los componentes de enrutamiento son una característica importante de cada aplicación, ya que son el núcleo del sólido enfoque de programación declarativa de React.
React Router es un conjunto de componentes de navegación que puede usar para crear su aplicación de forma declarativa.
React Router funciona en cualquier lugar donde React esté renderizando, ya sea que desee URL que se puedan marcar para su aplicación web o un método componible para navegar en React Native.
También puede consultar el enrutador 5, el enrutador Redux-First y el enrutador React además de React-Router.
10. Clientes API
Rara vez encontrará una GUI aislada en el mundo actual. En cambio, es más probable que diseñe algo que use API como REST y GraphQL para conectarse con otras aplicaciones. Afortunadamente, los desarrolladores de React tienen acceso a una variedad de clientes API; Aquí hay una lista de algunos de ellos:
- DESCANSO
- Ha podido recuperar
- superagente
- Axios
- GráficoQL
- Apolo
- Relé
- URL
Apollo Client es mi favorito, ya que simplifica el desarrollo de aplicaciones cliente utilizando GraphQL. El cliente está diseñado para ayudarlo a crear rápidamente una interfaz de usuario basada en GraphQL que se puede usar con cualquier interfaz de JavaScript.
11. Bibliotecas De Utilidades
Estas son las bibliotecas que le facilitan hacer su trabajo. Hay una gran cantidad de bibliotecas útiles para los desarrolladores de React, como se ilustra a continuación:
Lodash
Momento
nombres de clase
Número
RxJS
Ramda
No recomiendo aprenderlos todos, ni el RoadMap. Solo se pueden aprender Lodash, Moment y Classnames.
12. Comprobación
Ahora, esta es una de las habilidades más importantes para los desarrolladores de React que a veces se pasa por alto, pero si desea mantenerse a la vanguardia, debe concentrarse en aprender bibliotecas que lo ayudarán en las pruebas. Aquí también encontrará bibliotecas para pruebas unitarias, pruebas de integración y pruebas de un extremo a otro.
Puede encontrar una lista de las bibliotecas enumeradas en la hoja de ruta aquí:
Pruebas a nivel de unidad
- Broma
- Enzima
- Sinón
- Moca
- Chai
- AVA
- Cinta
Prueba de principio a fin
- controlador web, selenio
- Ciprés
- Titiritero
- Pepino.js
- Vigilancia nocturna.js
- Comprobación de integridad
- Karma
Puede aprender cualquier biblioteca que desee, sin embargo, Jest y Enzyme son dos muy recomendables.
13. Internacionalización
Otro problema importante para diseñar el front-end, que se utiliza en todo el mundo, es este. Para Japón, China, España y otras naciones europeas, es posible que deba admitir la versión de GUI local.
El RoadMap recomienda las siguientes tecnologías, aunque es útil conocerlas todas:
- internacional Reaccionar
- i18siguiente reaccionar
Ambas bibliotecas incluyen componentes de React y una API para formatear fechas, números enteros y cadenas, así como compatibilidad con la pluralización y la traducción.
14. Representación En El Servidor
Es posible que se pregunte cuál es la diferencia entre la representación del lado del servidor y la representación del lado del cliente, así que eliminemos eso antes de analizar la biblioteca que habilita la representación del lado del servidor con React.
Su navegador descarga una página HTML básica en la representación del lado del cliente. A continuación, se procesa el JavaScript y se le agrega el contenido.
Los componentes de React se procesan en el servidor y el contenido HTML resultante se entrega al cliente o navegador en el caso de la representación del lado del servidor.
El RoadMap recomienda la siguiente representación del lado del servidor:
- Siguiente.js
- Después.js
- Pícaro
Sin embargo, recomiendo aprender solo Siguiente.
15. Generador De Sitios (Estático)
El generador de sitios estáticos Gatsby.js es un generador de sitios estáticos contemporáneo. Gatsby se puede utilizar para desarrollar un sitio web con experiencias de inicio de sesión personalizadas. Utilizan JavaScript para integrar su entrada y generar una salida HTML bien formada.
16. Integración De Un Marco Backend
React on Rails combina Rails con el marco frontal React de Facebook (representación del servidor). Ofrece representación de servidor, que es útil para el rastreo de rastreadores SEO y la velocidad de UX y no está disponible en Rails/Webpacker.
17. Aplicación Móvil
React Native se está convirtiendo rápidamente en el enfoque preferido para construir una aplicación móvil en JavaScript con una apariencia nativa, que es otra área en la que dominar React puede ser realmente ventajoso.
Se recomiendan las siguientes bibliotecas:
- reacción nativa
- Córdoba/PhoneGap
Sin embargo, creo que solo estudiar React Native es suficiente.
18. Estación De Trabajo
Hay otros marcos basados en React para desarrollar GUI de escritorio, como React Native Windows, que le permite crear programas UWP y WPF nativos usando React.
Se recomiendan las siguientes bibliotecas:
- Nativo de protón
- Electrón
- Windows usando React Native
Sin embargo, son todos para exploración avanzada. Puede ver estos si ya domina React. Si está buscando algunas clases, he incluido una lista de 10 cursos gratuitos de React que le enseñarán todo lo que necesita saber sobre React, incluidos los ganchos.
19. Realidad Virtual
Si desea crear aplicaciones de realidad virtual, puede usar marcos como React 360, que le permite crear interesantes experiencias 360 y VR con React. Puede obtener más información sobre React 360 si está interesado en esa área.
Aunque es muy extenso, existe una gran probabilidad de que ya conozcas gran parte de la información. No hay necesidad de sentirse intimidado o abrumado por esta hoja de ruta si no sabe lo que está haciendo; puede comenzar poco a poco y avanzar hacia arriba.
Para convertirse en un desarrollador de React, puede tomar una variedad de rutas. Y si ya conoce React, es casi seguro que podrá descubrir algunas herramientas y tecnologías nuevas para agregar a su conjunto de herramientas en 2022, lo que le permitirá convertirse en un desarrollador de React aún mejor.
