React

Aperçu

React est une bibliothèque JavaScript pour créer des interfaces utilisateur. Ce modèle utilise Create React App (CRA), qui fournit une configuration confortable pour apprendre React et une base solide pour les applications à page unique.

Démarrage rapide

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

Développement local avec Docker

Si vous n'avez pas Node.js installé localement, vous pouvez utiliser Docker pour exécuter les commandes React.

Prérequis

Installez Docker Desktop pour votre système d'exploitation (Windows, Mac ou Linux).

Exécuter des commandes avec Docker

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

# Exécuter le serveur de développement (accessible sur localhost:3000)
docker run --rm -v $(pwd):/app -w /app -p 3000:3000 node:18 npm start

# Construire pour la production
docker run --rm -v $(pwd):/app -w /app node:18 npm run build

Structure du projet

Comprendre où sont situés les fichiers :

├── src/
│   ├── components/           # Composants React
│   ├── hooks/                # Hooks React personnalisés
│   ├── pages/                # Composants de page
│   ├── services/             # Services API
│   ├── store/                # Configuration du store Redux
│   ├── App.js                # Composant racine
│   ├── App.css               # Styles de l'app
│   └── index.js              # Point d'entrée de l'application
├── public/                   # Fichiers statiques
├── package.json              # Dépendances et scripts
├── tailwind.config.js        # Configuration Tailwind CSS
└── Dockerfile                # Configuration de build Docker
        

Tâches courantes

Créer un composant

Créez des fichiers .js dans 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>
  );
}

Utiliser les hooks React

Hooks courants pour l'état et les effets de bord :

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>
  );
}

Utiliser React Router

React Router est préconfiguré pour la navigation :

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>
  );
}

Utiliser Tailwind CSS

Tailwind CSS est préconfiguré. Utilisez les classes directement dans votre JSX :

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

Commandes utiles

Dépannage

Flux de déploiement

Chaque fois que vous poussez du code vers Git, votre application est automatiquement construite et déployée :

L'URL de votre application déployée suit ce format :

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

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