Inicia una aplicación Web con React

🎥 Puedes ver un videotutorial completo sobre cómo crear tu aplicación React con Context.API y useReducer siguiendo esta plantilla.

Inicio rápido: useReducer y useContext en tu Template

1. Instalación

Asegúrate de seguir primero los pasos de ejecutar el proyecto, luego vuelve a esta lectura. Si estás usando Codespaces es posible que el proyecto ya esté en ejecución.

2. Añade tu primera vista

La app inicia en main.jsx, donde se define el proveedor global. Las rutas están en el archivo routes.jsx, que organiza la navegación de la aplicación a través de reac-router, puedes leer más sobre React Router aquí.

Abre el archivo routes.jsx, donde se definen las rutas como:

1import { createBrowserRouter, createRoutesFromElements, Route } from "react-router-dom";
2import { Layout } from "./pages/Layout";
3import { Home } from "./pages/Home";
4import { Single } from "./pages/Single";
5import { Demo } from "./pages/Demo";
6
7export const router = createBrowserRouter(
8    createRoutesFromElements(
9        <Route path="/" element={<Layout />} errorElement={<h1>Not found!</h1>}>
10            <Route path="/" element={<Home />} />
11            <Route path="/single/:theId" element={<Single />} />
12            <Route path="/demo" element={<Demo />} />
13        </Route>
14    )
15);

Como verás ya hemos añadido algunas rutas como Home, Demo y Single, estas vistas son ejemplos útiles de las cosas más frecuentes que sueles necesitar en un proyecto.

3. Codifica tu primera vista HTML

Como puedes ver, la página /pages/Demo.jsx es un componente React que accede al estado global y despacha acciones:

1import useGlobalReducer from "../hooks/useGlobalReducer";
2
3export const Demo = () => {
4  const { store, dispatch } = useGlobalReducer();
5  
6  return (
7    <ul>
8      {store.todos.map(todo => (
9        <li key={todo.id} style={{ background: todo.background }}>
10          {todo.title}
11          <button onClick={() => dispatch({ 
12            type: 'add_task', 
13            payload: { id: todo.id, color: '#ffa500' } 
14          })}>
15            Cambiar color
16          </button>
17        </li>
18      ))}
19    </ul>
20  );
21};

Algunos puntos claves que podrias observar de esta vista, son:

• El componente devuelve HTML.
• Al principio del archivo del componente (Demo.js) se hace la importacion de useGlobalReducer que se utilizará para tratar cualquier información global necesaria de otras vistas o de la aplicación.
• También es importante mencionar que useGlobalReducer se llama dentro del componente, en el primer par de líneas:

1const { store, dispatch } = useGlobalReducer();

4. Añadir estilos a componentes

Guarda estilos en el archivo index.css o crea archivos CSS por componente.

Ejemplo (src/styles/demo.css):

1.orange-bg { 
2  background-color: #ffa500; 
3}

Importa en Demo.jsx:

1import "../styles/demo.css";

5. Crea tu primer componente reutilizable

Crea ./components/Card.jsx:

1export const Card = ({ title, subtitle }) => (
2  <div className="card">
3    <h5>{title}</h5>
4    <h6>{subtitle}</h6>
5  </div>
6);

Úsalo en Home.jsx:

1import { Card } from "../components/Card";
2
3export const Home = () => (
4  <Card title="Hello" subtitle="Welcome to Home" />
5);

6. Uso del contexto (useGlobalReducer)

useGlobalReducer obtiene store y dispatch desde el contexto global definido en src/hooks/useGlobalReducer.jsx, conectándose con el sistema de manejo de estado de src/store.js.

🟡 ¿Cómo usarlo?

En tus componentes, importa y usa el hook useGlobalReducer para acceder al estado (store) y actualizarlo mediante dispatch.

📌 Ejemplo en Demo.jsx:

1import useGlobalReducer from "../hooks/useGlobalReducer";
2
3export const Demo = () => {
4  const { store, dispatch } = useGlobalReducer();
5  
6  const cambiarColor = (id) => {
7    dispatch({
8      type: 'add_task',
9      payload: { id, color: '#ffa500' }
10    });
11  };
12
13  return (
14    <ul>
15      {store.todos.map(todo => (
16        <li key={todo.id} style={{ background: todo.background }}>
17          {todo.title}
18          <button onClick={() => cambiarColor(todo.id)}>
19            Cambiar color
20          </button>
21        </li>
22      ))}
23    </ul>
24  );
25};

Cómo funcionan las acciones (store.js):

El estado global se guarda y gestiona en src/store.js mediante un reducer y un estado inicial definido en initialStore.

Estado inicial (initialStore):

1export const initialStore = () => {
2  return {
3    message: null,
4    todos: [
5      { id: 1, title: "Make the bed", background: null },
6      { id: 2, title: "Do my homework", background: null }
7    ]
8  };
9};

El estado inicial contiene un mensaje y una lista de tareas (todos), cada una con un id, title y background.

Reducer (storeReducer):

Cuando se ejecuta dispatch, la acción es recibida por el reducer en src/store.js, que actualiza el estado según el type:

1case 'add_task':
2  return {
3    ...store,
4    todos: store.todos.map(todo => 
5      todo.id === action.payload.id 
6        ? { ...todo, background: action.payload.color }
7        : todo
8    )
9  };

Con esta estructura (initialStore y storeReducer), tu aplicación mantiene un estado global centralizado y escalable.

¡Publica tu sitio web!

1. Vercel: El proveedor de alojamiento GRATUITO recomendado es vercel.com, puedes desplegar en 1 minuto escribiendo los siguientes 2 comandos:

Iniciar sesión (necesitas tener una cuenta):

1$ npm i vercel -g && vercel login

Desplegar:

1$ vercel --prod

✎ Nota: Si no tienes una cuenta, simplemente ve a vercel.com, crea una cuenta y regresa aquí.