Ir al contenido principal

Lo que deberías saber antes de comenzar con React (2da parte)

Imagen
De Dr. Lang

En el post anterior vimos algunas de las cosas que deberíamos saber antes de empezar con React. Continuando con el tema detallaremos algunas cosas.

1. ¿Es necesario saber Javascript? Sí, absolutamente así es.

  • Tener bases de programación. 
  • Tener noción de lo que es Javascript. 
  • Su paradigma, cómo declarar variables y constantes. 
  • Conocer sus estructuras de control (if, if-else, switch, for, while, etc.). 
  • Conocer sus estructruras de datos (arrays,matrices, listas,mapas, etc.). 
  • Entender que es el DOM (Document Object Model). 
  •  Cómo manipular el DOM. 
  • Funciones y funciones de flecha. 
  • Clases y objetos. 
  • Deconstrucción. 
  • Funciones como: .filter, .map() y .reduce
  • Cómo importar y exportar paquetes.

2. ¿Es necesario saber HTML y CSS? Sí,  al menos lo básico para crear una página HTML decente.

  • Conocer las etiquetas más usadas de HTML. 
  • Cómo usar CSS para darle un mejor estilo visual a las páginas HTML.

Miremos un ejemplo sencillo:

saludo.html

<!DOCTYPE html>
<html>
<head>
<style>
  body {background-color: powderblue;}
</style>
</head>
<body>
<p id="saludo"></p>
<button onclick="saludar()">Saludar</button>
<script>
function saludar() {
  document.getElementById("saludo").innerHTML = "Hola, mundo";
}
</script>
</body>
</html>

La página HTML integra tanto código Javascript como un estilo CSS (que podría invocarse desde un archivo externo con extensión *.css).

La función saludo() se encuentra en el bloque de código Javascript y se invoca desde la etiqueta button que tiene como párametro el nombre de la función.

Al dar clic sobre el botón se mostrará el mensaje "Hola, mundo" en la etiqueta de párrafo con el id="saludo" . Este es un ejemplo sencillo de HTML, CSS, Javascript y manipulación de DOM.

Ahora miremos ejemplos de uso de las funciones: .filter(), .reduce() y .map()

Uso de .filter() 

//`filter()` – Para mostrar solo ciertos elementos
const edades = [12, 25, 17, 30];
const mayoresDeEdad = edades.filter((edad) => edad >= 18);
// Uso en React: Filtrar datos antes de renderizarlos.
{mayoresDeEdad.map((edad) => <p>{edad} años</p>)}

Uso de .reduce() 

// `reduce()` – Para calcular valores acumulados
const precios = [100, 200, 50];
const total = precios.reduce((acum, precio) => acum + precio, 0);
//Uso en React: Mostrar totales, sumas o estadísticas.
<p>Total: ${total}</p>

Uso de .map() 

//  `map()` – Para renderizar listas en React
const nombres = ['Ana', 'Luis', 'Carlos'];
const elementos = nombres.map((nombre) => <li>{nombre}</li>);
// Ideal para mostrar listas dinámicas en JSX.
<ul>{elementos}</ul>

3. ¿Qué es React ? es una librería de JavaScript de código abierto para construir interfaces de usuario (UI) interactivas en aplicaciones web de una sola página (SPA).

Anteriormente se importaba. Ahora es recomendable crear un proyecto React con la herramienta Vite. Puesto que la herramienta https://create-react-app.dev/ ha sido declarada como deprecada.

Veamos un ejemplo de cómo crear una aplicación React con Vite: 

$ mkdir holamundo
$ cd holamundo
$ npm create vite@latest holamundo-react -- --template react
$ npm install
$ npm run dev

Esto creará el proyecto ``holamundo-react``, instalará las dependencias y ejecutará la aplicación en la ruta: http://localhost:5173/

4. ¿Qué es JSX ? Es una sintaxis que combina HTML con Javascript para definir interfaces. Un archivo con esta sintaxis debe tener la extensión *.jsx

const Saludo = () => {
  return <h1>¡Hola, mundo!</h1>;
};

¿Qué hace este bloque de código JSX?

  • Define un componente funcional llamado Saludo.
  • Retorna un encabezado con el texto “¡Hola, mundo!”.
  • JSX permite escribir HTML dentro de JavaScript de forma declarativa.

Cabe aclarar que los navegadores no admiten JSX directamente, por lo que se requiere la conversión mediante herramientas como Babel para transformarlo en JavaScript válido.

5. ¿Qué es un state en React)? Es un objeto JavaScript que almacena datos que pueden cambiar con el tiempo y que influyen en el renderizado de un componente. Se utiliza para gestionar el estado interno de un componente y responder a eventos del usuario, por ejemplo, cambiando si un usuario ha iniciado sesión o el valor de un contador. Para actualizarlo, se usan métodos como setState o el gancho (hook) useState.

Funciona para:

  • Gestión de datos: El estado es un objeto de pares clave-valor que rastrea la información dinámica de la interfaz. 
  • Actualización y renderizado: Cuando el estado cambia, React automáticamente vuelve a renderizar el componente para reflejar los nuevos datos.
  • Inmutabilidad: No se debe mutar el estado directamente. Para actualizarlo, se debe crear un nuevo objeto (o una copia) y usar la función de actualización para reemplazar el estado anterior.

Miremos un ejemplo de su uso:

import React, { useState } from 'react';

function Contador() {
  const [cuenta, setCuenta] = useState(0); // 0 es el valor inicial
  return (
    <div>
      <p>Has hecho clic {cuenta} veces</p>
      <button onClick={() => setCuenta(cuenta + 1)}>
        Haz clic aquí
      </button>
    </div>
  );
}

6. ¿Qué es una prop (propiedad)? Son una forma de pasar datos de un componente padre a un componente hijo, actuando como atributos que pueden contener cualquier tipo de dato. Son de solo lectura (inmutables) dentro del componente hijo, lo que permite una comunicación unidireccional y facilita la creación de componentes reutilizables y personalizables.

Miremos un ejemplo de su uso:

// Componente padre
function App() {
  return <MiComponente nombre="Julia" edad={38} />;
}

// Componente hijo
function MiComponente(props) {
  return (
    <div>
      <p>Hola, {props.nombre}</p>
      <p>Tienes {props.edad} años.</p>
    </div>
  );
}

7. ¿Cuál es la diferencia entre un state y una prop? Las props se utilizan para pasar datos de un componente padre a uno hijo, son de solo lectura y no se pueden modificar desde el componente receptor, mientras que el state se utiliza para gestionar datos internos de un componente que pueden cambiar con el tiempo (como interacciones del usuario) y solo se puede modificar dentro del propio componente.

  • Se usa props para pasar datos que un componente necesita de su padre y que no debe cambiar. 
  • Se usa state para datos internos de un componente que pueden cambiar con el tiempo, como un contador o el estado de un input.

Miremos un ejmplo de su uso: 

import React, { useState } from 'react';

// Componente hijo que recibe props
const Saludo = ({ nombre }) => {
  return <h2>Hola, {nombre}!</h2>;
};

// Componente principal que usa state
const Contador = () => {
  const [contador, setContador] = useState(0);

  return (
    <div>
      <Saludo nombre="Alquimista" />
      <p>Has hecho clic {contador} veces.</p>
      <button onClick={() => setContador(contador + 1)}>Incrementar</button>
    </div>
  );
};

export default Contador;

8. ¿Qué es un Hook? Son funciones que permiten usar el estado y otras características de React en componentes funcionales, sin la necesidad de usar clases.

Los principales Hook incluyen useState para manejar el estado, useEffect para el manejo de efectos secundarios useContext para usar el contexto useReducer para acceder a referencias DOM.

Miremos unos ejemplos:

useState 

import React, { useState } from 'react';

const Contador = () => {
  const [contador, setContador] = useState(0);

  return (
    <div>
      <p>Contador: {contador}</p>
      <button onClick={() => setContador(contador + 1)}>Incrementar</button>
    </div>
  );
};

useEffect 

import React, { useState, useEffect } from 'react';

const Temporizador = () => {
  const [segundos, setSegundos] = useState(0);

  useEffect(() => {
    const intervalo = setInterval(() => {
      setSegundos((s) => s + 1);
    }, 1000);
    return () => clearInterval(intervalo); // Limpieza
  }, []);

  return <p>Han pasado {segundos} segundos.</p>;
};

useContext 

import React, { createContext, useContext } from 'react';

const UsuarioContext = createContext();

const Saludo = () => {
  const usuario = useContext(UsuarioContext);
  return <h1>Hola, {usuario}!</h1>;
};

const App = () => {
  return (
    <UsuarioContext.Provider value="CARRARO">
      <Saludo />
    </UsuarioContext.Provider>
  );
};

useReducer

import React, { useReducer } from 'react';

const reducer = (estado, accion) => {
  switch (accion.type) {
    case 'incrementar':
      return { contador: estado.contador + 1 };
    case 'resetear':
      return { contador: 0 };
    default:
      return estado;
  }
};

const ContadorReducido = () => {
  const [estado, dispatch] = useReducer(reducer, { contador: 0 });

  return (
    <div>
      <p>Contador: {estado.contador}</p>
      <button onClick={() => dispatch({ type: 'incrementar' })}>+</button>
      <button onClick={() => dispatch({ type: 'resetear' })}>Reset</button>
    </div>
  );
};

React es un mundo por conocer. Seguiremos con este tema en próximas entregas.

Enlaces:

https://es.wikipedia.org/wiki/Single-page_application
https://www.geeksforgeeks.org/reactjs/why-cant-browsers-read-jsx/
https://babeljs.io/
https://www.instagram.com/p/DQN4H1MDM_x/?img_index=2


Etiquetas:

Comentarios

Publicar un comentario

Entradas populares de este blog

Programación Windows Batch (CMD) parte 3

De Dr. Lang
Crear ciclos para efectuar operaciones tediosas nos ahorrará tiempo para realizar otras tareas. En está ocasión veremos ciclos con FOR . ¿Cuál es la síntaxis de bucle FOR en Windows Batch? Si está dentro de un archivo *.bat : FOR %%variable IN (seq) DO operaciones Si lo ejecutamos en una terminal: FOR %variable IN (seq) DO operaciones Ejemplo 1 . Recorrer una secuencia de números del 0 al 5: recorrer.bat @ echo off FOR %%i in ( 0 1 2 3 4 5 ) DO echo Hola no. %%i pause Nos imprimirá en pantalla: Hola no. 0 Hola no. 1 Hola no. 2 Hola no. 3 Hola no. 4 Hola no. 5 ¿Puedo usar contadores? Si, se pueden usar. Ejemplo 2 . Uso de contadores: contador.bat @ echo off set numeros = 1 2 3 4 5 6 7 8 9 10 set cont = 0 for %%a in ( %numeros% ) do ( echo Hola no. %%a :: Contador set /a cont+ = 1 ) echo Total: %cont% Este código nos imprimirá, además de los mensajes Hola no. 0 ..., el total de valores conta...
3 comentarios
Leer más

TIOBE index 2024

De Beta
El índice TIOBE (o índice de la comunidad de programación TIOBE) mide la popularidad de los lenguajes de programación. Su índice no se basa en qué lenguaje de programación es mejor, si tiene mejor perfomance, si posee escalabilidad, si es más sencillo de aprender, de usar, de implementar, etc. Sólo se basa en la popularidad. En el número de referencias ya sea en blogs, foros de consulta, etc. No necesariamente si las empresas lo están usando en alguno de sus desarrollos. Este índice es útil para darse una idea qué lenguaje está cobrando más popularidad y prestigio. Enseguida una tabla con los primeros 5 lenguajes más populares. Índice de Noviembre 2024   Nov 2024  Nov 2023  Change  Programming Language  Ratings  Change  1  1    Python  22.85%  +8.69%  2  3  +  C++  10.64%  +0.29%  3  4  +  Java  9.60%  +1.26%  4 ...
Publicar un comentario
Leer más

Programación Windows Batch (CMD) parte 4

De Dr. Lang
Siguiendo con la serie de post sobre programación ( 1 , 2 , y 3 ) batch ahora veremos algunas cosas como operaciones aritméticas, operadores lógicos  y uso de ficheros. Cuando somos administradores de servidores o desarrolladores muchas veces tenemos que realizar tareas que nos quitan, relativamente, tiempo valioso que podríamos ocupar para otras cosas (como ver nuestro Facebook, jeje, broma).  Aprender a escribir scripts que nos faciliten algunas tareas siempre es útil. Por ejemplo, conocer todas las características técnicas de nuestro equipo de cómputo nos servirá cuando se realiza peritajes informáticos y soporte al equipo. Realizar respaldos automáticos a nuestras carpetas , archivos y directorios será más sencillo gracias a un script. Pero antes debemos aprender lo básico de la programación en batch. Ejemplo 1. Operaciones aritméticas básicas. aritmetica.bat @ echo off ::Nombre del archivo, imprimirá: aritmetica.bat echo %0 :: Set nos servirá para a...
Publicar un comentario
Leer más