¿Cómo aprender ReactJS en 2021?

npx crear-reaccionar-aplicación myapp

inicio de npm

compilación de ejecución de npm

instalar npm

¿No le resultan familiares todos los comandos anteriores? 

En caso afirmativo, es posible que esté trabajando en React o que haya comenzado a trabajar en esta increíble biblioteca de JavaScript. Si es un desarrollador apasionado, entonces seguramente estará al tanto de la popularidad de este marco de JavaScript y es posible que también haya intentado aprender esta biblioteca. 

Ahora hablemos de los desarrolladores que ya están en la industria y están trabajando en alguna parte del frontend del proyecto. ¿Cómo te sientes cuando te piden que escribas la misma línea de código en varios lugares? ¿Cómo te sientes cuando te piden que agregues el mismo botón en varias páginas? 

Sabemos que en el desarrollo de software, realizar tareas repetitivas es frustrante y los desarrolladores siempre buscan algún marco o método para ahorrar su valioso tiempo. Aquí React entra en escena. 

Esta increíble y popular biblioteca de JavaScript no solo ayuda a los desarrolladores a crear una aplicación impresionante, sino que también los ayuda a crear la página de inicio en menos tiempo. React está basado en componentes y esa es la mejor característica de esta biblioteca. Puede dividir su código complejo en piezas individuales, es decir, componentes. Estos componentes son útiles para organizar mejor el código. 

Aprender esta biblioteca no es fácil si no das el paso correcto hacia ella. Hay muchos conceptos en React y puede ser abrumador aprender esta biblioteca. Es importante conocer las cosas correctas en esta biblioteca para convertirse en un desarrollador de React en demanda. Hoy, en este blog, vamos a enumerar las habilidades clave que se necesitan para convertirse en un desarrollador de React competente. 

1. Aprenda los fundamentos de HTML , CSS y JavaScript

Sus conceptos básicos deben ser sólidos antes de saltar a esta biblioteca. Si es un desarrollador experimentado, solo necesita revisar los conceptos. 

Si hablamos de principiantes, la mayoría de las veces cometen errores y saltan directamente a esta biblioteca. Más tarde, no entienden el concepto y siguen teniendo dificultades para comprender esta biblioteca. Además, su entrevistador primero verificará los conceptos básicos antes de saltar a React.

Comprender los componentes básicos del sitio web. Cómo funcionan HTML, CSS y JavaScript. La sintaxis de React y la mayoría de los conceptos de esta biblioteca se basan principalmente en estos tres componentes básicos. No enfrentará ningún problema al crear una aplicación si estos fundamentos son claros para usted. Crea algo por tu cuenta usando estos tres bloques de construcción. 

React hereda la mayoría de las funciones de JavaScript. Ambos están conectados, por lo que es bueno tener una base sólida en los conceptos de JavaScript. Analicemos algunos conceptos básicos de JavaScript que se necesitan para React.

• Variables, objetos, arreglos, funciones y clases.
• Métodos de array comunes como .map(), .filter(), .reduce()
• Características de ES6 como la función de flecha, let, const. Obtenga información sobre el método de palabra clave, llamada, aplicación y vinculación de ‘esta’.
• Conceptos de JavaScript asíncrono como promesas, devolución de llamada, Async/Await.
• Aprenda cómo funciona DOM (modelo de objeto de documento). Cómo crear, seleccionar y actualizar los elementos HTML y sus atributos.

2. Fundamentos de NodeJS , importación y exportación de palabras clave

Como desarrollador de React, ejecutará muchos scripts/comandos de NPM, por lo que una vez que los fundamentos (HTML, CSS y JavaScript) estén claros, comprenda los fundamentos de NodeJS.

• NPM (Gestor de paquetes de Nodes): debe tener conocimientos sobre NPM (Gestor de paquetes de Nodes). NPM se utiliza para instalar los módulos y paquetes de Node. Aprenda a usar los comandos/scripts básicos para instalar los paquetes y módulos.
• Importar palabra clave: tendrá que usar la palabra clave de importación en su proyecto React para usar los módulos de Node instalados.
• Exportar palabra clave:

3. Aprende los fundamentos de React

Una vez que los conceptos anteriores estén claros y tenga confianza con JavaScript, salte a React Fundamentals. Aprenda los conceptos básicos de React. React se basa en una arquitectura basada en componentes. Deberá dividir la interfaz de usuario completa o JSX en componentes reutilizables. 

Creará diferentes componentes para diferentes tareas y estos componentes se ajustarán al componente principal. Este componente principal se representará para el usuario. 

Ahora la pregunta es… ¿cuáles son los conceptos básicos que debe aprender en ReactJS? Hablemos de eso…

• Usarás la sintaxis JSX en ReactJS. La sintaxis de JSX es similar a HTML, pero tenga en cuenta que es diferente del HTML simple.
• Aprende a renderizar los elementos JSX. Muestra y oculta elementos según las condiciones.
• ¿Aprender el concepto de Estado en ReactJS? ¿Como funciona? Básicamente, el estado contiene la variable síncrona, y cambiar el valor del estado se reflejará en toda la aplicación donde sea que se use. Aprenda a almacenar y actualizar los datos en Estado.
• En React, usarás accesorios ( ¡Oye! ¿Qué es en realidad? ). Sabemos que esta podría ser una palabra nueva para ti. Básicamente, los accesorios son como los argumentos que se pasan a la función o al método. Sepa cuándo usarlo y cómo usarlo. Utilizará accesorios como argumento de entrada para las etiquetas HTML.
• Componente funcional, componente de clase y la diferencia entre ambos.
• Al igual que en JavaScript, manejará eventos en React. Aprenda a manejar algunos eventos comunes como onClick, onChange y onSubmit (Usará estos eventos en botones, entradas y formularios).

Tutorial ReactJS GeeksforGeeks y React Official Tutorial te ayudarán a aprender todo sobre ReactJS. Después de la comprensión de ReactJS, construya algunos proyectos básicos para comprender los conceptos de una manera mucho mejor.

• Aplicación de tareas simples
• Aplicación de calculadora sencilla
• Construye un carrito de compras
• Muestre las estadísticas de usuario de GitHub usando la API de GitHub.

4. Reaccionar enrutador

La mayor parte del marco funciona con el concepto de enrutamiento ( ¡Oye! ¿Qué es en realidad? ). Ya sea un sitio de comercio electrónico, un sitio educativo o cualquier tipo de sitio web, encontrará diferentes páginas para diferentes propósitos. Ahora hay una pregunta para ti…

¿Cómo redireccionaría desde Usted, un tercero, diferente y

• Cómo usar los componentes <Route />, <Switch /> y <BrowserRouter />.
• Cómo navegar usando el componente <Link /> y usando el gancho useHistory().
• Crear rutas dinámicas utilizando la propiedad de la ruta, es decir, <Route path=”/posts/:post-slug” component={Post} /> y obtener los valores de la ruta

5. Ganchos de reacción

Así que ha terminado con los componentes básicos y los fundamentos de React. Ahora es el momento de aprender React Hooks. Esta nueva función se agregó en React versión 16.8. Con la ayuda de React Hooks, puede escribir las características de React sin usar las clases. Los ganchos de reacción le permiten escribir menos código y eso hace que su aplicación sea eficiente, más simple y poderosa.

Trabajará principalmente en 5 conceptos básicos de React Hooks. Estos cinco conceptos básicos se dan a continuación:

• useState: la mayor parte del tiempo en su aplicación React utilizará este concepto para almacenar y administrar los datos.
• useEffect: usará este concepto en acciones como requests HTTP y trabajar con la API del navegador.
• useRef: se usará para hacer referencia a elementos JSX .
• useContext: esta propiedad de React Hooks se usará para acceder a los datos de React Context para compartir datos entre componentes fácilmente (en lugar de pasar accesorios)
• useReducer: este concepto en los ganchos de React se usará para almacenar y administrar datos en múltiples componentes.

Hemos discutido solo 5 ganchos que es importante aprender. Hay más de 5 ganchos, pero eso no es necesario inicialmente en su fase de aprendizaje. A medida que progrese y encuentre problemas en su aplicación, aprenderá más ganchos lentamente. 

6. Aprenda a trabajar con las API en las aplicaciones React

Sabemos que React es una biblioteca front-end para construir las interfaces de usuario. Un usuario interactúa con la parte frontal de la aplicación, accede a los datos desde allí o navega de una página a otra. 

React interactúa con el código de back-end de la aplicación. Obtenemos los datos de la parte de back-end de la aplicación, realizamos acciones como autenticación, mostrar el elemento al usuario, búsqueda, registro del usuario, etc. 

Principalmente, hay dos formas de trabajar con los datos del backend. La forma más común y estándar es usando las API REST . El otro y el más nuevo es GraphQL API , tipo

, el disponible para usar pero el más popular en React es Material UI

la biblioteca de clases de utilidad para diseñar su elemento. La popular biblioteca de clases de utilidades es Tailwind CSS . Como desarrollador, encontrará ambos. Por lo tanto, es bueno estar familiarizado con ambos tipos de bibliotecas.

8. paquete web

9. Reducción

En su aplicación React, deberá administrar los estados. Una vez que su aplicación comience a crecer, se convertirá en una aplicación compleja y tendrá que administrar los estados de todos los componentes. Redux, que una poderosa biblioteca de JavaScript resuelve este problema y ayuda a mantener el estado de la aplicación.

,dependiendo de un

paquetes de voluntad en profundidad con un