CRUD completo con React

Aquí te proporciono un ejemplo completo de una aplicación CRUD (Crear, Leer, Actualizar, Eliminar) utilizando Axios para comunicarse con un servidor JSON Server y React para la interfaz de usuario. En este ejemplo, crearemos una simple aplicación para administrar posts.

Paso 1: Configuración del servidor JSON

1. Instala JSON Server si aún no lo has hecho:

npm install -g json-server

1. Crea un archivo db.json con algunos datos iniciales:

{
  "posts": [
    { "id": 1, "title": "Post 1", "body": "Cuerpo del post 1" },
    { "id": 2, "title": "Post 2", "body": "Cuerpo del post 2" }
  ]
}

1. Inicia JSON Server:

json-server --watch db.json --port 3001

Paso 2: Configuración de la aplicación React

1. Crea una nueva aplicación de React:

npx create-react-app crud-react-json-server

1. Instala Axios:

cd crud-react-json-server
npm install axios

Paso 3: Implementación de la aplicación React

Aquí está el código completo de la aplicación React:

// src/App.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';

const App = () => {
  const [posts, setPosts] = useState([]);
  const [nuevoPost, setNuevoPost] = useState({ title: '', body: '' });

  useEffect(() => {
    obtenerPosts();
  }, []);

  const obtenerPosts = async () => {
    try {
      const response = await axios.get('http://localhost:3001/posts');
      setPosts(response.data);
    } catch (error) {
      console.error('Error al obtener posts:', error);
    }
  };

  const agregarPost = async () => {
    try {
      await axios.post('http://localhost:3001/posts', nuevoPost);
      setNuevoPost({ title: '', body: '' });
      obtenerPosts();
    } catch (error) {
      console.error('Error al agregar post:', error);
    }
  };

  const eliminarPost = async (id) => {
    try {
      await axios.delete(`http://localhost:3001/posts/${id}`);
      obtenerPosts();
    } catch (error) {
      console.error('Error al eliminar post:', error);
    }
  };

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
            <button onClick={() => eliminarPost(post.id)}>Eliminar</button>
          </li>
        ))}
      </ul>
      <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;

Paso 4: Ejecución de la aplicación

Ejecuta la aplicación React:

npm start

Ahora deberías poder ver y administrar posts utilizando la aplicación React. Puedes agregar nuevos posts, eliminar posts existentes y ver la lista de posts actualizada en tiempo real gracias a JSON Server. Este ejemplo proporciona una base sólida para construir aplicaciones CRUD más complejas utilizando React y JSON Server.