Blog / ReactJS: Conceptos de JavaScript a repasar antes de empezar con React

Para empezar con ReactJS es fundamental tener una base sólida de JavaScript, así que antes de embarcarte en dicha aventura, te recomendamos que hayas dedicado tiempo a tener problemas desarrollando proyectos con JavaScript sin ayuda de otras librerías.

En este post no vas a aprender JavaScript, si no repasaremos algunos de los conceptos clave de JavaScript para React que debes dominar antes de comenzar.

Import y Export

React divide el código en múltiples archivos y módulos, lo que hace indispensable conocer cómo importar y exportar funciones, objetos o componentes. Y se puede exportar las funciones y las variables por nombre o por defecto, donde por nombre permite exportar todas las que quieras por módulo, mientras por defecto solo una vez.

// Exports con nombre
export const planeta = "Marte";
export function calcularGravedad(masa, radio) {
    return (6.674 * Math.pow(10, -11) * masa) / Math.pow(radio, 2);
}

// Imports con nombre
import { planeta, calcularGravedad } from "./espacio";

// Exports por defecto
export default function velocidadEscape(masa, radio) {
    return Math.sqrt((2 * 6.674 * Math.pow(10, -11) * masa) / radio);
}

// Imports por defecto
import velocidadEscape from "./espacio";

Por lo general, al iniciar un proyecto con React podremos usar módulos directamente, pero en JavaScript tendremos que importar el script como type="module» en el HTML. De hecho React en el archivo index.html lo importa así:

<script type="module" src="/src/main.jsx"></script>

Métodos de Arrays

Los arrays en React son fundamentales, ya que se utilizan para renderizar listas de elementos de manera dinámica. Estos son los métodos que más se van a usar en React. Recalcar el uso de map en vez de forEach, porque, map no muta el array, sino que devuelve un resultado. Los siguientes métodos no mutan el array principal:

• map: Transforma cada elemento del array y devuelve un nuevo array.
• filter: Filtra los elementos según una condición.
• reduce: Reduce un array a un solo valor acumulado.

const planetas = ["Mercurio", "Venus", "Tierra", "Marte", "Júpiter"];

const planetasMayus = planetas.map(planeta => planeta.toUpperCase()); // ["MERCURIO", "VENUS", "TIERRA", "MARTE", "JÚPITER"]

const planetasConM = planetas.filter(planeta => planeta.startsWith("M")); // ["Mercurio", "Marte"]

const longitudTotal = planetas.reduce((total, planeta) => total + planeta.length, 0); // Suma total de caracteres

El Operador Spread (...)

El operador spread permite copiar o combinar arrays y objetos de manera sencilla.

Ejemplo:

const navesExploradoras = ["X-Wing", "TIE Fighter"];
const nuevasNaves = ["Halcón Milenario"];

podríamos pensar en hacerlo así para juntar dos arrays, pero nos daría el siguiente resultado:

const flotaEspacial = [navesExploradoras, nuevasNaves];
// Esto genera: [["X-Wing", "TIE Fighter"], ["Halcón Milenario"]] (un array dentro de otro)

Usando el operador spread, en cambio:

const flotaUnificada = [...navesExploradoras, ...nuevasNaves];
// Esto genera: ["X-Wing", "TIE Fighter", "Halcón Milenario"] (fusiona los arrays en uno solo)

también funciona con objetos

const piloto = {
 nombre: "Luke Skywalker",
 nave: "X-Wing"
};

const pilotoConRango = {
 rango: "Comandante",
 ...piloto
};
// Resultado: { rango: "Comandante", nombre: "Luke Skywalker", nave: "X-Wing" }

Desestructuración de Objetos y Arrays

La desestructuración hace que el código sea más limpio y fácil de leer, especialmente en los props de React. No es más que extraer los elementos o los paros de los objetos y arrays

// Con arrays
const galaxias = ["Vía Láctea", "Andrómeda"];

const [primeraGalaxia, segundaGalaxia] = galaxias;
console.log(`Las galaxias son ${primeraGalaxia} y ${segundaGalaxia}.`);

// Con objetos
const satelite = { nombre: "Luna", planeta: "Tierra" };

const { nombre, planeta } = satelite;
console.log(`${nombre} orbita alrededor de ${planeta}`);

Pasar Funciones como Propiedades

En React, los componentes pueden recibir funciones como propiedades (props) para manejar eventos o actualizar el estado de los componentes. Esto permite que un componente hijo pueda ejecutar funciones definidas en su componente padre, lo que facilita la comunicación entre ellos. Es especialmente útil para manejar eventos, actualizar el estado o modificar datos en la aplicación.

function Boton({ lanzarCohete }) {
    return <button onClick={lanzarCohete}>Despegue</button>;
}

function Mision() {
    const iniciarLanzamiento = () => alert("¡Cohete lanzado al espacio!");
    return <Boton lanzarCohete={iniciarLanzamiento} />;
}

Funciones Arrow (o funciones flecha)

Las funciones arrow (=>) permiten escribir funciones más concisas y son geniales para callbacks y métodos de array como map, filter y reduce, ya que simplifican la sintaxis y hacen el código más ordenado y fácil de leer.

const orbitar = planeta => `El planeta ${planeta} está en órbita.`;
console.log(orbitar("Saturno"));

const calcularDistancia = (velocidad, tiempo) => velocidad * tiempo;
console.log(calcularDistancia(30000, 5)); // 150000 km

Template Literals

Los template literals permiten escribir cadenas de texto de manera más cómoda, integrando las variables de JavaScript dentro, sin tener que estar partiendo la cadena y uniéndola con «+». Se hacen utilizando los backtick ` `, en vez de las comillas simples ' ' o dobles » «. Y para insertar el JavaScript en línea ${miVariable}. Además, hacen una interpretación literal, de espacios y saltos de línea.

const estrella = "Sol";
console.log(`Nuestra estrella principal es el ${estrella}.`);

Operador Ternario

El operador ternario no es otra cosa que un condicional (el if) de toda la vida que va a permitir condicionar el renderizado de JSX en React, pero que sería algo así como condicionar la salida de las cadenas de texto, vamos con un ejemplo:

const esHabitable = true;
const mensaje = esHabitable ? "Este planeta es habitable." : "Este planeta no es habitable.";
console.log(mensaje);

Promesas y async/await

React maneja datos asíncronos (por ejemplo, llamadas a APIs), por lo que recordar sobre todo fetch y async/await es clave.

Async/await simplifica el uso de promesas, le añade una capa mucho más cómoda en comparación a hacerlo con callbacks o con las promesas (.then) en sí, lo que se llama syntactic sugar.

Su uso: async declara funciones que devuelven promesas, y await pausa la ejecución hasta resolverlas. Los posibles se gestionan con try/catch. Conseguimos así un código más legible y control estructurado, además que es mucho más fácil identificar funciones asíncronas.

async function obtenerDatosEspaciales() {
  const respuesta = await fetch("/api/planetas");
  const datos = await respuesta.json();
  console.log(datos);
}

Conclusión

Dominar estos conceptos de JavaScript para React te prepara para entender la lógica detrás del JSX y los componentes, escribir código más limpio y mantenible y evitar errores comunes al manejar props y estados

Si además tienes claros conceptos como el manejo del DOM y la lógica de programación, recordando estos conceptos, ya tienes gran parte del camino recorrido para empezar construir cosas con React y llevar tu desarrollo web al siguiente nivel.