Las 5 habilidades principales que debe conocer antes de aprender ReactJS

¿Sabes suficiente javascript antes de saltar a React?
¿Sabe cómo usar el método map() para recorrer una array en javascript o ReactJS?
Si está aprendiendo React y se queda atascado en este tipo de preguntas anteriores, definitivamente está cometiendo errores en su proceso de aprendizaje. No hay duda de que ReactJS es la biblioteca más popular entre los desarrolladores frontend y su popularidad aumenta día a día. El sitio web que se ejecuta en ReactJS se ve hermoso y la mayoría de los principiantes en el desarrollo también se sienten atraídos por ReactJs (desarrollado por Facebook), pero un error común que cometen muchos desarrolladores y personas experimentadas es saltar directamente a ReactJS (o alguna otra biblioteca y marco ) sin conocer los requisitos previos. Si va directamente a React, enfrentará muchos problemas mientras aprende esta biblioteca y también en las entrevistas. 
 

Se quedará atascado durante su entrevista si le hacen algunas preguntas relacionadas con ES6, JSX, Babel, el administrador de paquetes, javascript básico o algunos otros conceptos fundamentales. Vamos a discutir algunos requisitos previos y algunos conceptos básicos que debe conocer antes de saltar a React. Estos conceptos básicos también lo ayudarán a aprender otros marcos y bibliotecas de javascript en el futuro. 
 

1.HTML y CSS _

Todos los desarrolladores front-end comienzan su viaje con HTML y CSS. Entonces, antes de comenzar a aprender a reaccionar, debe tener un buen dominio de la escritura de HTML y CSS. Debe saber cómo escribir etiquetas HTML semánticas, cómo escribir selectores de CSS, cómo usar clases, cómo implementar un restablecimiento de CSS, modelo de caja, cómo restablecer a border-box, flexbox, cómo escribir aplicaciones web receptivas, incluidas las consultas de medios. y cómo construir una aplicación frontend usando HTML y CSS. 
 

2. JSX (Javascript XML) y Babel

En React, trabajará con JSX que parece HTML y puede considerarlo como JavaScript con sabor a HTML. Es la forma más fácil de agregar código HTML dentro de javascript o puede decir que es la extensión de la sintaxis del lenguaje Javascript. Debe tener una comprensión completa de lo que es JSX antes de comenzar a aprender React. Basta con echar un vistazo al código de abajo…
 

const h1 = <h1>Hello Programmers</h1>;

Cuando vea el código anterior por primera vez, puede resultarle confuso. ¿Es Javascript? o HTML? ¿o algo mas? Si ejecuta el código anterior en un archivo HTML, no se ejecutará, pero el código contiene la etiqueta HTML <h1>Hello world</h1> . Básicamente, JSX amplía ECMAScript para que el texto similar a XML/HTML pueda coexistir junto con el código de reacción de JavaScript. Entiéndelo a partir de la imagen y el código que se dan a continuación…
 

var MyComponent = React.createClass({
 
   render :function () {
 
     return( 
 
       <h2>Hello Programmers!</h2>
 
     );
 
   }
 
});
 
ReactDOM.render(<MyComponent/>, document.getElementById('content'));

Otra cosa que debes saber es Babel . Babel es un compilador que transforma el texto similar a HTML que se encuentra en los archivos JavaScript en objetos JavaScript estándar. Toma funciones de la última versión de javascript o ECMAScript 2015+ (ES6+) y las reduce a ES5 o javascript normal. Asegúrese de que su concepto debe ser claro sobre JSX y Babel si desea optar por React. Compruebe cómo Babel realiza la conversión desde el enlace aquí . 
 

3. Fundamentos de Javascript y ES6

Pase lo que pase… no puedes mejorar en React si tu fundamento de javascript no está claro. Durante las entrevistas, es una de las habilidades esenciales para aprender antes de pasar a reaccionar. Javascript es uno de los lenguajes más confusos para los desarrolladores e ignora pequeños errores que pueden crear un problema en su proyecto si no los nota antes. Así que asegúrese de aclarar primero su concepto básico sobre javascript y luego pasar a la versión avanzada de ECMAScript5 y ECMAScript6. Algunos de los temas se detallan a continuación, pero asegúrese de explorar todo lo que pueda y cree algunos proyectos para obtener un conocimiento profundo de javascript. 
Recuerde que construir la base básica de javascript lo ayudará a aprender cualquier marco, pero si el concepto no está claro, se quedará atascado en cualquier marco de javascript. Además, el entrevistador verificará primero sus fundamentos en javascript antes de pasar a React.
 

• Comience con variables, números, booleanos, strings y aclare sus conceptos sobre otros fundamentos muy básicos. Cree una pequeña aplicación en eso como una calculadora para ver cómo funcionan las cosas juntas.
• Obtenga información sobre operadores, condicionales, funciones, bucles, palabras clave de JavaScript, arrays, objetos y otros conceptos básicos.
• El manejo de eventos, la manipulación de DOM y cómo funciona la palabra clave ‘esta’ son totalmente diferentes en javascript (lo que es confuso para la mayoría de los desarrolladores).
• Función de orden superior, función de devolución de llamada, función de flecha, estado (cómo funciona el estado y la función setState()), alcance, clase y constructores, extensiones y herencia, mapa, reducción, filtro, promesas, módulos, cierres, const, let (diferencia entre var, let y const) y otras características de ES5 y ES6.

4. Administrador de paquetes (Node + Npm)

Cuando trabaje con ReactJS, tendrá que instalar muchos paquetes de software más pequeños. El paquete en javascript contiene todos los archivos necesarios para un módulo y los módulos son las bibliotecas de javascript que se pueden incluir en el proyecto Node. Los paquetes contienen dos cosas… archivos package.json + archivos js. Para instalar estos paquetes, necesita un buen instalador que pueda ayudarlo a descargar e instalar paquetes de software fácilmente sin preocuparse por las dependencias. Aquí NPM (Administrador de paquetes de Node) juega un papel y lo ayuda a instalar y realizar un seguimiento del software javascript. Puede usar NodeJs o Yarn para administrar estos paquetes de software. Puede instalar NPM instalando Node.js. Cuando instale Node.js, NPM se instalará automáticamente. 
Entonces, antes de pasar a React, debe tener una comprensión sólida del registro de NPM (administrador de paquetes de Node) y cómo instalar paquetes usando NPM. El registro de NPM realiza un seguimiento del archivo que se ha enviado. Cualquiera puede enviar estos archivos (paquetes o módulos). En resumen, el registro de NPM es el lugar donde los desarrolladores pueden ir y obtener el software para crear software. 
Supongamos que una persona ha escrito algún archivo javascript que es realmente útil. Él/ella piensa que otras personas podrían usarlo, por lo que lo envía al registro de NPM. Alguien más puede obtenerlo del registro web de NPM y descargarlo para su propio propósito. Obtenga más información sobre el NPM en GeeksforGeeks. 
 

5. Git y CLI (interfaz de línea de comandos)

Git (control de versiones) es otra habilidad imprescindible que un desarrollador debe tener para almacenar su proyecto en GitHub, Bitbucket y GitLab (plataforma de alojamiento de código). Ayuda a los desarrolladores a trabajar y colaborar entre sí y les permite rastrear y alojar diferentes versiones de archivos de proyecto. Debe tener un buen conocimiento de cómo funcionan Git y estas plataformas de alojamiento de código. Los desarrolladores usan el comando de Git para rastrear la versión de sus archivos, así que aprenda a usar todos los comandos, como empujar, extraer, agregar, confirmar, etc. También aprenda sobre fusiones, bifurcaciones, manejo de conflictos de fusiones, etc. 
Todo en React lo hará con la ayuda de CLI (interfaz de línea de comandos). Instalar paquetes, usar NPM, crear una aplicación de reacción, ejecutar la aplicación de reacción y muchas cosas, por lo que realmente necesita acostumbrarse a usar CLI. A continuación se muestra un ejemplo de ejecución de una aplicación de reacción mediante CLI.