Search for a command to run...
Integración de ReactJS y FaunaDB: tutorial paso a paso
Soy Carlos Alberto Alegre, analista programador y desarrollador web front-end y back-end. Me considero un autodidacta entusiasta y disfruto explorando y aprendiendo nuevas tecnologías para mantenerme al tanto de las últimas tendencias en diseño y desarrollo web.
No comments yet. Be the first to comment.
Guía completa para integrar y mostrar contenido de Hashnode en tu web por medio de su API publica.
Aprende a integrar el sistema de almacenamiento de Supabase en tu aplicación VueJS
Guía paso a paso para integrar Cloudinary en tu aplicación VueJS y subir imágenes de forma fácil y segura
Integración GqlGen y Gorm
Fauna DB es una base de datos distribuida y globalmente accesible que ofrece una solución serverless para el almacenamiento de datos. Combina características de bases de datos documentales y relacionales, diseñada específicamente para el desarrollo de aplicaciones modernas.
En este tutorial, aprenderás los conceptos básicos para integrar la base de datos en tu aplicación ReactJS y realizar operaciones CRUD.
Vamos a utilizar ViteJS para crea el proyecto ReactJS, abre una consola y escribe el siguiente comando:
npm create vite@latest reactjs-fauna -- --template react
Este comando generará un directorio reactjs-fauna , entra e instala las dependencias necesarias con el comando npm install . Cuando finalice, puedes ejecutar el comando npm run dev para correr el proyecto.
Para añadirle estilos a nuestro proyecto, vamos a utilizar el framework TailwindCSS. Instalamos las dependencias necesarias con el siguiente comando:
npm install -D tailwindcss postcss autoprefixer
Para inicializar TailwindCSS corremos el comando:
npx tailwindcss init -p
Esto creará dos ficheros, tailwind.config.js y postcss.config.js . Abre el fichero tailwind.config.js y actualiza como sigue:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Ahora abre el fichero src/index.css y añade las directivas de tailwind como sigue:
@tailwind base;
@tailwind components;
@tailwind utilities;
Ahora asegúrate que el archivo CSS esté importado en el archivo principal del proyecto (en este caso src/main.jsx)
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import './index.css' // IMPORTAMOS LOS ESTILOS DE TAILWINDCSS
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>,
)
Finalmente vamos a instalar lucide-react que es un biblioteca de íconos para react, basada en el proyecto Lucide. Ofrece una colección de iconos de código abierto, simples y consistentes que pueden ser fácilmente integrados en aplicaciones React.
Lo instalas con el siguiente comando:
npm install lucide-react
Ya tenemos todo listo para comenzar a crear los componentes de nuestro proyecto.
El componente Form.jsx nos permitirá añadir tareas a la lista de tareas. Crea un fichero src/components/Form.jsx y añade el siguiente código:
import { Plus } from 'lucide-react';
export default function Form({ newTodo, setNewTodo, addTodo }) {
return (
<form onSubmit={addTodo} className="flex gap-2 mb-6">
<input
type="text"
value={newTodo}
onChange={(e) => setNewTodo(e.target.value)}
placeholder="¿Qué necesitas hacer?"
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<button
type="submit"
className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center gap-2"
>
<Plus size={20} />
Agregar
</button>
</form>
);
}
Vamos a explicar las funciones más destacadas:
Componente Form:
Es una función que recibe tres propiedades: newTodo, setNewTodo, y addTodo.
newTodo: Representa el valor actual del texto de la nueva tarea.
setNewTodo: Función que se usa para actualizar el valor de newTodo.
addTodo: Función que se ejecuta cuando el usuario envía el formulario, agregando una nueva tarea a la lista.
Formulario HTML con manejo de eventos:
<form onSubmit={addTodo} className="flex gap-2 mb-6">
<form> que ejecuta la función addTodo cuando se envía (evento onSubmit). La función addTodo se encargará de agregar una nueva tarea a la lista de tareas.Campo de entrada de texto:
<input
type="text"
value={newTodo}
onChange={(e) => setNewTodo(e.target.value)}
placeholder="¿Qué necesitas hacer?"
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
El valor de este campo (value={newTodo}) está ligado a la propiedad newTodo, permitiendo el control del estado.
El evento onChange actualiza el estado (setNewTodo) cada vez que el usuario escribe algo, capturando el valor ingresado.
Hemos finalizado el componente Form.jsx . Continuamos con el componente Todo.jsx.
El componente Todo.jsx tendrá como función mostrar la información de cada una de las tareas de la lista. Crea un fichero src/components/Todo.jsx y añade el siguiente código:
import { Trash2, Check } from 'lucide-react';
export default function Todo({ todo, toggleTodo, deleteTodo }) {
return (
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
<div className="flex items-center gap-3">
<button
onClick={() => toggleTodo(todo.id)}
className={`w-6 h-6 rounded-full border-2 flex items-center justify-center
${todo.completed
? 'bg-green-500 border-green-500 text-white'
: 'border-gray-400'
}`}
>
{todo.completed && <Check size={16} />}
</button>
<span className={`text-gray-800 ${todo.completed ? 'line-through text-gray-500' : ''}`}>
{todo.text}
</span>
</div>
<button
onClick={() => deleteTodo(todo.id)}
className="text-red-500 hover:text-red-700 focus:outline-none"
>
<Trash2 size={20} />
</button>
</div>
);
}
A continuación se explica las funcionalidades más destacadas:
Propiedades recibidas:
todo: Un objeto que representa una tarea específica.
toggleTodo: Función que se ejecuta cuando el usuario marca o desmarca la tarea como completada.
deleteTodo: Función que se ejecuta cuando el usuario elimina la tarea.
Botón para marcar como completada:
<button
onClick={() => toggleTodo(todo.id)}
className={`w-6 h-6 rounded-full border-2 flex items-center justify-center
${todo.completed
? 'bg-green-500 border-green-500 text-white'
: 'border-gray-400'
}`}
>
{todo.completed && <Check size={16} />}
</button>
Este botón permite al usuario marcar la tarea como completada o pendiente.
onClick={() => toggleTodo(todo.id)}: Al hacer clic, se ejecuta la función toggleTodo pasando el id de la tarea, lo que permite alternar el estado de completado.
Estilización dinámica:
Si la tarea está completada (todo.completed === true):
bg-green-500, border-green-500), y el ícono Check (una marca de verificación) es visible.Si la tarea no está completada:
border-gray-400), sin ícono dentro del botón.Texto de la tarea:
<span className={`text-gray-800 ${todo.completed ? 'line-through text-gray-500' : ''}`}>
{todo.text}
</span>
Muestra el texto de la tarea (todo.text).
Si la tarea está completada (todo.completed), se aplica el estilo de tachado (line-through) y el color del texto se vuelve gris claro (text-gray-500), indicando visualmente que la tarea ya ha sido realizada. Si no está completada, el texto se mantiene en gris oscuro (text-gray-800).
Botón para eliminar la tarea:
<button
onClick={() => deleteTodo(todo.id)}
className="text-red-500 hover:text-red-700 focus:outline-none"
>
<Trash2 size={20} />
</button>
Este botón permite eliminar la tarea.
onClick={() => deleteTodo(todo.id)}: Al hacer clic, se ejecuta la función deleteTodo con el id de la tarea, eliminándola de la lista.
Con esto hemos finalizado con el componente Todo.jsx, ahora debemos actualizar el componente principal de la aplicación App.jsx.
Este componente es la base de la aplicación de lista de tareas. Abre el fichero src/App.jsx y actualízalo con el siguiente código:
import { useState } from 'react';
import Form from './components/Form';
import Todo from './components/Todo';
export default function TodoApp() {
const [todos, setTodos] = useState([]);
const [newTodo, setNewTodo] = useState('');
const addTodo = (e) => {
e.preventDefault();
if (newTodo.trim()) {
setTodos([...todos, { id: Date.now(), text: newTodo, completed: false }]);
setNewTodo('');
}
};
const toggleTodo = (id) => {
setTodos(
todos.map(todo =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo
)
);
};
const deleteTodo = (id) => {
setTodos(todos.filter(todo => todo.id !== id));
};
return (
<div className="min-h-screen bg-gray-100 py-8">
<div className="max-w-md mx-auto bg-white rounded-lg shadow-lg p-6">
<h1 className="text-2xl font-bold text-gray-800 mb-6">Lista de Tareas</h1>
<Form newTodo={newTodo} setNewTodo={setNewTodo} addTodo={addTodo} />
<div className="space-y-3">
{todos.map(todo => (
<Todo key={todo.id} todo={todo} toggleTodo={toggleTodo} deleteTodo={deleteTodo} />
))}
</div>
{todos.length === 0 && (
<div className="text-center text-gray-500 mt-6">
No hay tareas pendientes. ¡Añade una!
</div>
)}
</div>
</div>
);
}
A continuación explicamos sus funcionalidades más destacadas.
Importaciones de componentes y uso de useState:
import { useState } from 'react';
import Form from './components/Form';
import Todo from './components/Todo';
Se importa el hook useState para manejar el estado dentro del componente.
También se importan dos componentes hijos, Form y Todo, que se encargan de manejar el formulario para agregar tareas y la representación de cada tarea respectivamente.
Estados del componente:
const [todos, setTodos] = useState([]);
const [newTodo, setNewTodo] = useState('');
todos: Un arreglo que contiene todas las tareas creadas. Cada tarea es un objeto con las propiedades id, text, y completed.
newTodo: Almacena el texto de la nueva tarea que el usuario está escribiendo.
Función addTodo para agregar nuevas tareas:
const addTodo = (e) => {
e.preventDefault();
if (newTodo.trim()) {
setTodos([...todos, { id: Date.now(), text: newTodo, completed: false }]);
setNewTodo('');
}
};
Esta función se ejecuta cuando se envía el formulario para agregar una nueva tarea.
e.preventDefault(): Previene que la página se recargue al enviar el formulario.
Validación: Se asegura de que el texto no esté vacío o compuesto solo de espacios en blanco con newTodo.trim().
Agregar la tarea: Si el texto es válido, se añade una nueva tarea al arreglo todos. La tarea tiene un id único basado en la fecha actual (Date.now()), el texto (newTodo), y un estado completed: false (indica que la tarea no está completada).
Después de agregar la tarea, se limpia el campo de texto con setNewTodo('').
Función toggleTodo para actualizar tareas completadas:
const toggleTodo = (id) => {
setTodos(
todos.map(todo =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo
)
);
};
La función toggleTodo se utiliza para alternar el estado de completado de una tarea en una lista de tareas. Aquí te explico cómo funciona:
Parámetro id: La función recibe un parámetro id, que representa el identificador único de la tarea que se desea actualizar.
setTodos: Esta es una función que se utiliza para actualizar el estado de las tareas.
todos.map: La función map se utiliza para crear un nuevo arreglo de tareas basado en el arreglo existente todos. Para cada tarea en el arreglo, se verifica si su id coincide con el id proporcionado a la función toggleTodo.
Condición todo.id === id: Si el id de la tarea actual coincide con el id proporcionado, se crea un nuevo objeto de tarea con todas las propiedades de la tarea actual ({ ...todo }), pero con el estado completed invertido (!todo.completed). Esto significa que si la tarea estaba marcada como completada, ahora estará pendiente, y viceversa.
Retorno de map: Si el id no coincide, la tarea se devuelve sin cambios.
Función deleteTodo para eliminar tareas completadas:
const deleteTodo = (id) => {
setTodos(todos.filter(todo => todo.id !== id));
};
La función deleteTodo se utiliza para eliminar una tarea de la lista de tareas:
Parámetro id: La función recibe un parámetro id, que representa el identificador único de la tarea que se desea eliminar.
setTodos: Esta es una función que se utiliza para actualizar el estado de las tareas.
todos.filter: La función filter se utiliza para crear un nuevo arreglo de tareas. Recorre cada tarea en el arreglo todos y aplica una condición.
Condición todo.id !== id: La condición verifica si el id de la tarea actual no coincide con el id proporcionado. Si no coincide, la tarea se incluye en el nuevo arreglo, el nuevo arreglo contiene todas las tareas excepto aquella cuyo id coincide con el id proporcionado, efectivamente eliminando esa tarea de la lista.
Incorporación de los componentes Form y Todo :
Para incorporar el formulario lo hacemos con la siguiente línea:
<Form newTodo={newTodo} setNewTodo={setNewTodo} addTodo={addTodo} />
Este componente es responsable de renderizar el formulario que permite a los usuarios agregar nuevas tareas. Recibe tres propiedades para gestionar el estado y las acciones del formulario.
newTodo={newTodo}: Representa el estado actual del texto de la nueva tarea que el usuario está escribiendo. Se utiliza para controlar el valor del campo de entrada de texto en el formulario.
setNewTodo={setNewTodo}: Se utiliza para actualizar el estado de newTodo cada vez que el usuario escribe en el campo de entrada. Esto permite que el componente mantenga el control del valor del campo de texto.
addTodo={addTodo}: Se ejecuta cuando el usuario envía el formulario. Su propósito es agregar la nueva tarea a la lista de tareas, utilizando el texto almacenado en newTodo.
Para incorporar el componente Todo lo hacemos con la siguiente línea:
<div className="space-y-3">
{todos.map(todo => (
<Todo key={todo.id} todo={todo} toggleTodo={toggleTodo} deleteTodo={deleteTodo} />
))}
</div>
Aquí se explica cada parte del código:
{todos.map(todo => ( ... ))}: Itera sobre un arreglo llamado todos. Por cada elemento todo en el arreglo, se ejecuta la función de flecha (todo => ( ... )), que devuelve un componente Todo.
<Todo key={todo.id} todo={todo} toggleTodo={toggleTodo} deleteTodo={deleteTodo} />: Este componente Todo se le pasan varias propiedades:
key={todo.id}: La propiedad key es un identificador único para cada elemento en la lista, lo cual ayuda a React a identificar qué elementos han cambiado, agregado o eliminado.
todo={todo}: Pasa el objeto todo actual como una propiedad al componente Todo.
toggleTodo={toggleTodo}: Pasa la función toggleTodo como una propiedad, que se utiliza dentro del componente Todo para alternar el estado de completado de la tarea.
deleteTodo={deleteTodo}: Pasa la función deleteTodo como una propiedad, que se utiliza dentro del componente Todo para eliminar la tarea.
Con esto hemos finalizado la construcción del front-end de la aplicación Todo. Ahora vamos a realizar la conexión con la base de datos en FaunaDB.
Ingresa a tu cuenta en FaunaDB, en el panel de control de tu cuenta, haz clic en el botón “Create Database” y ponle un nombre. Yo lo nombré “todoapp”.
Una vez creada la base de datos podemos crear la colección que contendrá las tareas. Para eso en el “shell” escribe la siguiente instrucción Collection.create({ name: "Todo" }) :
Continuamos con la creación del 'key secret’ que permitirá a nuestra aplicación realizar las operaciones CRUD.
Para crear la clave secreta, hay que dirigirse a la pestaña ‘Keys’, hacer clic en el botón ‘Create Key’. Aparecerá una ventana, en ella elige un rol, ponle un nombre a la clave y haz clic en ‘Save’.
La clave aparecerá sólo una vez, una vez que cierres la ventana ya no podrás acceder a ella. Copia la clave, vuelve al editor y en la raíz del proyecto crea un fichero .env para variables de entorno. Crea una nueva variable VITE_REACT_APP_FAUNA_SECRET y pega la clave.
VITE_REACT_APP_FAUNA_SECRET=fnAFw2Cje_AAQn7vMLAlaUHnoXXlyfZROpb0zTO3
(Tanto la base de datos como la clave están eliminados al momento de la publicación del artículo).
Continuamos con la instalación y configuración de la biblioteca fauna .
Este paquete permitirá conectar la aplicación con la base de datos y realizar las operaciones de lectura y escritura. Realiza la instalación con el siguiente comando:
npm install fauna
Ahora crea un fichero src/lib/fauna.js que se encargará de realizar la conexión con la base de datos.
import { Client, fql } from "fauna"
// Asegúrate de crear un archivo .env para almacenar tu clave secreta
const client = new Client({
secret: import.meta.env.VITE_REACT_APP_FAUNA_SECRET,
})
export default client
Ahora en el mismo directorio crea un fichero src/lib/todoDb.js que tendrá las funciones CRUD de la aplicación.
import client from './fauna'
import { fql } from 'fauna'
export const todoDb = {
// Obtener todas las tareas
getAllTodos: async () => {
try {
const result = await client.query(fql`
Todo.all()
`)
return result.data
} catch (error) {
console.error('Error al obtener las tareas:', error)
return []
}
},
// Crear una nueva tarea
createTodo: async (todoData) => {
try {
const result = await client.query(fql`
Todo.create({
text: ${todoData.text},
completed: false
})
`)
return result.data
} catch (error) {
console.error('Error al crear la tarea:', error)
throw error
}
},
// Actualizar una tarea
updateTodo: async (todoId, updates) => {
try {
const result = await client.query(fql`
Todo.byId(${todoId})!.update({
completed: ${updates.completed}
})
`)
return result.data
} catch (error) {
console.error('Error al actualizar la tarea:', error)
throw error
}
},
// Eliminar una tarea
deleteTodo: async (todoId) => {
try {
await client.query(fql`
Todo.byId(${todoId})!.delete()
`)
return true
} catch (error) {
console.error('Error al eliminar la tarea:', error)
throw error
}
}
}
getAllTodos (Obtener todas las tareas):
Consulta la base de datos y obtiene todas las tareas almacenadas.
Si hay un error, lo captura y devuelve un array vacío.
createTodo (Crear una nueva tarea):
Recibe un objeto con los datos de una nueva tarea.
Inserta la tarea en la base de datos con el texto proporcionado y el estado completed: false por defecto.
Si ocurre un error, lo captura y lo lanza.
updateTodo (Actualizar una tarea):
Recibe el ID de la tarea y los datos a actualizar.
Modifica el estado de la tarea (completed) en la base de datos.
Captura y lanza errores si ocurren.
deleteTodo (Eliminar una tarea):
Recibe el ID de una tarea y la elimina de la base de datos.
Si la operación tiene éxito, devuelve true.
Captura errores y los lanza.
A continuación debemos actualizar el componente src/App.jsx como sigue:
import { useState, useEffect } from 'react';
import Form from './components/Form';
import Todo from './components/Todo';
import { todoDb } from './lib/todoDb';
export default function TodoApp() {
const [todos, setTodos] = useState([]);
const [newTodo, setNewTodo] = useState('');
const [loading, setLoading] = useState(true);
// Cargar tareas al iniciar
useEffect(() => {
loadTodos();
}, []);
const loadTodos = async () => {
try {
const { data } = await todoDb.getAllTodos();
setTodos(data);
} catch (error) {
console.error('Error al cargar las tareas:', error);
} finally {
setLoading(false);
}
};
const addTodo = async (e) => {
e.preventDefault();
if (newTodo.trim()) {
try {
const newTodoData = await todoDb.createTodo({ text: newTodo });
setTodos([...todos, newTodoData]);
setNewTodo('');
} catch (error) {
console.error('Error al añadir la tarea:', error);
}
}
};
const toggleTodo = async (id) => {
try {
const todoToUpdate = todos.find(todo => todo.id === id);
const updatedTodo = await todoDb.updateTodo(id, {
completed: !todoToUpdate.completed
});
setTodos(todos.map(todo =>
todo.id === id ? updatedTodo : todo
));
} catch (error) {
console.error('Error al actualizar la tarea:', error);
}
};
const deleteTodo = async (id) => {
try {
await todoDb.deleteTodo(id);
setTodos(todos.filter(todo => todo.id !== id));
} catch (error) {
console.error('Error al eliminar la tarea:', error);
}
};
if (loading) {
return <div className="text-center mt-8">Cargando...</div>;
}
return (
<div className="min-h-screen bg-gray-100 py-8">
<div className="max-w-md mx-auto bg-white rounded-lg shadow-lg p-6">
<h1 className="text-2xl font-bold text-gray-800 mb-6">Lista de Tareas</h1>
<Form newTodo={newTodo} setNewTodo={setNewTodo} addTodo={addTodo} />
<div className="space-y-3">
{todos.map(todo => (
<Todo
key={todo.id}
todo={todo}
toggleTodo={toggleTodo}
deleteTodo={deleteTodo}
/>
))}
</div>
{todos.length === 0 && (
<div className="text-center text-gray-500 mt-6">
No hay tareas pendientes. ¡Añade una!
</div>
)}
</div>
</div>
);
}
De esta manera tenemos integrado las funciones CRUD del cliente de Fauna a nuestra aplicación.
Para probar la aplicación corre el comando npm run dev y prueba añadir, actualizar y eliminar una tarea, los datos deberían verse reflejados en la base de datos en fauna:
En este tutorial, hemos construido una aplicación TODO con ReactJS y la hemos integrado con FaunaDB para manejar el almacenamiento de tareas. Aprendimos a conectar nuestra aplicación con la base de datos, realizar operaciones CRUD (Crear, Leer, Actualizar y Eliminar tareas) y gestionar la comunicación con el backend de forma eficiente.
FaunaDB nos ofrece una base de datos serverless, escalable y fácil de manejar con consultas FQL, lo que hace que sea una excelente opción para aplicaciones modernas con React. Además, este enfoque nos permite trabajar con una arquitectura sin servidor, reduciendo la necesidad de infraestructura compleja.
Puedes encontrar el proyecto completo en mi repositorio de GitHub haciendo clic AQUÍ.
Espero que lo hayas encontrado entretenido, instructivo y claro. Si tienes alguna duda, puedes hacérmelo saber en los comentarios. Pronto estaré subiendo más tutoriales.
Nos vemos en la próxima. Saludos!👋😊