APRENDIENDO LOS FUNDAMENTOS
React esencial: Aprende los conceptos básicos para desarrollar aplicaciones web de alto rendimiento
Frontend Roadmap: React Parte I
Ya sea que estés luchando con los conceptos fundamentales o simplemente quieras fortalecer tu base de conocimientos, hoy en este post exploraremos las características fundamentales de React y cómo nos facilita la construcción de componentes reutilizables, el uso del Virtual DOM para actualizaciones eficientes y mucho más.
Y si te estás preguntando ¿por qué React ? bueno pues React la biblioteca de JavaScript que revoluciona la forma en que construimos sitios web interactivos. Si estás buscando expandir tus oportunidades laborales en el campo del desarrollo web, aprender React es una decisión inteligente. Con su creciente demanda en la industria y su enfoque en la creación de interfaces intuitivas y reactivas, React te brinda las herramientas necesarias para destacarte como desarrollador. Su sintaxis clara y organizada, la facilidad para crear componentes reutilizables y su amplia comunidad de apoyo son solo algunos de los beneficios que hacen de React una elección poderosa.
Aprendiendo conceptos
React es una biblioteca de JavaScript (o multi librería) de código abierto desarrollada por Facebook o ahora llamado Meta.
💡 Se utiliza para construir interfaces de usuario interactivas y reactivas para aplicaciones web. React se enfoca en la construcción de componentes reutilizables que gestionan su propio estado y se actualizan de manera eficiente cuando ocurren cambios en los datos.
A continuación, veremos un breve resumen de las principales características de React, pero profundizaremos más en ellas en futuros artículos.
Componentes
React se basa en el concepto de componentes, que son bloques de código reutilizables utilizados para construir interfaces de usuario. Los componentes encapsulan el estado y el comportamiento, lo que facilita la creación y el mantenimiento de aplicaciones complejas de manera eficiente y organizada.
Virtual DOM
React utiliza un DOM virtual para actualizar eficientemente el navegador.
Es posible que te preguntes si es lo mismo o similar al DOM que aprendiste cuando estudiaste HTML y JavaScript. Bueno, es similar.
El DOM virtual es una representación ligera del DOM real y permite realizar comparaciones eficientes para identificar los cambios mínimos necesarios y actualizar solo esas partes en el DOM real.
JSX
React utiliza JSX (JavaScript XML), una extensión de sintaxis que permite escribir código similar a HTML dentro de JavaScript. JSX facilita la creación de componentes y la combinación de lógica y presentación en un solo lugar.
JSX significa “JavaScript XML”. Es una extensión de sintaxis que se utiliza en React. JSX te permite escribir código que se parece mucho a HTML dentro de tus archivos de JavaScript.
Imagina que estás construyendo una página web y necesitas crear un componente para mostrar un encabezado. En lugar de escribir solo JavaScript para crear ese encabezado, con JSX puedes escribir código que se asemeja a HTML. Por ejemplo, podrías tener algo como esto:
const Header = () => {
return <h1>Bienvenido a mi página web</h1>;
};En el código anterior, la línea <h1>Bienvenido a mi página web</h1> es JSX. Es similar a la etiqueta HTML <h1> que se utiliza para crear un encabezado en una página web. En JSX, puedes usar etiquetas como <h1>, <div>, <p>, etc., de manera similar a como lo harías en HTML.
JSX es útil porque te permite combinar lógica y presentación en un solo lugar. Puedes utilizar expresiones de JavaScript dentro de las etiquetas JSX para generar dinámicamente el contenido. Por ejemplo:
const nombre = "Ana";
const saludo = <p>Hola, {nombre}!</p>;
// Resultado: <p>Hola, Ana!</p>En el código anterior, la variable nombre contiene el valor "Ana". Dentro de la etiqueta <p>, utilizamos las llaves {} para insertar esa variable y generar dinámicamente el saludo.
JSX se compila a código JavaScript regular antes de ser ejecutado por el navegador. Esto significa que aunque escribas código JSX, en última instancia se convertirá en código JavaScript válido.
En resumen, JSX es una forma conveniente de escribir código similar a HTML dentro de tus archivos de JavaScript en React. Te permite combinar lógica y presentación en un solo lugar y facilita la creación de componentes en tus aplicaciones React.
Hooks
Los hooks se introdujeron en la versión 16.8 de React en 2019. Por lo que a esta fecha, 2023, es un concepto que debes manejar para crear solidos proyectos.
Los hooks son funciones que permiten utilizar el estado y otras características de React en componentes funcionales. Los hooks eliminan la necesidad de utilizar clases y simplifican la gestión del estado y los efectos secundarios en los componentes.
Si has visto anteriormente el uso de componentDidMount() o shouldComponentUpdate() en componentes de React, ahora están obsoletos, ya que han sido reemplazados por hooks como useState o useEffect, que, en mi humilde opinión, son mucho más sencillos de usar y recordar.
EJEMPLO
import React, { useState, useEffect } from 'react';
// Componente secundario
const CounterDisplay = ({ count }) => {
return <h1>Count: {count}</h1>;
};
// Componente secundario
const CounterButton = ({ increment }) => {
return <button onClick={increment}>Increment</button>;
};
// Componente padre o principal
const ExampleComponent = () => {
// 1. Componentes: Definición de un componente funcional
// que gestiona su propio estado
const [count, setCount] = useState(0);
// 2. Virtual DOM: Utilización del Virtual DOM para
// actualizar eficientemente el DOM real
useEffect(() => {
document.title = `Count: ${count}`;
}, [count]);
// 3. Unidireccionalidad de datos: El estado fluye desde
// el componente principal hacia los componentes secundarios
const incrementCount = () => {
setCount(count + 1);
};
// 4. JSX: Uso de JSX para combinar lógica y presentación
return (
<div>
{/* Componente secundario */}
<CounterDisplay count={count} />
{/* Componente secundario */}
<CounterButton increment={incrementCount} />
</div>
);
};
export default ExampleComponent;En este ejemplo:
- Componentes y Hooks: El componente funcional
ExampleComponentgestiona su propio estado utilizando el hookuseStatepara almacenar y actualizar el contador.CounterDisplayes un componente funcional que muestra el contador actual. Recibe el valor del contador (count) como una propiedad (count) y lo muestra en un elementoh1.CounterButtones un componente funcional que representa un botón de incremento. Recibe una función (increment) como una propiedad (increment) y la utiliza como el evento de clic del botón. - Virtual DOM: El hook
useEffectse utiliza para actualizar el título del documento (document.title) cada vez que el estado del contador (count) cambia. Esto demuestra cómo React utiliza el Virtual DOM para actualizar de manera eficiente solo la parte relevante del DOM real. - Unidireccionalidad de datos: El estado del contador fluye desde el componente principal (
ExampleComponent) hacia los componentes secundarios:CounterDisplayyCounterButton - JSX: El código JSX se utiliza para definir la estructura del componente y combinar la lógica (
count) con la presentación (<h1>Count: {count}</h1>y<button onClick={incrementCount}>Increment</button>).
Preguntas de Entrevista Técnica
¡Ok! y llegamos a la sección de posibles preguntas que podrías enfrentar durante una entrevista de trabajo.
Recuerda que las respuestas pueden variar según tu experiencia y estilo personal de explicación. A continuación, resumiré en términos sencillos algunos conceptos clave que vimos en este post, pero profundizaremos más en cada uno en siguientes post por si deseas brindar respuestas mucho más profundas.
¿Qué es React?
React es una biblioteca de código abierto en JavaScript utilizada para construir interfaces de usuario dinámicas e interactivas en aplicaciones web. Su enfoque en el uso de componentes permite crear estructuras organizadas para toda la aplicación.
¿Qué es JSX?
JSX hace referencia a la combinación de JavaScript y XML. Es la extensión de archivo utilizada al crear componentes en React, lo que te permite escribir una sintaxis similar a HTML y CSS junto con el código JavaScript.
¿Qué es el DOM virtual y cómo se diferencia del DOM real?
El DOM virtual es una representación liviana del DOM real utilizado por React para realizar actualizaciones eficientes en el navegador. A través de comparaciones inteligentes, el DOM virtual identifica los cambios mínimos necesarios y actualiza solo esas partes en el DOM real, lo que mejora el rendimiento de la aplicación.
¿Qué son los Hooks?
Los hooks son funciones introducidas recientemente en React que permiten utilizar el estado y otras características de React en componentes funcionales. Los hooks, como useState o useEffect, reemplazan la necesidad de utilizar clases en los componentes y simplifican la gestión del estado y los efectos secundarios.
¿Qué son los componentes en React?
En React, los componentes son bloques de código reutilizables utilizados para construir interfaces de usuario. Los componentes encapsulan el estado y el comportamiento, lo que facilita la creación y el mantenimiento eficiente de aplicaciones complejas.
¡Prepárate para destacar en tu próxima entrevista con estos conocimientos sobre React! Recuerda que, a medida que profundicemos en cada concepto, podrás ofrecer respuestas más detalladas y completas.
PD: Si eres un hablante nativo en inglés o prefieres aprender estos conceptos usando el idioma más usado en equipos internacionales, puedes consultar la versión gemela de esta publicación. Mismos conceptos, mismas explicaciones, pero en diferente idioma 😉 cada semana.
