React

Descripción general

React es una biblioteca de JavaScript para crear interfaces de usuario. Esta plantilla utiliza Create React App (CRA), que ofrece una configuración cómoda para aprender React y una base sólida para aplicaciones de página única.

Inicio rápido

git clone https://<git-server>/<username>/<repo-name>.git
cd <repo-name>

npm install

npm start

npm run build
git add .
git commit -m "Initial setup"
git push origin main

Desarrollo local con Docker

Si no tienes Node.js instalado localmente, puedes usar Docker para ejecutar comandos de React.

Requisitos previos

Instala Docker Desktop para tu sistema operativo (Windows, Mac o Linux).

Ejecutar comandos con Docker

# Run npm install
docker run --rm -v $(pwd):/app -w /app node:18 npm install

# Run development server (accessible at localhost:3000)
docker run --rm -v $(pwd):/app -w /app -p 3000:3000 node:18 npm start

# Build for production
docker run --rm -v $(pwd):/app -w /app node:18 npm run build

Estructura del proyecto

Entender dónde se ubican los archivos:

├── src/
│   ├── components/           # Componentes React
│   ├── hooks/                # Hooks personalizados
│   ├── pages/                # Componentes de página
│   ├── services/             # Servicios de API
│   ├── store/                # Configuración del store Redux
│   ├── App.js                # Componente raíz
│   ├── App.css               # Estilos de la app
│   └── index.js              # Punto de entrada de la aplicación
├── public/                   # Archivos estáticos
├── package.json              # Dependencias y scripts
├── tailwind.config.js        # Configuración de Tailwind CSS
└── Dockerfile                # Configuración de build Docker
        

Tareas comunes

Crear un componente

Crea archivos .js en src/components/:

// src/components/Button.js
export default function Button({ label, onClick }) {
  return (
    <button
      className="bg-blue-500 text-white px-4 py-2 rounded"
      onClick={onClick}
    >
      {label}
    </button>
  );
}

Usar React Hooks

Hooks comunes para estado y efectos:

import { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Usar React Router

React Router viene preconfigurado para la navegación:

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

Usar Tailwind CSS

Tailwind CSS viene preconfigurado. Usa las clases directamente en tu JSX:

<div className="bg-blue-500 text-white p-4 rounded-lg">
  Hello Tailwind!
</div>

Comandos útiles

Resolución de problemas

Flujo de despliegue

Cada vez que haces push de tu código a Git, tu aplicación se compila y despliega automáticamente:

La URL de tu aplicación desplegada sigue este formato:

https://<your-subdomain>-<repo-name>.<session-domain>

Ejemplo: https://student01-module-a.demo.nstrim.app