¿Cuál es la mejor manera de convertirse en desarrollador de React en 2022? Hoja de ruta / ruta de aprendizaje para obtener un trabajo de desarrollador de React de nivel básico.

React es el estándar de la industria para crear interfaces excepcionales, rápidas, escalables y, lo más importante, reutilizables. Según la Encuesta de desarrolladores de 2021 de StackOverFlow, React es el marco web más popular. En 2022, más empresas buscan ingenieros de React que nunca.

Photo by Lautaro Andreani on Unsplash

¿Qué es exactamente React.js?
React.js es un conjunto de herramientas de interfaz de usuario de JavaScript desarrollado por Facebook para la creación de componentes de interfaz de usuario escalables. Puede usarse para crear aplicaciones de una sola página, aplicaciones móviles y PWA. El hecho de que tenga una curva de aprendizaje reducida es la razón principal de su atractivo.
En este tutorial, veremos cómo convertirse en un desarrollador de React paso a paso.
ºLa mayoría del código no reactivo de React está escrito en javaScript.

pre-requisitos

JavaScript.
Debido a que React es una biblioteca de JavaScript, es necesario tener experiencia en JS, así como también conocimiento de varios principios clave. Hoy en día, React incluye React Hooks y componentes funcionales; Se fomenta la comprensión de ES6.
Debe estar familiarizado con los siguientes conceptos de JavaScript:

• 1-Variables en JS
• 2 -Funciones de flecha
• 3-Tipos de datos y sus métodos
• 4-Dom Manipulación y eventos
• 5- Funciones de orden superior y devolución de llamada
• 6-Promesas
• 7-JS asíncrono

HTML/CSS.
Los componentes de representación de React están construidos con HTML y estilizados con CSS o una herramienta de terceros. Suponga que está creando un componente de botón. Ese componente tendrá una etiqueta, un estilo y algunas propiedades. La mayoría de las veces, el elemento de botón HTML se usará para crear ese componente, que luego se estilizará con CSS u otra biblioteca de estilos.

Source Gyphy

conceptos centrales de React a masterizar

1.Virtual dom y algoritmo diffin:

Para comprender Virtual Dom y el algoritmo de diferenciación, primero debe comprender los conceptos fundamentales de React.
Detrás de escena de React.js están los algoritmos Virtual Dom y Diffing. Debido a que manipular el dominio real lleva mucho tiempo, React hizo uso de la idea del dominio virtual. El término “dominio virtual” se refiere a una abstracción del término “dominio real”. El objeto virtual dom se actualiza cada vez que se muestra un componente o elemento. Luego compara el dominio virtual recién actualizado con una copia del dominio virtual actualizado previamente para determinar qué objeto de dominio actualizar. La práctica de comparar dos dominios virtuales se conoce como diferenciación. Luego, el dominio real se actualiza con el dominio virtual, y el dominio virtual actualizado se convierte en el dominio virtual actualizado previamente para el próximo cambio de dominio.

2. JSX: lenguaje de plantilla de React.

La sintaxis de React puede describirse como JSX. Es una abreviatura de JavaScript XML y le permite escribir código HTML en JavaScript y representar su propio componente en la interfaz de usuario.

3. Componentes: componentes básicos de las aplicaciones React

La aplicación React está compuesta por componentes React. Todo en las aplicaciones de React es un componente, desde un simple botón hasta un complicado cuadro de mando. El fragmento de código a continuación es un componente React simple que mostrará un enlace en la interfaz de usuario.

Debido a que la etiqueta y la URL del componente son fijas, no se pueden reutilizar. Los accesorios reutilizables se utilizan para crear un componente.

4. accesorios
Los accesorios son objetos de propiedad que permiten enviar datos de solo lectura entre los componentes de React. Los accesorios se pueden proporcionar como una variable o un objeto en un flujo unidireccional.

El componente Enlace ahora es reutilizable y se puede mostrar con varias etiquetas y URL, como se ilustra en el extracto a continuación.

5. Administración del Estado
En términos sencillos, un estado es un objeto Javascript que guarda datos mutables que el componente puede utilizar y editar. Cualquier cambio de estado hace que el componente se vuelva a renderizar. Históricamente, el estado está asociado con componentes basados en clases, sin embargo, con el enlace useState/useReducer, se puede administrar en componentes funcionales.
El estado se puede administrar a nivel de componente llamando a useState hook y a nivel global a través de soluciones de administración de estado como Redux, Context API, Recoil, etc.

6. React Hooks(ganchos)

Los ganchos se agregaron en React 16.8 en 2018. Los ganchos de React ayudan en la gestión de funciones de estado y ciclo de vida en componentes funcionales y han dejado obsoletos los componentes basados en clases. Los ganchos solo están permitidos en componentes en funcionamiento y al más alto nivel.

Basic Hooks

1. useState
2. useEffect
3. useContext

Advanced Hooks

1. useReducer
2. useCallback
3. useMemo
4. useRef
5. useImperativeHandle
6. useLayoutEffect
7. useDebugValue

The state is controlled at the local level in the preceding component with useState Hooks.

7. Designing your own unique hooks
To share reusable functional code across several components, custom hooks may be developed. For example, a custom hook that detects the width of the browser window or retrieves data from APIs may be constructed and utilized across the project. The first step in creating a custom hook is to utilize it.
A custom hook is constructed in the following example, which returns the width and height of the browser window. It may be utilized for mobile responsiveness, among other things.

Puede usar el enlace useWindowSize para identificar el ancho de una ventana y representar componentes móviles o de escritorio según el tamaño de la pantalla.

Temas de React avanzada
1.Componentes de orden superior
2.división de código
3.referencias
4.API de contexto
5.Representación del lado del servidor
6.React Suspense
7.Componentes del servidor React
Después de aprender estos conceptos, puede llamarse desarrollador de React.

Source:Giphy

Sin embargo, debido a que React es una biblioteca, debemos utilizar otras bibliotecas y paquetes de nodos, como React Router para enrutamiento, Redux para administración de estado, etc., para aprovechar la funcionalidad adicional.

Ecosistema de React.

1. React Router / Dom React Router
   React Router is a routing module that allows you to navigate between React components by changing URLs. When a user visits a URL, React Router detects if a component is configured to render against that router and renders on the UI.
2. Gestión de estado a través de bibliotecas de terceros

A pesar del hecho de que React permite la gestión de estado a nivel de componente y global a través del enlace useState y la API de contexto. Sin embargo, si su aplicación es realmente sofisticada y desea tener más control, puede utilizar una solución de terceros como Redux, Recoil o Mobx. Personalmente, recomiendo combinar la API de contexto con useReducer.

3. formularios.

La creación de formularios dinámicos y complicados con validaciones y otras características requiere el uso de una biblioteca. Los Hooks para Formic y React Forms se emplean comúnmente en la creación de formularios. Estas bibliotecas manejan sin esfuerzo todos los componentes de un formulario. Sí, es una herramienta popular para agregar validaciones.

4. Test usando React

La prueba de reacción es una noción para determinar si un componente funciona o no según lo previsto. Por ejemplo, suponga que ha construido un campo de entrada y espera que funcione de una manera específica. La prueba se diseñará para tener en cuenta tales casos de uso. Las pruebas automatizadas ayudan en la estabilización de los componentes, reducen las pruebas manuales y detectan errores al instante. Es fundamental para un desarrollador crear casos de prueba para sus componentes. Para probar las aplicaciones de React, se utilizan comúnmente Jest, Cypress y React Testing Library.

5. Bibliotecas de estilo e interfaz de usuario
Se puede usar cualquier biblioteca de IU en lugar de diseñar componentes de IU como modales, botones, menús, menús desplegables, etc. Material-UI, Antd y Bootstrap son ejemplos comunes. También hay otras bibliotecas de estilo disponibles para ayudarlo a diseñar su propio estilo, como Styled-components y Tailwind CSS.

6. Trabajar con API
Varias bibliotecas basadas en promesas ofrecen soluciones fantásticas para trabajar con las API Rest y GraphQL. Para las API Rest, las más comunes son Axios, Superagent y. GraphQL está dominado por Apollo y Relay.

Debe aprender acerca de las siguientes herramientas:

1. NPM
2. Git
3. Webpack
4. Heroku / Netlify
5. Firebase / AWS Amplify

Proyectos que construir

1. tiendas E-commerce
2. To-do app
3. una básica SAAS app

Gracias por leer si te gustó no olvides seguirme y darle palmita