Introducción
React JS es una biblioteca front-end de código abierto. Su objetivo principal es crear interfaces de usuario rápidas y atractivas para aplicaciones web y móviles.
Desarrollado por Facebook, ReactJS hace que los sitios web sean atractivos y atrae a la mayoría de los desarrolladores. Sin embargo, muchos cometen el error de empezar directamente con ReactJS (o cualquier otra biblioteca o framework) sin comprender sus prerrequisitos. Pasar directamente a ReactJS puede causar muchos problemas durante el aprendizaje de la biblioteca y en las entrevistas.
Requisitos previos esenciales para aprender ReactJS
HTML y CSS
Los componentes básicos de la web son HTML y CSS. El lenguaje utilizado para describir cada componente de un sitio web en tu navegador se llama HTML (lenguaje de marcado de hipertexto). Como resultado, puedes especificar encabezados, párrafos, enlaces, incrustaciones y más usando HTML, lo que ayuda a tu navegador a comprender cómo organizar la página web que estás viendo.
El lenguaje conocido como CSS, u Hojas de Estilo en Cascada, es lo que da a las páginas web su apariencia y diseño. En otras palabras, CSS se utiliza para crear sitios web atractivos con fuentes atractivas, colores vibrantes, fondos impactantes e incluso transiciones y efectos 3D espectaculares.
Todo desarrollador front-end empieza con HTML y CSS. Por lo tanto, cuando aprendas a usar React, deberías dominar la programación en HTML y CSS.
El primer requisito para aprender Reactjs es empezar a aprender HTML y CSS. Necesitas saber cómo crear etiquetas HTML semánticas, escribir selectores CSS, usar clases, sobrescribir CSS, implementar el modelo de caja y cambiar a border-box y flexbox, además de HTML y CSS para aplicaciones front-end y aplicaciones web responsivas. .
Conceptos básicos de JavaScript y ES6
La próxima versión de JavaScript, ECMAScript 6 o ES6, trae muchos cambios y nuevas funciones. Tu código será más moderno y legible gracias a las increíbles nuevas funciones y la nueva sintaxis JavaScript de ES6. Podrás hacer más con menos código. Aprenderemos sobre algunas de las increíbles novedades de ES6, como módulos, cadenas de plantilla, destructores de clases y funciones flash.
Antes de aprender React, deberías dominar ES6, ya que los hooks han reemplazado a los componentes basados en clases. Notarás que los hooks hacen un uso extensivo de las características de ES6.
Te resultará difícil usar React si no te sientes cómodo escribiendo funciones de flecha porque varios ganchos requieren que anides funciones de flecha dentro de otros, lo que puede resultar confuso.
Dado que React JS es totalmente compatible con ES6, aprender y comprender ES6 mejorará tu vida como desarrollador de React JS y Javascript porque hace que leer y escribir código React JS sea mucho más fácil.
Git y CLI (interfaz de línea de comandos)
Cuando se trata del proceso de desarrollo de software, Git es una herramienta muy importante y efectiva.
Git es esencialmente un sistema de control de versiones distribuido para el seguimiento de los cambios en el código fuente durante el desarrollo de aplicaciones. Git permite supervisar el progreso en cualquier sistema de archivos, incluso si se creó para facilitar la colaboración entre desarrolladores.
Aprenda a usar todos los comandos como push, pull, append, commit, etc., ya que los necesitará para controlar la versión de sus archivos. Además, aprenda a fusionar, ramificar y gestionar conflictos de fusión.
La CLI (Interfaz de Línea de Comandos) te ayudará a realizar todas las acciones en React. Debes familiarizarte con ella, ya que puede usarse para diversas tareas, como instalar paquetes, usar NPM, compilar y ejecutar aplicaciones React, entre otras.
Administrador de paquetes (Node + Npm)
Al usar ReactJS, es fundamental instalar varios paquetes de software más pequeños. Los paquetes de Node son bibliotecas de JavaScript que contienen todos los archivos necesarios. Los módulos son bibliotecas de JavaScript que se incluyen en los proyectos de Node. Los paquetes contienen dos elementos: archivos .js y archivos package.json. Necesita un buen instalador para instalar estos paquetes, ya que facilita la descarga y configuración de la aplicación sin preocuparse por las dependencias.
Aquí es donde entra en juego el Gestor de Paquetes de Node (NPM), que te ayuda a instalar y administrar aplicaciones JavaScript. Puedes instalar NPM instalando primero Node.js. NPM se configura automáticamente al instalar Node.js.
Puedes descargar Nodejs desde el sitio oficial. Haz clic aquí.
La mejor manera de comenzar a crear una nueva aplicación de una sola página en React es usar Create React App, que es un entorno conveniente para aprender React.
Los siguientes comandos crearán un proyecto de ejemplo. Puedes seguir estos pasos para empezar:
npx create-react-app my-app
cd my-app
npm startAsí que, antes de empezar a usar React, deberías familiarizarte con el registro de NPM (Gestor de Paquetes de Nodo) y las técnicas de instalación de paquetes. En resumen, el registro de NPM es el lugar donde los desarrolladores acceden para obtener el software que necesitan para desarrollar.
Variables ES6 – Let y Const
Antes de ES6, los desarrolladores declaraban variables con o sin la palabra clave var. ¡Sin embargo, todo ha cambiado!
JavaScript entró en la era moderna con ES6, que añadió dos nuevas palabras clave para definir variables: let y const. Se diferencian en su ámbito, que determina si una variable puede usarse y dónde. Las variables pueden encontrarse dentro de una función, dentro de un bloque o fuera de una función y un bloque.
var: Nivel de alcance de la función: esta palabra clave no permite el acceso a las variables declaradas dentro de las funciones desde el exterior.
let: Nivel de alcance del bloque: la palabra clave let hace que las variables sean accesibles fuera del alcance de la declaración.
const: Ámbito a nivel de bloque. La palabra clave const es similar a las variables declaradas con la palabra clave let. El valor de una constante no se puede modificar mediante redeclaración ni reasignación.
Funciones de flecha
Las funciones de flecha son una nueva característica de la versión ES6 de JavaScript. En comparación con las funciones normales, permiten escribir funciones de forma más sencilla.
- Simplifica el código y lo hace más fácil de leer.
- El mayor beneficio del "this" contextual es que elimina la necesidad de "vincular" funciones.
- Las funciones de flecha son compatibles en su mayoría con todos los navegadores actuales.
let x = (x, y) => x * y;Exportaciones e importaciones
Podemos crear módulos en JavaScript usando ES6. Un módulo puede contener clases, funciones, variables y objetos. Con los módulos JavaScript, puedes dividir tu código en diferentes archivos. Como resultado, el código base se mantiene fácilmente.
Podemos usar los comandos de exportación e importación para que todos estén disponibles en otro archivo. La exportación e importación de miembros en un módulo se realiza mediante las palabras clave export e import.
Operador de descanso y expansión
Los operadores de propagación y resto en JavaScript se representan con tres puntos (…). Sin embargo, estos dos operadores no son exactamente iguales. La principal diferencia entre ambos radica en que, al usar el operador resto, un array de JavaScript se llena con el resto de un conjunto específico de valores proporcionados por el usuario. Sin embargo, una sintaxis expandida expande un iterable a sus elementos.
Desestructuración de la estructura de objetos y matrices
La desestructuración es el proceso de descomprimir los componentes individuales de un objeto o matriz. Permite modificar e intercambiar elementos después de descomprimirlos, según la acción deseada.
JavaScript utiliza corchetes [] para destruir matrices, lo que nos permite almacenar el nombre de una variable asignada al nombre de la matriz que contiene el elemento.
Al destruir un objeto, usamos llaves con el nombre exacto del objeto que contiene. En el caso de los objetos, a diferencia de los arrays, donde podemos usar cualquier nombre de variable, solo podemos usar el nombre de los datos almacenados para abrir el elemento.
Literales de plantilla
En ES6, Template Literal introduce nuevas funciones que permiten generar cadenas con mayor flexibilidad que las cadenas dinámicas. Generalmente, una cadena se genera con comillas simples (') o dobles (‘).
El formato literal es una cadena literal que permite incrustar expresiones mediante comillas invertidas ( ). Permite la interpolación de cadenas y la creación de cadenas multilínea. Anteriormente, esta cadena se conocía como cadena de patrón.
Filtro y reducción de mapas
Existen tres funciones de matriz en JavaScript: map, reduce y filter. Cada una realiza una transformación u operación en una matriz durante la iteración. Cada una genera una nueva matriz en respuesta a la salida de la función.
Utilizando el método map(), se crea una matriz aplicando una función a cada elemento de la matriz anterior.
El método filter() aplica una sentencia condicional a cada elemento del array. Si la condición devuelve verdadero, inserta un elemento en el array de salida. Si la condición devuelve falso, los elementos no se insertan en el array de salida.
Las matrices de valores se reducen a un solo número mediante el método reduce(). Cada elemento de la matriz se ejecuta mediante una función reductora para generar el valor de salida.
Clases
JavaScript ES6 introduce las clases como una nueva característica. Los objetos se diseñan mediante clases y se pueden crear a partir de ellas.
Esta clase se puede comparar con un prototipo básico de casa. Contiene toda la información sobre las habitaciones, entradas, etc. Se construye la casa usando esta descripción como guía. El objeto es la casa. Podemos generar varios objetos de la misma clase, ya que se pueden construir varias casas con las mismas especificaciones.
// creation of a class
class Home {
constructor(area) {
this.area = area;
}
}
// creation of an object
const home1 = New Home(100);Empieza por estudiar los componentes funcionales. Los hooks de React son más fáciles de usar y requieren menos líneas de código para lograr los mismos objetivos que sus equivalentes basados en clases.
Aunque no todos reescriben sus aplicaciones con componentes funcionales, también conviene tener en cuenta los componentes de clase. Esto se debe a que la mayoría de las aplicaciones se desarrollan con componentes de clase.
En comparación con los componentes funcionales, crear componentes de clase en React JS es más complejo. Como parte de una clase de React JS, encontrarás constructores, métodos de ciclo de vida, funciones de renderizado e incluso gestión de estados para gestionar tus datos.
Esto en el navegador
En JavaScript, la palabra clave THIS de una función funciona de forma ligeramente diferente a otros lenguajes. También distingue entre casos estrictos y no estrictos.
El valor de THIS suele determinarse según cómo se llama a una función (ejecución en tiempo de ejecución). Al llamar a la función, puede tener un valor diferente cada vez, ya que no se puede establecer mediante asignación durante la ejecución. Esta función se puede establecer independientemente de cómo se llame mediante el método bind().
Promesas y espera asincrónica
En JavaScript o Node.js, existen diferentes maneras de gestionar operaciones. Diferentes operaciones operan simultáneamente durante la ejecución asincrónica, y la salida de cada operación se procesa en cuanto se accede a ella.
Una promesa en NodeJS es similar a una promesa en el mundo real. Garantiza que una acción se realizará. Una promesa controla lo que sucede después de un evento asincrónico y registra si el evento se ha realizado o no.
Las promesas se gestionan mediante métodos asincrónicos que utilizan Async/Await. El código se ha refactorizado recientemente para facilitar su lectura y uso. Esto simplifica la programación asincrónica, haciéndola más similar al código sincrónico.
¿Por qué las empresas prefieren Reactjs?
- Los componentes se escriben de forma más fluida: la eficiencia del código JavaScript se puede aumentar con JSX.
- Además de aumentar la eficiencia, simplifica el mantenimiento en el futuro.
- Con él la renderización se realiza más rápidamente.
- Se incluyen herramientas útiles para desarrolladores.
- Solicitud de una sola página (SPA)
- La conexión de datos es unidireccional, similar a un flujo de datos unidireccional.
- Optimizado para SEO
Resultado
React JS es una biblioteca front-end de código abierto. Su objetivo principal es diseñar interfaces de usuario para aplicaciones web y móviles que sean rápidas y atractivas. Los requisitos esenciales para ReactJS son HTML y CSS, conocimientos básicos de JavaScript y ES6, Git y CLI (Interfaz de Línea de Comandos) y el Gestor de Paquetes (Node + Npm). Solo necesitas saber sobre variables ES6, funciones de flecha, exportaciones e importaciones, operadores Rest y spread, destructores de objetos, arrays y la palabra clave "this" en JavaScript. Un alfabeto de patrones es un literal de cadena que permite incrustar expresiones mediante comillas invertidas. Existen tres funciones de array en JavaScript: map, reduce y filter, que realizan operaciones al iterar sobre un array.
