Construye un foro con React, NodeJS

Construye un foro con React, NodeJS – Codelivly

 

Recientemente invertí en un sitio de foro. El problema es que el sitio ha estado funcionando con el mismo software durante 17 años, es feo, caro y difícil de mantener.

Me desafié a mí mismo a crear una nueva pila de foros, con la capacidad de editar, actualizar y agregar fácilmente al sitio en el futuro.

Si bien probablemente podría construir un sistema de foro completo desde cero, eso llevaría cientos de horas y probablemente no sería tan bueno. Una búsqueda rápida reveló NodeBB, un software de foro de código abierto creado con Node.

Seguí buscando otras opciones, como el software de foro sin cabeza, pero aún así terminé en NodeBB, así que decidí probarlo.

Ahora que había decidido usar NodeBB, tenía que hacerlo funcionar. Para mantener los costos al mínimo (o gratis si es posible), decidí optar por un AWS T2 micro, que cuesta $0.013/hr pero viene con 750 horas de uso gratuito. Hacerlo de esta manera también significa que tendré experiencia trabajando directamente con un servidor. Cuando lleguemos a implementar esto en producción, será invaluable.

Inicié una nueva instancia de micro T2 y ssh'd on. Seguí este tutorial, instalé Node y MongoDB, importé el código NodeBB de GitHub y completé la configuración.

En mi primer intento, me encontré con un problema con las bases de datos de Mongo, así que eliminé el servidor y comencé uno nuevo. Esta vez las cosas mejoraron y lo encendí. En lugar de configurar nginx, usé ngrok porque era más rápido y más fácil. En el futuro, probablemente usaré AWS Route 53 para administrar los elementos de DNS.

Mi instancia de NodeBB

Después de un juego rápido con el software, parecía tener todo lo que necesitaba: subcategorías, karma/reputación y mensajería personal. También tiene una excelente aplicación de administración que será muy útil en el futuro.

Si bien NodeBB tenía todas las características que quería, estéticamente no es bueno para el foro para el que lo estoy creando, hay algunos problemas de UI/UX que deberían cambiarse, y el sitio necesita algunas páginas que no sean un foro simple.

NodeBB tiene un sistema de plantillas donde sé que podría aprender a resolver los dos primeros problemas, pero aún no estaba seguro de cómo incluir otras páginas o un CMS en el sistema. También quiero tener esto como un artículo de cartera, así que quiero usar la tecnología con la que soy más fuerte: React y Redux.

Con React y Redux, sé que puedo crear un sitio completo, incluir otros sistemas CMS, software de comercio electrónico o incluso un chatbot. Esto me da un control completo sobre la forma y función del sitio.

Para comenzar a crear la estructura de la aplicación React, utilicé create-react-app. Elimino todo el código en el src carpeta y creó una nueva index.js archivar. envuelve un App componente en el BrowserRouter para que pueda agregar la ruta al sitio web más tarde.

import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import App from './components/App';render((
<BrowserRouter>
<App />
</BrowserRouter>
), document.getElementById('root'));

Entonces creé un components archivo con un App.jsx archivo dentro. Este archivo separará el contenido que debe ser enrutado (contenido de la página principal) de lo que no lo es (encabezado, navegación y pie de página).

También estoy agregando una tienda redux en este punto. Creé una tienda y se la pasé a un Provider.

import React from 'react'
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reduxThunk from "redux-thunk";import Header from './Header/Header';
import Footer from './Footer/Footer';
import Main from './Main';import reducers from 'reducers';const persistedState = {};const store = createStore(
// reducers,
persistedState,
applyMiddleware(reduxThunk))
const App = () => (
<Provider store={store} className="app">
<main>
<Header />
<Main />
<Footer />
</main>
</Provider>
)export default App;

Ahora tenemos un componente de aplicación que representa el Header, Main Y Footer. Por ahora, estoy creando un componente de marcador de posición de encabezado y pie de página que solo devuelve un div con una línea de texto que indica que es un encabezado o un pie de página:

import React from 'react'const Header = () => <div>this is a header</div>export default Header;

Entonces creé el Main Componiendo. Aquí organizo las rutas. Para empezar, creé tres rutas básicas: inicio, foro y artículos. Por ahora, los componentes que pasemos a cada ruta serán marcadores de posición y los actualizaremos más adelante.

import React from 'react'import { Switch, Route } from 'react-router-dom'const Home = () => <div>this is home</div>
const Forum = () => <div>this is a Forum</div>
const Articles = () => <div>this is the Articles</div>const Main = () => (
<main>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/forum" component={Forum} />
<Route exact path="/articles" component={Articles} />
</Switch>
</main>
)export default Main;

Con todos estos componentes puedo iniciar la aplicación usando y ver la diferencia entre la url base y /forum.

Luego agregué un estilo muy básico al encabezado y pie de página para que se destaque más y podamos ver la sección principal del sitio con mayor claridad.

Con un marco muy básico para un sitio web, comencé a construir el foro. En el código de NodeBB noté que había rutas para /api/ antes de casi todas las URL. Cuando intenta esto en su sitio NodeBB, obtiene algo como esto:

Datos de la API de NodeBB

Estos son todos los datos necesarios para crear la página de inicio del foro. Puedes hacer lo mismo para /api/category/2/general-discussion.

Con eso, comencé a trabajar en la creación de los primeros componentes frontales para el foro, comenzando con la página de inicio. Lo diseñaré con el estilo del foro original de NodeBB, pero podemos cambiar fácilmente el estilo y el diseño más adelante, ya que poseemos todo el código de front-end.

Lo primero que debemos hacer es poner los datos en nuestra tienda redux. Para hacer esto, conecté categorías a la tienda, luego creé una acción y un reductor.

En una nueva carpeta en componentes llamada Categoriesagregué unCategories.jsx archivar. Este archivo debe requerir en un fetchCategories acción, luego conéctelo a la clase. Cuando el componente está montado, puedo llamar a la función fetchCategories.

Llamar a esto agregará datos al estado, por lo que debemos usar mapStateToProps para recuperar los datos en el componente.

import React, { Component } from "react";
import { connect } from "react-redux";
import { fetchCategories } from 'actions/forum'class Categories extends Component {
componentDidMount() {
this.props.fetchCategories()
}
render() {
console.log(this.props.categories)
return;
}
}function mapStateToProps({ forum }) {
return {
categories: forum.categories
};
}export default connect(mapStateToProps, { fetchCategories })(Categories);

Entonces creé la acción. Creé y luego exporté el fetchCategories función. Esta función usa axios para obtener los datos y luego envía las categorías a la carga útil.

export const fetchCategories = () => async dispatch => {
const res = await axios.get(`${baseURL}/api/`);
console.log(res.data)
dispatch({ type: Types.FETCH_CATEGORIES, payload: res.data.categories });
};

Luego tuve que crear un reductor para agregar estos datos al estado. Todo esto hará es poner la carga útil de FETCH_CATEGORIES en la clave de categorías en la sección de foro del informe.

const baseState = { categories: [] };export default (state = baseState, action) => {
switch (action.type) {
case Types.FETCH_CATEGORIES:
return { ...state, categories: action.payload }
default:
return state;
}
}

Finalmente, agregué el forumReducers al archivo reductor principal.

import { combineReducers } from 'redux';
import forumReducers from './forum';const rootReducer = combineReducers({
forum: forumReducers,
});export default rootReducer;

Cuando volví a ejecutar el front-end, recibí un comentario sobre los datos que obtenemos de NodeBB y los datos que obtenemos en el componente de categorías. La primera matriz está vacía porque cuando la página se carga por primera vez, aún no tenemos los datos.

Con la información de la categoría en el Categories vue, podría comenzar a construir nuestra interfaz de usuario.

Administrar categorías

Como tenemos una tabla de datos muy similar, usé.map para crear un nuevo componente para cada categoría en la matriz.

render() {
return (
<div className="categories">
<h2>Categories</h2>
<ul>
{this.props.categories.map((cat, i) => <CategoryItem key={`category-${i}`} category={cat} />)}
</ul>
</div>
);
}

Asigne el tablero y pase la información de la categoría a un CategoryItem El componente conserva gran parte del estilo y los componentes jsx fuera de la vista.

En el CategoryItem componente devuelvo un <li> que contiene el logo en un círculo, título, descripción, subcategorías, número de temas y número de publicaciones. Es mucho código simple así que no los aburriré pero, con un poco de CSS, aquí está el resultado.

Hay muchas cosas que necesito hacer para que la sección del foro del sitio esté en funcionamiento. Estas son algunas de las cosas que debo hacer a continuación, aproximadamente en este orden:

  1. Cree una página para mostrar temas en una categoría determinada
  2. Crear una página para mostrar los artículos de un tema
  3. Comprender el inicio de sesión/registro del usuario
  4. Permitir que los usuarios publiquen respuestas/nuevos temas

Todavía habrá muchas cosas que construir después de esto, incluyendo: votos de publicaciones, mensajes, personalización de usuarios, recuperación de contraseña, página de publicaciones recientes, página de publicaciones populares, censura/moderación de publicaciones, almacenamiento de imágenes, agregar un CMS y más.

También necesito considerar cómo migrar la información actual del foro al nuevo sistema. He visto que hay complementos para hacer esto, pero tendré que probarlo. Podría interrumpir el trabajo si no transfiero los datos al nuevo sistema.

Perfil del autor: https://medium.com/@samwsoftware

Si quieres conocer otros artículos parecidos a Construye un foro con React, NodeJS puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas