Curso react nivel medio

Los componentes son la base de cualquier aplicación en React. Un componente representa una parte de la interfaz de usuario y puede ser tan simple como un botón o tan complejo como toda una página.

1. Componentes de función y de clase

React nos permite crear dos tipos principales de componentes: de función y de clase.

  • Componentes de función: Son más simples y recomendados para la mayoría de los casos. Se escriben como funciones de JavaScript y pueden usar Hooks para manejar el estado y efectos.

Ejemplo de componente de función:

1<div id="app"></div>
1function Saludo() {
2  return <h1>Hola, mundo!</h1>;
3}
4
5const $app = document.getElementById("app");
6ReactDOM.render(<Saludo/>, $app);
  • Componentes de clase: Eran la forma principal de crear componentes en React antes de que existieran los Hooks. Utilizan la palabra clave class y un método render() para devolver el contenido.

Ejemplo de componente de clase:

Importante: Los componentes de clase están en desuso y se recomienda usar componentes de función con Hooks.

1<div id="app"></div>
1import React, { Component } from "https://cdn.skypack.dev/react";
2import ReactDOM from "https://cdn.skypack.dev/react-dom";
3
4class Saludo extends Component {
5  render() {
6    return <h1>Hola, mundo! (usando clases)</h1>;
7  }
8}
9
10// Renderiza el componente en el DOM
11ReactDOM.render(<Saludo />, document.getElementById('app'));

2. Props y Children

Las props (propiedades) son la manera de pasar datos de un componente a otro. Las props son inmutables, lo que significa que el componente que las recibe no puede cambiarlas.

Ejemplo de props:

1<div id="app"></div>
1interface SaludoProps {
2  nombre: string;
3}
4
5function Saludo({ nombre }: SaludoProps) {
6  return <h1>Hola, {nombre}!</h1>;
7}
8
9function App() {
10  return <Saludo nombre="Ana" />;
11}
12
13const $app = document.getElementById("app");
14if ($app) {
15  ReactDOM.render(<App />, $app);
16}

Children es una prop especial que permite pasar contenido entre etiquetas de un componente. Esto es útil cuando queremos que un componente envuelva a otros.

Ejemplo de uso de children:

1<div id="app"></div>
1.contenedor {
2  border: 1px solid #333;
3  padding: 10px;
4  background-color: #f0f0f0;
5}
1interface ContenedorProps {
2  children: React.ReactNode;
3}
4
5function Contenedor({ children }: ContenedorProps) {
6  return <div className="contenedor">{children}</div>;
7}
8
9function App() {
10  return (
11    <Contenedor>
12      <h1>Contenido dentro del contenedor</h1>
13    </Contenedor>
14  );
15}
16
17const $app = document.getElementById("app");
18if ($app) {
19  ReactDOM.render(<App />, $app);
20}

3. Ciclo de vida de los componentes

El ciclo de vida de un componente es el conjunto de fases por las que pasa desde su creación hasta su destrucción. Solo los componentes de clase tienen métodos de ciclo de vida, aunque los Hooks en componentes de función permiten manejar estas etapas de manera similar.

Algunos métodos de ciclo de vida más comunes son:

  • componentDidMount(): Se ejecuta una vez cuando el componente se monta (ideal para hacer peticiones de datos).
  • componentDidUpdate(): Se ejecuta cuando el componente se actualiza.
  • componentWillUnmount(): Se ejecuta cuando el componente se va a desmontar.

Con Hooks (en componentes de función), podemos manejar el ciclo de vida con useEffect:

1<div id="app"></div>
1import React, { useEffect } from "https://cdn.skypack.dev/react";
2import ReactDOM from "https://cdn.skypack.dev/react-dom";
3
4function Saludo() {
5  useEffect(() => {
6    console.log("El componente se ha montado");
7
8    return () => {
9      console.log("El componente se va a desmontar");
10    };
11  }, []);
12
13  return <h1>Hola, mundo!</h1>;
14}
15
16function App(){
17  return <Saludo/>
18}
19
20// Renderiza el componente en el DOM
21ReactDOM.render(<App />, document.getElementById('app'));

4. Comunicación entre componentes (padre-hijo)

La comunicación entre componentes en React suele ser unidireccional, lo que significa que los datos fluyen de padres a hijos a través de las props. Si un hijo necesita enviar datos al padre, se puede pasar una función del padre como prop.

Ejemplo de comunicación padre-hijo:

1<div id="app"></div>
1.contenedor {
2  border: 1px solid #333;
3  padding: 10px;
4  background-color: #f0f0f0;
5}
1interface HijoProps {
2  enviarMensaje: (mensaje: string) => void;
3}
4
5function Padre() {
6  const recibirMensaje = (mensaje: string) => {
7    console.log("Mensaje del hijo:", mensaje);
8  };
9
10  return (
11    <div>
12      <p>Componente padre (mira la consola para ver los mensajes)</p>
13      <Hijo enviarMensaje={recibirMensaje} />
14    </div>
15  );
16}
17
18function Hijo({ enviarMensaje }: HijoProps) {
19  return (
20    <button onClick={() => enviarMensaje('Hola desde el Hijo')}>
21      Enviar mensaje desde el hijo
22    </button>
23  );
24}
25
26function App() {
27  return <Padre />;
28}
29
30const $app = document.getElementById("app");
31if ($app) {
32  ReactDOM.render(<App />, $app);
33}

En este caso, el Padre pasa la función recibirMensaje como prop al Hijo, y el hijo la llama para enviar un mensaje al padre.

5. Manejo del estado

El estado es un objeto que contiene datos que pueden cambiar a lo largo del tiempo. En React, el estado se maneja con el método setState.

1<div id="app"></div>
1import React, { useState } from "https://cdn.skypack.dev/react";
2import ReactDOM from "https://cdn.skypack.dev/react-dom";
3
4function Counter() {
5  const [count, setCount] = useState(0);
6
7    // Función para incrementar el contador
8    const increment = () => {
9      setCount(count + 1);
10    };
11
12    return (
13      <div style={{ textAlign: "center", marginTop: "20px" }}>
14        <h1>Simple Counter</h1>
15        <p>Count: {count}</p>
16        <button onClick={increment}>Increment</button>
17      </div>
18    );
19}
20
21function App(){
22  return <Counter/>
23}
24
25ReactDOM.render(<App />, document.getElementById('app'));

6. Ejercicio práctico: Creación de una lista de tareas

Ahora vamos a crear una lista de tareas donde podamos agregar y eliminar elementos. Usaremos un componente de función con useState para manejar el estado.

1<div id="app"></div>
1import React, { useState } from "https://cdn.skypack.dev/react";
2import ReactDOM from "https://cdn.skypack.dev/react-dom";
3
4function ListaDeTareas() {
5  const [tareas, setTareas] = useState<string[]>([]);
6  const [nuevaTarea, setNuevaTarea] = useState<string>('');
7
8  // Agregar una tarea
9  const agregarTarea = () => {
10    if (nuevaTarea.trim()) {
11      setTareas([...tareas, nuevaTarea]);
12      setNuevaTarea('');
13    }
14  };
15
16  // Eliminar una tarea
17  const eliminarTarea = (index: number) => {
18    setTareas(tareas.filter((_, i) => i !== index));
19  };
20
21  return (
22    <div>
23      <h1>Lista de Tareas</h1>
24      <input
25        type="text"
26        value={nuevaTarea}
27        onChange={(e) => setNuevaTarea(e.target.value)}
28        placeholder="Escribe una tarea"
29      />
30      <button onClick={agregarTarea}>Agregar</button>
31      <ul>
32        {tareas.map((tarea, index) => (
33          <li key={index}>
34            {tarea}
35            <button onClick={() => eliminarTarea(index)}>Eliminar</button>
36          </li>
37        ))}
38      </ul>
39    </div>
40  );
41}
42
43function App() {
44  return <ListaDeTareas />;
45}
46
47// Renderiza el componente en el DOM
48const $app = document.getElementById('app');
49if ($app) {
50  ReactDOM.render(<App />, $app);
51}

En este código:

  • nuevaTarea guarda el texto que se escribe en el input.
  • tareas es un arreglo que guarda todas las tareas.
  • agregarTarea añade una tarea al arreglo tareas.
  • eliminarTarea elimina la tarea seleccionada.

Este ejercicio nos muestra cómo crear componentes, manejar props y gestionar el estado, todo con React. ¡Prueba a construirlo y agregar tus propias mejoras!

  • Loading...
← Conceptos básicos de Javascript para ReactVolver al cursoEstado y eventos →