Cómo aprender ReactJS: una guía completa para principiantes

Todo desarrollador front-end y desarrollador web sabe lo frustrante y doloroso que es escribir el mismo código en varios lugares. Si necesitan agregar un botón en varias páginas, se ven obligados a hacer mucho código. Los desarrolladores que usan otros marcos enfrentan los desafíos de volver a trabajar con la mayoría de los códigos, incluso cuando crean componentes que cambian con frecuencia. Los desarrolladores querían un marco o biblioteca que les permitiera desglosar componentes complejos y reutilizar los códigos para completar sus proyectos más rápido. Aquí entra React y resolvió este problema. 
 

React es la biblioteca de JavaScript más popular para crear interfaces de usuario. Es rápido, flexible y también tiene una sólida comunidad en línea para ayudarlo en todo momento. Lo mejor de React es que se basa en componentes , descompone su código complejo en piezas individuales, es decir, componentes, y eso ayuda a los desarrolladores a organizar su código de una mejor manera. Muchas empresas se están mudando a React y esa es la razón por la cual la mayoría de los desarrolladores principiantes y experimentados también amplían sus conocimientos aprendiendo esta biblioteca. 
Aprender esta biblioteca es una tarea abrumadora. Ve muchos tutoriales e intenta obtener el mejor material para aprender esta biblioteca, pero puede volverse abrumador si no conoce el camino correcto o el proceso paso a paso para aprenderlo. Vamos a discutir una hoja de ruta para comenzar con React y los requisitos previos fundamentales (lista de verificación) para saltar a React. Empecemos…

Lista de verificación/Requisitos previos

1. Conocimientos básicos de HTML, CSS y JavaScript.
2. Algunas características de ES6 de Javascript como
   • Let y Const
   • Funciones de flecha
   • Clase y palabra clave ‘esto’
3. Fundamentos de NodeJS y editores de código

1. HTML, CSS, JavaScript

Si es un desarrollador experimentado, omita esta sección, para los principiantes aquí hay una introducción rápida. 

• Cada desarrollador front-end comienza su viaje con estas tres cosas. Estos son los cimientos básicos de los cimientos del desarrollo web frontend y todos trabajan juntos para crear una aplicación web/sitio web completamente funcional.
• Considere un cuerpo humano como un sitio web o una aplicación web.
• HTML puede ser considerado como la estructura o “Esqueleto”, del cuerpo que dice qué tiene que ir a dónde.
• CSS define el estilo que es la «piel, carne», dice cómo debe verse un segmento en particular, cuál debe ser su color, altura, ancho, etc.,
• JavaScript define la funcionalidad que es la parte del «Cerebro» que le dice a cada una de las partes que haga qué.

2. Características ES6 de Javascript

ES6 es la versión de JavaScript y hay muchas características de ES6. Para comenzar con React, debe conocer las funciones de flecha, Let y Const, Class y la palabra clave ‘this’ .

Función de flecha : la función de flecha le permite escribir la sintaxis más corta para la función. Hace que su código sea limpio y más legible. Compruebe el fragmento de código a continuación…

// Old method
function greet()
{
    console.log('GeeksforGeeks');
}
greet();
var greet1 = function(){
    console.log('GeeksforGeeks');
}
greet1();
//ES6 method
var greet2 = () => {
    console.log('GeeksforGeeks');
}
greet2();

Let y Const : usará ‘let’ y ‘const’ en lugar de la palabra clave ‘var’. Ambos son diferentes a var, en palabras simples…

• Let define una variable local que limita su alcance al bloque en el que se declaran.
• Const define una variable constante cuyos valores no se pueden cambiar.

Clase y palabra clave ‘esta’: tendrá que aprender los conceptos de programación orientada a objetos como clase, método, objetos en ES6. Es posible que haya aprendido acerca de estos conceptos en otros lenguajes como C++ o Java . Lea sobre esto de ES6 | Classes y sigue este video tutorial para entenderlo.
Si hablamos de la palabra clave ‘esto’, representa el objeto actual en ejecución. Asegúrese de borrar el concepto de la palabra clave ‘esto’, que es bastante confuso para muchos desarrolladores. Junto con eso, aprenda qué son los métodos Call, Apply y Bind (utilizados para vincular/conectar la palabra clave ‘this’ a un objeto).

3. Fundamentos de NodeJS y editores de código

Comprender los fundamentos de NodeJS es importante para trabajar en ReactJS. En lenguaje simple, NodeJS es un entorno de ejecución para javascript. Mucha gente considera que es un lenguaje de programación lo cual no es cierto. Todos los navegadores tienen un motor JavaScript integrado en los navegadores, por ejemplo, Chrome tiene un motor V8 y Mozilla Firefox tiene SpiderMonkey. No puede realizar ninguna operación fuera del navegador, como operaciones de archivo, operaciones de sistema operativo, operaciones de red, y aquí nació Node. Node le permite realizar todas estas operaciones fuera del navegador. Está integrado con el motor V8 de cromo.
Ahora es posible que esté bastante familiarizado con NodeJs, así que analicemos todas las características de Node que debe conocer para aprender React .

• NPM (Administrador de paquetes de Nodes): NPM es un administrador de paquetes para instalar módulos y paquetes de Nodes en su proyecto, al igual que PIP para python.
• Palabras clave IMPORT y EXPORT. 
  • Importar: una vez que instale el módulo Node usando NPM en su proyecto, deberá usar la palabra clave ‘importar’ para usar ese módulo.
  • Exportar: use esta palabra clave cuando esté creando un módulo/componente y tenga que devolver solo una parte, no todos los métodos y variables.

Lea el artículo ReactJS | Importación y Exportación para obtener más ayuda sobre este tema. Puede usar cualquier editor de código para trabajar en React. Muchos desarrolladores web prefieren Visual Studio Code (VS CODE) (altamente recomendado), Sublime Text o Atom.

Aprendiendo ReactJS

Fundamentos: Todas las cosas anteriores que hemos discutido fueron el requisito previo de ReactJS. Ahora, una vez que aprenda todas las cosas anteriores, es hora de saltar a React. Comprenda el concepto básico de React primero. Aquí le daremos una descripción general.
React es una biblioteca de Javascript desarrollada por Facebook para crear interfaces de usuario interactivas. Sigue la arquitectura basada en componentes, lo que significa que dividirá toda su parte de la interfaz de usuario en componentes reutilizables, todos se hacen por separado y finalmente se ajustan a un componente principal que luego se representa. A continuación se presentan algunos temas importantes para aprender en ReactJS…

• Arquitectura de componentes (ya discutida).
• Estado: Básicamente, ‘estado’ contiene variables sincrónicas. Si cambia el valor de una variable de estado, el cambio se refleja inmediatamente en todos los lugares donde se usa esa variable en particular.
• Props: son como argumentos pasados ​​en una función o método. En React, los accesorios (argumentos) se pasan a una etiqueta HTML como argumentos de entrada.
• Componentes Funcionales, Componentes de Clase.
• Estilo (CSS) en React.
• aprenda cómo conectarse a las API con las aplicaciones React.

Lea el tutorial ReactJS | GeeksforGeeks , React Official Tutorial , y vea el video ReactJS Tutorial . Una vez que tenga una comprensión básica de React, puede comenzar a construir algunos proyectos básicos como…

• 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

Enrutador React: el enrutamiento React lo ayudará a comprender cómo funciona el enrutamiento en una aplicación de React. Cómo cargar el contenido de una página específica o cómo redirigir a una página específica utilizando React Router. Por ejemplo, para redirigir desde la página de ‘inicio’ a la página de ‘blog’, deberá configurar el enrutamiento para que solo pueda mostrar el contenido de la página de ‘blog’. Comprenda esto del video React Router for Beginners y React Router . Una vez que comprenda React Router, puede realizar algunos proyectos como una aplicación CURD simple o un clon de Hacker News.

Webpack: Webpack es un paquete de módulos en Javascript que lo ayuda a mantener las dependencias como archivos estáticos para su proyecto para que los desarrolladores no tengan que hacerlo. Webpack también viene con cargadores. Los cargadores ayudan a ejecutar tareas específicas en torno a su proyecto. Mire el video Tutorial de Webpack y lea sobre esto en los documentos oficiales de Webpack.

Representación del servidor: aprender este concepto lo ayudará a crear componentes en el servidor y representarlos como HTML en su navegador y cuando todos los módulos de JavaScript se descargan en el navegador, React sube al escenario. Es una de las características más geniales de React y se puede usar con cualquiera de las tecnologías de back-end. Comprenda este concepto del enlace React server rendering by Tyler McGinnis .

Redux: en una aplicación compleja, tendrá que administrar estados en todos los componentes. Redux, que es una biblioteca de JavaScript, resuelve este problema y lo ayuda a mantener los estados de la aplicación. En Redux almacenas todos tus estados en una sola fuente. Entiende este concepto de una mejor manera desde el enlace Introducción a React-Redux y Tutorial de React Redux para principiantes .

Se trata de la hoja de ruta para aprender React desde el principio. ¡Esperamos que esto haya sido útil!