Crea un blog con React y base de datos en Firebase

¿Estás listo(a) para descubrir la estructura de un blog desarrollado en React?

Si eres entusiasta del desarrollo web y buscas una plataforma moderna y dinámica para tu blog, aquí encontrarás una arquitectura basada en componentes de React, el cual puedes personalizar y expresar tu lado creativo.

Si eres nuevo(a) en React, no te preocupes. A lo largo del artículo, te proporcionaré ejemplos y explicaciones claras para ayudarte a comprender los conceptos clave y comenzar a desarrollar tu propio blog en esta biblioteca front-end.

¡Prepárate para ir al siguiente nivel!

Configuración del entorno de desarrollo

Antes de comenzar a desarrollar tu blog en React, es importante configurar el entorno de desarrollo adecuado. Esto incluye la instalación de Node.js, el gestor de paquetes npm y cualquier otra herramienta que necesites para trabajar con React.

1) Instalación de Node.js: Para empezar, debes instalar Node.js en tu máquina. Puedes descargar la última versión estable de Node.js desde el sitio web oficial y seguir las instrucciones de instalación para tu sistema operativo.

2) Configuración de npm: npm es el gestor de paquetes de Node.js y te permitirá instalar las dependencias necesarias para tu proyecto de React. Después de instalar Node.js, npm estará disponible en tu sistema. Puedes verificar su instalación ejecutando el siguiente comando en tu terminal:

npm -v

Si el comando muestra la versión de npm instalada, significa que está configurado correctamente.

3) Creación de un nuevo proyecto de React: Una vez configurado npm, puedes crear un nuevo proyecto de React utilizando la herramienta Create React App. Abre tu terminal y ejecuta el siguiente comando:

npx create-react-app mi-blog-react

Esto creará una nueva carpeta llamada mi-blog-react con todos los archivos y configuraciones necesarios para empezar a desarrollar tu blog en React.

Con el entorno de desarrollo configurado, es hora de crear los componentes principales de tu blog en React. En la siguiente sección, veremos cómo crear y utilizar estos componentes.

Configurar Firebase para un blog en React

Para configurar Firebase en un blog de React, necesitas:

1) Crear un proyecto de Firebase

Accede a la Consola de Firebase, crea un nuevo proyecto y selecciona un nombre.

Sigue las instrucciones para registrar tu aplicación web.

2) Instalar el SDK de Firebase

En tu proyecto de React, instala el SDK de Firebase con npm o yarn.

npm install firebase

3) Inicializar Firebase

Importamos las funciones necesarias de los módulos de Firebase para la aplicación, autenticación, base de datos y almacenamiento. Luego, definimos un objeto firebaseConfig que contiene la configuración específica del proyecto de Firebase, como la clave de API, el dominio de autenticación, el ID del proyecto, entre otros.

Con esta configuración, inicializamos la aplicación Firebase usando `initializeApp(firebaseConfig)`. Después, obtenemos las instancias de los servicios de autenticación getAuth, base de datos getFirestore y almacenamiento getStorage pasando la aplicación inicializada como argumento.

Finalmente, estas instancias se exportan para que puedan ser utilizadas en otras partes de la aplicación. Es importante mantener la confidencialidad de la apiKey y otros detalles sensibles para proteger la aplicación contra usos no autorizados.

4) Configurar la autenticación

Habilita la autenticación en la consola de Firebase.

Elige el método de autenticación que deseas usar (correo electrónico, Google, Facebook, etc.).

Implementa la lógica de autenticación en tu aplicación.

La función handleAuth se activa cuando ocurre el evento de envío de formulario debido a la llamada a e.preventDefault(), que evita que el formulario se envíe de la manera predeterminada. Si la variable signUp es falsa, indica que el usuario está intentando iniciar sesión en lugar de registrarse, la función verifica si se han proporcionado tanto el email como la contraseña.

Si es así, utiliza la función signInWithEmailAndPassword para autenticar al usuario con las credenciales proporcionadas. Si la autenticación es exitosa, establece el usuario con setUser(user) y cambia la vista activa a home con setActive("home").

Si el email o la contraseña no se proporcionan, muestra un mensaje de error utilizando toast.error, pidiendo al usuario que rellene todos los campos.

Esto es típico en aplicaciones web modernas que utilizan frameworks como React junto con Firebase para la autenticación de usuarios.

5) Configurar Firestore Database

• Crea una base de datos Firestore en la consola de Firebase.
• Define la estructura de tus datos.
• Usa firebase.firestore() para leer, escribir y eliminar datos.

La función handleSubmit se activa cuando se envía el formulario, y comienza previniendo el comportamiento predeterminado del evento de envío para evitar que la página se recargue. Inmediatamente, verifica si todas las variables requeridas (category, tags, title, description, trending) están presentes y no son nulas.

Si alguna de estas variables falta, se muestra un mensaje de error al usuario.

Si se trata de un nuevo blog (es decir, id no está presente), intenta crear un nuevo documento en la colección blogs de la base de datos con los datos del formulario, la fecha del servidor, y la información del autor. Si la operación es exitosa, muestra un mensaje de éxito. En caso de error, registra el error en la consola.

Este patrón de manejo de errores es común en operaciones asincrónicas, donde se utiliza try y catch para manejar excepciones que pueden ocurrir durante las operaciones de la base de datos.

Entendiendo la estructura de un blog en React

Antes de sumergirnos en los detalles de cómo desarrollar un blog en React, es importante comprender la estructura básica de un blog construido con esta tecnología. En React, un blog puede organizarse en componentes y páginas que representan diferentes partes del mismo.

Los componentes principales que necesitarás para desarrollar un blog en React incluyen:

1) Componente de encabezado o Header: Se muestran diferentes elementos de la interfaz dependiendo de si el usuario está autenticado o no. Si userId es verdadero, se muestra un perfil y una opción para cerrar sesión Logout. Si userId es falso, se muestran opciones para iniciar sesión o registrarse.

Gestiona la navegación a diferentes rutas

Link: Crea enlaces a las páginas

Home

Crear

Sobre Nosotros

Login/Auth. Maneja la autenticación de usuario:

userId: Verifica si existe un usuario autenticado, si hay un usuario autenticado, muestra la imagen de perfil y el nombre del usuario. Igualmente, ofrece un botón de Logout. Y, si no hay un usuario autenticado muestra un botón de Login.

2) Componente de Trending: Está presente el componente OwlCarousel para crear un carrusel, que puede mostrar múltiples elementos en una secuencia.

Recibe una lista de blogs como prop

• La variable options: es un objeto que modifica el comportamiento del carrusel aplicando (bucle, márgenes, botones de navegación, respuesta a diferentes tamaños de pantalla). También, adapta el número de elementos visibles a diferentes tamaños de pantalla.

• blogs: es el arreglo que contiene los datos de los blogs a mostrar. Además usamos map para crear los elementos del carrusel. Con el siguiente código añadimos la Imagen, título, autor y fecha.
• Enlaza a la página de detalle del blog, al hacer clic en un blog, se dirige a la página /detail/${item.id}.

3) Componente de BlogSection: Toma tres propiedades: blogs, que es un arreglo de objetos blog; user, que contiene información del usuario actual; y handleDelete, que es una función para manejar la eliminación de blogs.

Recibe una lista de blogs, información del usuario y una función de eliminación como props:

a. blogs: Arreglo que contiene los datos de los blogs a mostrar.

b.user: Objeto con información del usuario autenticado.

c. handleDelete: Función para eliminar blogs.

Renderiza los blogs en una lista

d. Itera a través del arreglo blogs usando map para crear los elementos de la lista.

Muestra información de cada blog

e. Imagen, categoría, título, autor, fecha, descripción breve y botón "Leer más".

Enlaza a la página de detalle del blog

f. Al hacer clic en el botón Leer más, se dirige a la página /detail/${item.id}.

Ofrece opciones de edición y eliminación a los autores

g. Si el usuario autenticado es el autor del blog, se muestran los iconos de papelera y lápiz para eliminar o editar el blog respectivamente.

4) Componente de MostPopular: Cada blog se muestra con una imagen y un título. La imagen se obtiene de la propiedad imgUrl del objeto blog y el título de la propiedad title. Además, se muestra la fecha del blog, que se obtiene convirtiendo el timestamp a una cadena de fecha legible.

• Recibe una lista de blogs como prop

blogs: Arreglo que contiene los datos de los blogs más populares.

• Renderiza los blogs en una lista

Itera a través del arreglo blogs usando map para crear los elementos de la lista.

• Muestra información de cada blog

Imagen, título y fecha.

• Habilita la navegación a la página de detalle

Al hacer clic en cualquier parte del elemento del blog, se dirige a la página /detail/${item.id} usando useNavigate.

Las páginas principales que necesitarás para desarrollar un blog en React incluyen:

1) Home.js:

Obtiene los blogs de la colección blogs en Firebase

• Utiliza onSnapshot para suscribirse a cambios en tiempo real.
• Almacena los blogs y las etiquetas en el estado local.

Obtiene los blogs en tendencia de forma separada

• Utiliza una consulta a Firebase para filtrar los blogs marcados como trending que sean iguales a yes.

Maneja el estado de carga

• Muestra un spinner mientras se obtienen los datos.

Maneja la eliminación de blogs

• Permite a los usuarios eliminar blogs con confirmación.

Renderiza los diferentes componentes

• Trending: Muestra los blogs en tendencia.
• BlogSection: Muestra la lista de blogs diarios.
• Tags: Muestra los tags disponibles.
• MostPopular: Muestra los blogs más populares.

2) Auth.js

Maneja estados

a. signUp: Controla si se muestra el formulario de registro o de inicio de sesión.

b. state: Almacena los datos del formulario (email, password, nombre, apellido).

Maneja eventos del formulario

c. handleChange: Actualiza el estado cuando cambian los campos del formulario.

d. handleAuth: Valida los datos, realiza la autenticación con Firebase y redirige a la página principal.

Interactúa con Firebase Auth

e. signInWithEmailAndPassword: Inicia sesión con correo y contraseña.

f. createUserWithEmailAndPassword: Crea un nuevo usuario con correo y contraseña.

g. updateProfile: Actualiza el nombre del usuario en su perfil de Firebase.

Muestra campos condicionales

h. Renderiza los campos de nombre y apellido solo en modo registro.

Cambia entre formularios

i. Permite alternar entre inicio de sesión y registro mediante un enlace.

Muestra notificaciones

j. Utiliza toast para mostrar mensajes de error o éxito.

Redirige al home

k. Tras una autenticación exitosa, redirige a la página principal.

3) AddEditBlog.js

Maneja estados

a. form: Almacena los datos del blog (título, etiquetas, categoría, etc.).

b. file: Almacena el archivo de imagen seleccionado.

c. progress: Indica el progreso de la carga de la imagen.

Recibe props

d. user: Información del usuario actual.

e. setActive: Función para manejar la barra lateral.

f. id: ID del blog a editar.

Maneja eventos del formulario

g. handleChange: Actualiza el estado del formulario.

h. handleTags: Maneja el componente de etiquetas.

i. handleTrending: Actualiza el estado de "tendencia".

j. onCategoryChange: Actualiza la categoría seleccionada.

k. handleSubmit: Envía el formulario para crear o actualizar el blog.

Sube imágenes a Firebase Storage

l. useEffect: Vigila cambios en file.

m. uploadFile: Inicia la carga de la imagen a Firebase Storage.

• Almacena la URL descargable en el estado del formulario.

Trae datos de un blog existente (si corresponde)

n. useEffect: Vigila cambios en id.

o. getBlogDetail: Obtiene los datos del blog desde Firestore.

Interactúa con Firestore para guardar datos

p. addDoc: Crea un nuevo documento en la colección blogs.

q. updateDoc: Actualiza un documento existente en la colección blogs.

4) Detail.js

Obtiene datos de blogs

a. useEffect: Obtiene todos los blogs y sus etiquetas al iniciar el componente.

b. getBlogData: Obtiene los datos de todos los blogs desde la colección "blogs" en Firestore.

c. Almacena los resultados en los estados blogs y tags.

Obtiene datos del blog a mostrar

d. useEffect: Obtiene los datos del blog específico cuando se proporciona su id.

e. getBlogDetail: Obtiene los datos del blog con la ID especificada.

f. Almacena los resultados en el estado blog.

Muestra información del blog

g. Renderiza la fecha, título, autor, descripción e imagen del blog.

Muestra componentes adicionales

h. Tags: Muestra las etiquetas del blog actual.

i. MostPopular: Muestra los blogs más populares (presumiblemente usando la lista de blogs obtenida anteriormente).

Estos son solo algunos ejemplos de los componentes principales que puedes utilizar en un blog desarrollado en React. Al seguir estos pasos, habrás creado los componentes principales de tu blog en React. Recuerda que estas son solo algunas ideas de funcionalidades que puedes agregar a tu blog en React.

La funcionalidad exacta dependerá de tus objetivos y requisitos específicos. Asegúrate de mantener un equilibrio entre la funcionalidad y la simplicidad para ofrecer una experiencia de usuario agradable.