Quickstarters
¿Cómo construir una aplicación CRUD con ReactJS?

43min
Introducción
En este tutorial, construirás una aplicación CRUD (crear, leer, actualizar y eliminar) completa utilizando ReactJS. 
Esta guía está diseñada para realizar las operaciones básicas de una aplicación de software al demostrar cómo construir aplicaciones CRUD que gestionen y actualicen datos de manera efectiva. 
Comenzarás creando y configurando un proyecto de Back4app llamado Basic-CRUD-App-ReactJS, que actúa como un sistema backend robusto para tu aplicación web.
A continuación, diseñarás un esquema de base de datos escalable definiendo colecciones y campos detallados, ya sea manualmente o con la ayuda del Agente de IA de Back4app. 
Luego, aprovecharás la Aplicación de Administración de Back4app, una herramienta de gestión fácil de usar con una interfaz de arrastrar y soltar, para gestionar tus colecciones de datos fácilmente. 
Esta interfaz de administración mejora la experiencia del usuario y simplifica la interfaz de usuario, permitiendo a los usuarios realizar operaciones CRUD rápidamente.
Finalmente, desplegarás tu frontend de ReactJS e integrarás con Back4app utilizando REST/GraphQL (o el SDK de Parse, donde esté disponible), todo mientras aseguras tu backend con controles de acceso avanzados.
Al final de esta guía, habrás construido una aplicación web lista para producción que no solo admite operaciones CRUD básicas, sino que también incluye autenticación de usuarios y capacidades robustas de actualización de datos.
Puntos Clave
Aprende a construir aplicaciones CRUD que gestionen datos de manera eficiente utilizando un sistema de gestión de bases de datos confiable.
Obtén información práctica sobre el diseño de un backend escalable e intégralo con un frontend de ReactJS para mejorar la experiencia del usuario.
Descubre cómo usar una herramienta de gestión de arrastrar y soltar (la aplicación de administración de Back4app) para simplificar las operaciones de crear, leer, actualizar y eliminar.
Comprende las técnicas de implementación, incluida la contenedorización con Docker, para lanzar rápidamente tu aplicación web.
﻿
Requisitos Previos
Antes de comenzar, asegúrate de tener lo siguiente:
Una cuenta de Back4app y un nuevo proyecto configurado.
Si necesitas ayuda, consulta Introducción a Back4app.
Un entorno de desarrollo de ReactJS.
Usa Create React App o una herramienta similar. Asegúrate de que Node.js (versión 14 o superior) esté instalado.
Comprensión básica de JavaScript, ReactJS y APIs REST.
Revisa la documentación de ReactJS si es necesario.
﻿
Paso 1 – Configuración del Proyecto
Creando un Nuevo Proyecto en Back4app
Inicia sesión en tu cuenta de Back4app.
Haz clic en el botón “Nueva App” en tu panel de control.
Ingresa el nombre del proyecto: Basic-CRUD-App-ReactJS y sigue las instrucciones para crear tu proyecto.
Crear Nuevo Proyecto
﻿
Una vez creado, tu nuevo proyecto aparecerá en tu panel de control de Back4app, proporcionando una base sólida para la configuración de tu backend y la gestión del proyecto.
﻿
Paso 2 – Diseño del Esquema de la Base de Datos
Diseñando Tu Modelo de Datos
Para la aplicación CRUD básica, crearás varias colecciones. 
A continuación se presentan algunos ejemplos de las colecciones que necesitarás, describiendo los campos y tipos de datos necesarios para ayudarte a configurar eficazmente el esquema de tu base de datos.
Estas colecciones están diseñadas para realizar las operaciones CRUD fundamentales que permiten a los usuarios crear, leer, actualizar y eliminar datos.
1. Colección de Artículos
Esta colección almacena información sobre cada artículo.
Campo
Tipo de dato
Descripción
_id
ObjectId
Clave primaria generada automáticamente.
título
Cadena
El título del artículo.
descripción
Cadena
Una breve descripción del artículo.
creado_en
Fecha
Marca de tiempo cuando se creó el elemento.
actualizado_en
Fecha
Marca de tiempo cuando el artículo fue actualizado por última vez.
2. Colección de Usuarios
Esta colección almacena información del usuario y detalles de autenticación.
Campo
Tipo de dato
Descripción
_id
ObjectId
Clave primaria generada automáticamente.
nombre de usuario
Cadena
Nombre de usuario único para el usuario.
correo electrónico
Cadena
Dirección de correo electrónico única.
hash_de_contraseña
Cadena
Contraseña hash para autenticación.
creado_en
Fecha
Marca de tiempo cuando se creó la cuenta de usuario.
actualizado_en
Fecha
Marca de tiempo cuando se actualizó la cuenta de usuario.
Puedes configurar estas colecciones manualmente en el panel de control de Back4app creando una nueva clase para cada colección y añadiendo columnas para definir los campos.
Crear Nueva Clase
﻿
Puedes crear fácilmente campos para tu base de datos seleccionando un tipo de dato, nombrando el campo, estableciendo un valor predeterminado y definiendo si es obligatorio.
Crear Columna
﻿
﻿
Usando el Agente AI de Back4app para la Generación de Esquemas
El Agente AI de Back4app es una herramienta poderosa disponible directamente desde tu panel de control de Back4app. 
Le permite generar automáticamente el esquema de su base de datos basado en un aviso que describe sus colecciones y campos deseados.
Esta funcionalidad es un ahorro de tiempo significativo para la gestión de proyectos y ayuda a garantizar que su sistema de gestión de bases de datos esté configurado para realizar las operaciones básicas requeridas por su aplicación web.
Cómo usar el Agente de IA:
Abre el Agente de IA:
Inicie sesión en su panel de Back4app y localice el Agente de IA en el menú o dentro de la configuración de su proyecto.
Describe tu modelo de datos:
En la interfaz del Agente de IA, pega un aviso detallado que describa las colecciones y campos que necesitas.
Revisar y aplicar:
Una vez enviado, el Agente de IA generará las colecciones y definiciones de campo. Revise estas sugerencias y aplíquelas a su proyecto.
Ejemplo de aviso
Text
Create the following collections in my Back4app application:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
Create the following collections in my Back4app application:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
Usar el Agente de IA de esta manera ahorra tiempo y asegura que su esquema sea consistente y optimizado para las necesidades de su aplicación.
﻿
Paso 3 – Habilitando la Aplicación de Administración y Operaciones CRUD
Descripción general de la Aplicación de Administración
La Aplicación de Administración de Back4app es una poderosa interfaz sin código que te permite gestionar tus datos de backend. 
Esta herramienta de gestión proporciona una interfaz de usuario de arrastrar y soltar que permite a los usuarios realizar fácilmente operaciones CRUD como crear, leer, actualizar y eliminar registros.
Habilitando la Aplicación de Administración
Navega al menú “Más en tu panel de Back4app.
Haz clic en “Aplicación de Administración” y luego en “Habilitar Aplicación de Administración.”
Configura tus credenciales de administrador creando tu primer usuario administrador. Este proceso también establece roles (por ejemplo, B4aAdminUser) y colecciones del sistema.
Habilitar Aplicación de Administración
﻿
Después de habilitar, inicia sesión en la Aplicación de Administración para gestionar tus datos.
Panel de administración de la aplicación
﻿
Uso de la aplicación de administración para operaciones CRUD
Dentro de la aplicación de administración puedes:
Crear registros: Haz clic en el botón “Agregar registro” dentro de una colección (por ejemplo, Artículos) para crear nuevas entradas.
Leer/Actualizar registros: Selecciona cualquier registro para ver sus detalles o editar campos, asegurando una actualización de datos fluida.
Eliminar registros: Usa la opción de eliminar para quitar registros que ya no son necesarios.
Esta herramienta de gestión fácil de usar mejora la experiencia general del usuario al proporcionar una interfaz simple de arrastrar y soltar para funciones CRUD.
﻿
Paso 4 – Integrando ReactJS con Back4app
Ahora que tu backend está configurado y gestionado a través de la aplicación de administración, es hora de conectar tu frontend de ReactJS a Back4app.
Opción A: Usando el SDK de Parse
Instalar el SDK de Parse:
Bash
npm install parse
npm install parse
﻿
Inicializar Parse en tu aplicación React:
Crea un archivo (por ejemplo, src/parseConfig.js):
JS
// src/parseConfig.js
import Parse from 'parse';
// Reemplaza con tus credenciales reales de Back4app
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// src/parseConfig.js
import Parse from 'parse';
// Reemplaza con tus credenciales reales de Back4app
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
Usar Parse en un componente de React:
Por ejemplo, crea un componente para obtener y mostrar elementos:
JS
// src/components/ItemsList.js
import React, { useEffect, useState } from 'react';
import Parse from '../parseConfig';
const ItemsList = () => {
  const [items, setItems] = useState([]);
  useEffect(() => {
    const fetchItems = async () => {
      const Items = Parse.Object.extend("Items");
      const query = new Parse.Query(Items);
      try {
        const results = await query.find();
        setItems(results);
      } catch (error) {
        console.error("Error al obtener elementos:", error);
      }
    };
    fetchItems();
  }, []);
  return (
    <div>
      <h2>Elementos</h2>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.get("title")} — {item.get("description")}
          </li>
        ))}
      </ul>
    </div>
  );
};
export default ItemsList;
// src/components/ItemsList.js
import React, { useEffect, useState } from 'react';
import Parse from '../parseConfig';
const ItemsList = () => {
  const [items, setItems] = useState([]);
  useEffect(() => {
    const fetchItems = async () => {
      const Items = Parse.Object.extend("Items");
      const query = new Parse.Query(Items);
      try {
        const results = await query.find();
        setItems(results);
      } catch (error) {
        console.error("Error al obtener elementos:", error);
      }
    };
    fetchItems();
  }, []);
  return (
    <div>
      <h2>Elementos</h2>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.get("title")} — {item.get("description")}
          </li>
        ))}
      </ul>
    </div>
  );
};
export default ItemsList;
﻿
Opción B: Usando REST o GraphQL
Si tu entorno no soporta el SDK de Parse, puedes realizar operaciones CRUD usando REST o GraphQL. Por ejemplo, para obtener elementos usando REST:
JS
// Example REST call to fetch items
const fetchItems = async () => {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Fetched items:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
};
fetchItems();
// Example REST call to fetch items
const fetchItems = async () => {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Fetched items:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
};
fetchItems();
﻿
Integra estas llamadas a la API en tus componentes de React según sea necesario.
﻿
Paso 5 – Asegurando tu Backend
Listas de Control de Acceso (ACLs)
Asegure sus datos asignando ACLs a los objetos. Por ejemplo, para crear un elemento privado:
JS
async function createPrivateItem(itemData, ownerUser) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Set ACL: only the owner can read and write
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Private item created:', savedItem);
  } catch (error) {
    console.error('Error saving item:', error);
  }
}
async function createPrivateItem(itemData, ownerUser) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Set ACL: only the owner can read and write
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Private item created:', savedItem);
  } catch (error) {
    console.error('Error saving item:', error);
  }
}
﻿
Permisos a Nivel de Clase (CLPs)
En el panel de control de Back4app, configure CLPs para cada colección para establecer reglas de acceso predeterminadas. Esto asegura que solo los usuarios autenticados o autorizados puedan acceder a datos sensibles.
﻿
Paso 6 – Autenticación de Usuarios
Configuración de Cuentas de Usuario
Back4app aprovecha la clase User de Parse para la autenticación. En tu aplicación React, maneja el registro y el inicio de sesión de usuarios de la siguiente manera:
JS
// src/components/Auth.js
import React, { useState } from 'react';
import Parse from '../parseConfig';

export const SignUp = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');

  const handleSignUp = async (e) => {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', username);
    user.set('password', password);
    user.set('email', email);

    try {
      await user.signUp();
      alert('User signed up successfully!');
    } catch (error) {
      alert('Error signing up: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleSignUp}>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={e => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={e => setPassword(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <button type="submit">Sign Up</button>
    </form>
  );
};
// src/components/Auth.js
import React, { useState } from 'react';
import Parse from '../parseConfig';

export const SignUp = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');

  const handleSignUp = async (e) => {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', username);
    user.set('password', password);
    user.set('email', email);

    try {
      await user.signUp();
      alert('User signed up successfully!');
    } catch (error) {
      alert('Error signing up: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleSignUp}>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={e => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={e => setPassword(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <button type="submit">Sign Up</button>
    </form>
  );
};
﻿
Se puede utilizar un enfoque similar para el inicio de sesión y la gestión de sesiones. Se pueden configurar características adicionales como inicios de sesión sociales, verificación de correo electrónico y restablecimiento de contraseñas en el panel de control de Back4app.
﻿
Paso 7 – Desplegando tu Frontend de ReactJS con Despliegue Web
La función de Despliegue Web de Back4app te permite alojar tu frontend de ReactJS sin problemas al desplegar tu código desde un repositorio de GitHub.
En esta sección, aprenderás cómo preparar tu construcción de producción, comprometer tu código fuente en GitHub, integrar tu repositorio con Despliegue Web y desplegar tu sitio.
7.1 Prepara tu Construcción de Producción
Abre la carpeta de tu proyecto en una terminal.
Ejecuta el comando de construcción:
Bash
npm run build
npm run build
﻿
Este comando crea una build carpeta que contiene todos los archivos estáticos optimizados (incluyendo index.html, JavaScript, CSS e imágenes).
Verifica la Construcción:
Asegúrate de que la build carpeta contenga un archivo index.html junto con los subdirectorios de activos necesarios.
﻿
7.2 Organiza y Sube Tu Código Fuente
Tu repositorio debe incluir el código fuente completo de tu frontend de ReactJS. Una estructura de archivos típica podría verse así:
Text
Basic-CRUD-App-ReactJS-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── parseConfig.js
│   └── components/
│       ├── ItemsList.js
│       └── Auth.js
├── package.json
└── README.md
Basic-CRUD-App-ReactJS-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── parseConfig.js
│   └── components/
│       ├── ItemsList.js
│       └── Auth.js
├── package.json
└── README.md
﻿
Archivos de Código Fuente de Ejemplo
src/parseConfig.js
JS
// src/parseConfig.js
import Parse from 'parse';

// Replace with your actual Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
// src/parseConfig.js
import Parse from 'parse';

// Replace with your actual Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
﻿
src/App.js
JS
// src/App.js
import React, { useEffect, useState } from 'react';
import Parse from './parseConfig';

function App() {
  const [items, setItems] = useState([]);
  const [newItemTitle, setNewItemTitle] = useState("");
  const [newItemDescription, setNewItemDescription] = useState("");
  const [editingItemId, setEditingItemId] = useState(null);
  const [editingTitle, setEditingTitle] = useState("");
  const [editingDescription, setEditingDescription] = useState("");

  const fetchItems = async () => {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    try {
      const results = await query.find();
      setItems(results);
    } catch (error) {
      console.error("Error fetching items:", error);
    }
  };

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

  const handleAddItem = async () => {
    const Items = Parse.Object.extend("Items");
    const item = new Items();
    item.set("title", newItemTitle);
    item.set("description", newItemDescription);

    try {
      await item.save();
      setNewItemTitle("");
      setNewItemDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error saving item:", error);
    }
  };

  const handleDeleteItem = async (id) => {
    try {
      const item = await Parse.Object.createWithoutData("Items", id);
      await item.destroy();
      fetchItems();
    } catch (error) {
      console.error("Error deleting item:", error);
    }
  };

  const startEditingItem = (item) => {
    setEditingItemId(item.id);
    setEditingTitle(item.get("title"));
    setEditingDescription(item.get("description"));
  };

  const handleUpdateItem = async () => {
    try {
      const Items = Parse.Object.extend("Items");
      const item = new Items();
      item.id = editingItemId;
      item.set("title", editingTitle);
      item.set("description", editingDescription);
      await item.save();
      setEditingItemId(null);
      setEditingTitle("");
      setEditingDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error updating item:", error);
    }
  };

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Items</h1>
      <div style={{ marginBottom: '1rem' }}>
        <h2>Add Item</h2>
        <input 
          type="text" 
          placeholder="Title" 
          value={newItemTitle}
          onChange={(e) => setNewItemTitle(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <input 
          type="text" 
          placeholder="Description" 
          value={newItemDescription}
          onChange={(e) => setNewItemDescription(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <button onClick={handleAddItem}>Add Item</button>
      </div>
      <h2>Item List</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id} style={{ marginBottom: '1rem' }}>
            {editingItemId === item.id ? (
              <div>
                <input
                  type="text"
                  value={editingTitle}
                  onChange={(e) => setEditingTitle(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <input
                  type="text"
                  value={editingDescription}
                  onChange={(e) => setEditingDescription(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <button onClick={handleUpdateItem}>Save</button>
                <button onClick={() => setEditingItemId(null)} style={{ marginLeft: '0.5rem' }}>
                  Cancel
                </button>
              </div>
            ) : (
              <div>
                <strong>{item.get("title")}</strong> - {item.get("description")}
                <button onClick={() => startEditingItem(item)} style={{ marginLeft: '1rem' }}>
                  Edit
                </button>
                <button onClick={() => handleDeleteItem(item.id)} style={{ marginLeft: '0.5rem' }}>
                  Delete
                </button>
              </div>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}
export default App;

#### Commit Your Code to GitHub
1. **Initialize a Git repository** in your project folder (if you haven’t already):
   ```bash
   git init
// src/App.js
import React, { useEffect, useState } from 'react';
import Parse from './parseConfig';

function App() {
  const [items, setItems] = useState([]);
  const [newItemTitle, setNewItemTitle] = useState("");
  const [newItemDescription, setNewItemDescription] = useState("");
  const [editingItemId, setEditingItemId] = useState(null);
  const [editingTitle, setEditingTitle] = useState("");
  const [editingDescription, setEditingDescription] = useState("");

  const fetchItems = async () => {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    try {
      const results = await query.find();
      setItems(results);
    } catch (error) {
      console.error("Error fetching items:", error);
    }
  };

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

  const handleAddItem = async () => {
    const Items = Parse.Object.extend("Items");
    const item = new Items();
    item.set("title", newItemTitle);
    item.set("description", newItemDescription);

    try {
      await item.save();
      setNewItemTitle("");
      setNewItemDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error saving item:", error);
    }
  };

  const handleDeleteItem = async (id) => {
    try {
      const item = await Parse.Object.createWithoutData("Items", id);
      await item.destroy();
      fetchItems();
    } catch (error) {
      console.error("Error deleting item:", error);
    }
  };

  const startEditingItem = (item) => {
    setEditingItemId(item.id);
    setEditingTitle(item.get("title"));
    setEditingDescription(item.get("description"));
  };

  const handleUpdateItem = async () => {
    try {
      const Items = Parse.Object.extend("Items");
      const item = new Items();
      item.id = editingItemId;
      item.set("title", editingTitle);
      item.set("description", editingDescription);
      await item.save();
      setEditingItemId(null);
      setEditingTitle("");
      setEditingDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error updating item:", error);
    }
  };

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Items</h1>
      <div style={{ marginBottom: '1rem' }}>
        <h2>Add Item</h2>
        <input 
          type="text" 
          placeholder="Title" 
          value={newItemTitle}
          onChange={(e) => setNewItemTitle(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <input 
          type="text" 
          placeholder="Description" 
          value={newItemDescription}
          onChange={(e) => setNewItemDescription(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <button onClick={handleAddItem}>Add Item</button>
      </div>
      <h2>Item List</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id} style={{ marginBottom: '1rem' }}>
            {editingItemId === item.id ? (
              <div>
                <input
                  type="text"
                  value={editingTitle}
                  onChange={(e) => setEditingTitle(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <input
                  type="text"
                  value={editingDescription}
                  onChange={(e) => setEditingDescription(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <button onClick={handleUpdateItem}>Save</button>
                <button onClick={() => setEditingItemId(null)} style={{ marginLeft: '0.5rem' }}>
                  Cancel
                </button>
              </div>
            ) : (
              <div>
                <strong>{item.get("title")}</strong> - {item.get("description")}
                <button onClick={() => startEditingItem(item)} style={{ marginLeft: '1rem' }}>
                  Edit
                </button>
                <button onClick={() => handleDeleteItem(item.id)} style={{ marginLeft: '0.5rem' }}>
                  Delete
                </button>
              </div>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}
export default App;

#### Commit Your Code to GitHub
1. **Initialize a Git repository** in your project folder (if you haven’t already):
   ```bash
   git init
﻿
Agrega tus archivos fuente:
Bash
git add .
git add .
﻿
Confirma tus cambios:
Bash
git commit -m "Confirmación inicial del código fuente del frontend de ReactJS"
git commit -m "Confirmación inicial del código fuente del frontend de ReactJS"
﻿
Crea un repositorio en GitHub:
Por ejemplo, crea un repositorio llamado Basic-CRUD-App-ReactJS-Frontend en GitHub.
Envía tu código a GitHub:
Bash
git remote add origin https://github.com/tu-nombre-de-usuario/Basic-CRUD-App-ReactJS-Frontend.git
git push -u origin main
git remote add origin https://github.com/tu-nombre-de-usuario/Basic-CRUD-App-ReactJS-Frontend.git
git push -u origin main
﻿
﻿
7.3 Integra tu repositorio de GitHub con el despliegue web
Accede al Despliegue Web:
Inicia sesión en tu panel de Back4app, navega a tu proyecto (Basic-CRUD-App-ReactJS) y haz clic en la función de Despliegue Web. 
Conéctate a GitHub:
Si aún no lo has hecho, integra tu cuenta de GitHub siguiendo las indicaciones en pantalla. Esta conexión permite que Back4app acceda a tu repositorio.
Selecciona tu repositorio y rama:
Elige el repositorio que creaste (por ejemplo, Basic-CRUD-App-ReactJS-Frontend) y selecciona la rama (por ejemplo, main) que contiene tu código de ReactJS.
﻿
7.4 Configura tu implementación
Proporciona detalles de configuración adicionales:
Comando de construcción:
Si tu repositorio no incluye una carpeta de construcción, especifica el comando de construcción (por ejemplo, npm run build). Back4app ejecutará este comando durante la implementación.
Directorio de salida:
Establece el directorio de salida en build para que Back4app sepa qué carpeta contiene tus archivos de sitio estático.
Variables de entorno:
Si tu aplicación depende de alguna variable de entorno (por ejemplo, claves API), agrégalas en la configuración.
﻿
7.5 Dockeriza tu proyecto de aplicación ReactJS
Si prefieres usar Docker para la implementación, puedes contenerizar tu aplicación ReactJS. Incluye un Dockerfile en tu repositorio con contenido similar al siguiente:
Dockerfile
# Use an official Node runtime as a parent image
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application
COPY . .

# Build the React app
RUN npm run build

# Use Nginx to serve the build
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use an official Node runtime as a parent image
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application
COPY . .

# Build the React app
RUN npm run build

# Use Nginx to serve the build
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
Incluye este Dockerfile en tu repositorio. Luego, en la configuración de implementación web, selecciona la opción de implementación de Docker para construir y desplegar tu aplicación en contenedor.
﻿
7.6 Despliega Tu Aplicación
Haz clic en el botón Desplegar:
Una vez que hayas configurado los ajustes de despliegue, haz clic en el Desplegar botón.
Monitorea el Proceso de Construcción:
Back4app tomará tu código de GitHub, ejecutará el comando de construcción (si está configurado) y desplegará tu aplicación dentro de un contenedor.
Obtén Tu URL:
Después de que se complete el despliegue, Back4app proporcionará una URL donde se aloja tu aplicación ReactJS.
﻿
7.7 Verifica Tu Despliegue
Visita la URL Proporcionada:
Abre la URL en tu navegador web para ver tu sitio desplegado.
Prueba la Aplicación:
Verifica que tu aplicación se cargue correctamente, que todas las rutas funcionen como se espera y que todos los activos (CSS, JavaScript, imágenes) se sirvan correctamente.
Soluciona Problemas si es Necesario:
Utiliza las herramientas de desarrollador de tu navegador para verificar si hay errores. Si surgen problemas, revisa los registros de despliegue en Back4app y verifica tu integración de GitHub y los ajustes de construcción.
﻿
Paso 8 – Conclusión y Próximos Pasos
¡Felicidades! Has construido una aplicación CRUD básica completa utilizando ReactJS y Back4app. 
Has configurado un proyecto llamado Basic-CRUD-App-ReactJS, diseñado colecciones de base de datos detalladas para Artículos y Usuarios, y gestionado tus datos a través de la poderosa Aplicación de Administración. 
También integraste tu frontend de ReactJS con tu backend y aseguraste tus datos con controles de acceso robustos.
Próximos Pasos:
Mejora Tu Frontend:
Extiende tu aplicación ReactJS con características como vistas detalladas de artículos, funcionalidad de búsqueda y notificaciones en tiempo real.
Integra Características Adicionales:
Considera agregar lógica de backend más avanzada (por ejemplo, Funciones en la Nube), integraciones de API de terceros o controles de acceso basados en roles.
Explora Recursos Adicionales:
Revisa la documentación de Back4app y tutoriales adicionales para profundizar en la optimización del rendimiento y las integraciones personalizadas.
Al seguir este tutorial, ahora tienes las habilidades para crear un backend CRUD robusto y escalable para tu aplicación ReactJS utilizando Back4app. ¡Feliz codificación!
Campo	Tipo de dato	Descripción
_id	ObjectId	Clave primaria generada automáticamente.
título	Cadena	El título del artículo.
descripción	Cadena	Una breve descripción del artículo.
creado_en	Fecha	Marca de tiempo cuando se creó el elemento.
actualizado_en	Fecha	Marca de tiempo cuando el artículo fue actualizado por última vez.
Campo	Tipo de dato	Descripción
_id	ObjectId	Clave primaria generada automáticamente.
nombre de usuario	Cadena	Nombre de usuario único para el usuario.
correo electrónico	Cadena	Dirección de correo electrónico única.
hash_de_contraseña	Cadena	Contraseña hash para autenticación.
creado_en	Fecha	Marca de tiempo cuando se creó la cuenta de usuario.
actualizado_en	Fecha	Marca de tiempo cuando se actualizó la cuenta de usuario.
Actualizado 12 Feb 2025
¿Esta página le fue útil?
Tutoriales-sobre-Back4app
¿Cómo construir un backend para Blazor?