React

Ejercicio useForm

Crear un formulario para poner la garantía de un electrodoméstico. Tiene dos campos ‘años’ y ‘precio’. Los dos son requeridos y el primero tiene que estar entre 2 y 5 y el segundo ser mayor de 500.

Cuando le demos a enviar que envíe los datos por post a ‘https://mitienda.com/garantia’

CRUD completo

Tenemos la siguiente tabla:

Producto

id, nombre, precio, referencia

Vamos a hacer un CRUD que nos de el mantenimiento completo. Lo hacemos, de momento, con json-server. Podéis ‘buscar inspiración’ en el de alumnos.

Una vez funcione:

El id lo pone el json server ¿Qué tendríamos que modificar para que fuera lo más parecido a un id autonumérico?
Vamos a añadir un campo de buscar. Lo que hará será filtrar los productos que tengan la cadena en el nombre

CRUD sencillo

Vamos a hacer un CRUD para la siguiente ‘base de datos’

{
  "notes": [
    {
      "id": 1,
      "content": "HTML is easy",
      "date": "2023-01-03T10:30:11.414Z",
      "important": false
    },
    {
      "id": 2,
      "content": "Browser can execute only JavaScript",
      "date": "2019-05-30T18:39:34.091Z",
      "important": false
    },
    {
      "id": 3,
      "content": "GET and POST are the most important methods of HTTP protocol",
      "date": "2023-01-09T09:29:26.131Z",
      "important": true
    },
    {
      "content": "Cchuetes",
      "date": "2022-12-18T20:25:10.598Z",
      "important": true,
      "id": 4
    },
    {
      "id": 5,
      "content": "Comprar pan",
      "date": "2023-01-09T08:46:37.794Z",
      "important": false
    },
    {
      "content": "Nueva nota",
      "date": "2023-01-09T09:29:21.122Z",
      "important": false,
      "id": 6
    }
  ]
}

De momento solo gestionamos el contenido. La fecha la ponemos automáticamente y si es importante o no lo dejamos de lado, ponemos siempre ‘false’.

CRUD comentado

import React, { useState, useEffect } from 'react';
import axios from 'axios';
 
const App = () => {
    // Estado de los posts. Aquí cargaremos la información de la api
    // Parecido a la de tareas
  const [posts, setPosts] = useState([]);
  // Para el formulario, en este caso todos los campos dentro de un objeto
  const [nuevoPost, setNuevoPost] = useState({ title: '', body: '' });
 
  // Esto se ejecuta la primera vez
  useEffect(() => {
    // Llamamos a la función que carga los posts
    obtenerPosts();
  }, []);
 
  // Aquí tenemos tres funciones porque son las tres operaciones que podemos hacer:
  // Leer, añadir y eliminar.
  // Es mejorable, pero funciona
 
  // Llamamos con axios a la api y ponemos lo obtenido en el estado
  const obtenerPosts = async () => {
    try {
      const response = await axios.get('http://localhost:4000/posts');
      setPosts(response.data);
    } catch (error) {
      console.error('Error al obtener posts:', error);
    }
  };
 
  // LLamamamos a la api con POST y los datos del formulario
  const agregarPost = async () => {
    try {
      await axios.post('http://localhost:4000/posts', nuevoPost);
      // Ponemos a cero el formulario
      setNuevoPost({ title: '', body: '' });
      // Cargadmos los datos de la api (podríamos hacerlo directamente en el estado)
      obtenerPosts();
    } catch (error) {
      console.error('Error al agregar post:', error);
    }
  };
 
  // Llamamos a la api con DELETE
  const eliminarPost = async (id) => {
    try {
      await axios.delete(`http://localhost:4000/posts/${id}`);
      // Cargamos los datos de nuevo
      obtenerPosts();
    } catch (error) {
      console.error('Error al eliminar post:', error);
    }
  };
 
  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {/* Lista de todos los posts con su 'key */}
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
            <button onClick={() => eliminarPost(post.id)}>Eliminar</button>
          </li>
        ))}
      </ul>
      {/** Formulario, el change no llama a ninguna función, directamente cambia el estado en
       * los dos campos. Yo prefiero hacerlo con una sola función.
       */}
      <h2>Agregar nuevo post</h2>
      <input
        type="text"
        value={nuevoPost.title}
        onChange={(e) => setNuevoPost({ ...nuevoPost, title: e.target.value })}
        placeholder="Título"
      />
      <textarea
        value={nuevoPost.body}
        onChange={(e) => setNuevoPost({ ...nuevoPost, body: e.target.value })}
        placeholder="Cuerpo"
      />
      <button onClick={agregarPost}>Agregar post</button>
    </div>
  );
};
 
export default App;

db.json

{
  "posts": [
    {
      "id": "1",
      "title": "Post 1",
      "body": "Cuerpo del post 1"
    },
    {
      "id": "29d4",
      "title": "Post 3",
      "body": "holi"
    },
    {
      "id": "e4da",
      "title": "dfsdfsdfsd",
      "body": "asdasd"
    }
  ]
}

Ejemplo useref

import React, { useRef } from "react";
 
function App() {
  // Crear una referencia con useRef
  const inputRef = useRef(null);
     
  // Función para obtener el valor actual del input
  const handleGetValue = () => {
    alert(`Valor actual del input: ${inputRef.current.value}`);
  };
 
  // Función para cambiar el valor del input
  const handleChangeValue = () => {
    inputRef.current.value = "Nuevo valor dinámico";
    alert("El valor del input ha sido cambiado");
  };
 
  return (
    <div>
      <h1>Ejemplo de obtener y cambiar valor con useRef</h1>
      {/* Input con referencia */}
      <input ref={inputRef} type="text" placeholder="Escribe algo aquí..." />
      <br />
      {/* Botón para obtener el valor */}
      <button onClick={handleGetValue}>Obtener valor</button>
      {/* Botón para cambiar el valor */}
      <button onClick={handleChangeValue}>Cambiar valor</button>
    </div>
  );
}
 
export default App;

Ejercicio Lista de la compra

Vamos a hacer un ejercicio para mantener una lista de la compra, sin API

Tenemos un campo de texto y un botón de añadir. Si escribimos algo y le damos a añadir lo veremos en una tabla debajo de ese botón.

Cada elemento de la lista de la compra tendrá un botón al lado para eliminarlo

Una cosa como esta:

Producto: [_________] [Añadir]
Lista
Patatas [Borrar]
Tomates [Borrar]
Bacon [Borrar]

Pasos a realizar:

¿Cuál es nuestro estado?
¿Qué componentes vamos a tener?
¿Cómo creamos nuestro ‘árbol’ y como intercambiamos la información?

Ejemplo contexto genérico

App

import React, {  useState } from "react";
 
import ContextoCon from "./ContextoCon";
import IncrementButton from "./IncrementButton";
import DisplayCount from "./DisplayCount";
 
function CounterProvider({ children }) {
  const [count, setCount] = useState(0);
 
  return (
    <ContextoCon valor={{ count, setCount }}>
      {children}
    </ContextoCon>
  );
}
function App() {
  return (
    <CounterProvider>
      <DisplayCount />
      <IncrementButton />
    </CounterProvider>
  );
}
 
export default App;

Contexto

import { createContext } from 'react'
const Contexto = createContext({})
 
export default Contexto;

ContextoCon

import Contexto from "./Contexto";
 
const ContextoCon= ({children,valor}) => {
     
    return   <Contexto.Provider value={valor}>
                {children}
            </Contexto.Provider>
}
 
export default ContextoCon;

IncrementButton

import  { useContext } from "react";
import Contexto from "./Contexto";
function IncrementButton() {
    const { count, setCount } = useContext(Contexto);
    return <button onClick={() => setCount(count + 1)}>Incrementar</button>;
  }
export default IncrementButton;

DisplayButton

import  { useContext } from "react";
import Contexto from "./Contexto";
function DisplayCount() {
    const { count } = useContext(Contexto);
    return <p>Contador: {count}</p>;
  }
 
export default DisplayCount;

Ejercicio mostrar Posts

App

import React, { useState, useEffect } from "react";
import Post from "./Post";
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
    const [data, setData] = useState(null);
   
    useEffect(() => {
      fetch("https://jsonplaceholder.typicode.com/posts")
        .then((response) => response.json())
        .then((json) => setData(json));
   
      return () => {
        console.log("Limpieza de efecto (si aplica)");
      };
    }, []); // Solo se ejecuta una vez, al montar el componente.
    const removePost=(id)=>{
        setData(data.filter(post=>post.id!=id))
    }
    return (
      <div>
        {data ? <table class="table table-striped">
        <thead>
          <tr>
            <th>Id</th>
            <th>Title</th>
            <th>Body</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
            {data.map((post)=>
                
                <Post key={post.id} post={post} remove={removePost}/>
               )}
        </tbody>
        </table>
        : <button class="btn btn-primary">
        <span class="spinner-border spinner-border-sm"></span>
        Cargando...
      </button>}
      </div>
    );
  }
   
  export default App;

Post

const Post= ({post,remove}) => {
    return <tr>
        <td>{post.id}</td>
        <td>{post.title}</td>
        <td>{post.body.slice(0,20)}...</td>
        <td><button class="btn btn-danger" onClick={()=>{remove(post.id)}}>Borrar</button></td>
    </tr>
}
 
export default Post;

Ejercicios React

En el juego de los 100 botones vamos a hacer lo siguiente:

Tener un estado con las variables ‘numActual’ y ‘finalizado’. numActual sera 1 y finalizado falso
En los botones llamaremos a una función del padre (como en el ejemplo de trifulcas)
En esa función tenemos que comprobar si el número pulsado es el correcto. Si el número que me pasa el hijo es igual al actual, si es así sumamos 1 al actual.
Si no es así, finalizado true
Si el número es 100 finalizado true

Si alguien quiere tirar de renderizado condicional y si finalizado es true mostrar ‘juego acabado’ y si no los números

Quiero una página que tenga tres botones, cada uno con un nombre de un color y al pulsar el botón en un

me salga ‘Mi color preferido es el ‘ y el color pulsado.

Minicalculadora:
Dos cajas de texto para poner números. Cuando cambien los valores que debajo salga el valor de la suma y el de la multiplicación.

Copilot

Estadística con Python

Git

Docker

Programación en C#

Categoría: React