Guide très facile React — OFPPT Notes دليل React سهل جدا — ملاحظات OFPPT

npm create vite@latest first-app-react -- --template react
cd first-app-react
npm install
npm run dev

cd first-app-react
mkdir src\data

export const initialUsers = [
  {
    id: 1,
    email: 'admin@ofppt.ma',
    password: 'password',
    name: 'Admin OFPPT',
  },
]

export const initialModules = [
  { id: 1, code: 'M101', nom: 'Programmation', coefficient: 2 },
  { id: 2, code: 'M102', nom: 'Réseaux', coefficient: 2 },
  { id: 3, code: 'M103', nom: 'Développement web', coefficient: 3 },
]

import { useState } from 'react'

function Login({ users, onLogin }) {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [error, setError] = useState('')

  function handleSubmit(e) {
    e.preventDefault()
    const found = users.find(
      (u) => u.email === email && u.password === password
    )
    if (found) {
      setError('')
      onLogin(found)
    } else {
      setError('Email ou mot de passe incorrect.')
    }
  }

  return (
    <div className="login-page">
      <form className="login-box" onSubmit={handleSubmit}>
        <h1>Connexion OFPPT Notes</h1>
        {error ? <p className="error">{error}</p> : null}
        <label>
          Email
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
          />
        </label>
        <label>
          Mot de passe
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            required
          />
        </label>
        <button type="submit">Se connecter</button>
        <p className="hint">Compte test : admin@ofppt.ma / password</p>
      </form>
    </div>
  )
}

export default Login

import { useState } from 'react'

function ModuleTable({ modules, setModules }) {
  const [code, setCode] = useState('')
  const [nom, setNom] = useState('')
  const [coefficient, setCoefficient] = useState(1)
  const [editId, setEditId] = useState(null)

  function resetForm() {
    setCode('')
    setNom('')
    setCoefficient(1)
    setEditId(null)
  }

  function handleSubmit(e) {
    e.preventDefault()
    if (editId) {
      setModules(
        modules.map((m) =>
          m.id === editId
            ? { ...m, code, nom, coefficient: Number(coefficient) }
            : m
        )
      )
    } else {
      const newModule = {
        id: Date.now(),
        code,
        nom,
        coefficient: Number(coefficient),
      }
      setModules([...modules, newModule])
    }
    resetForm()
  }

  function startEdit(module) {
    setEditId(module.id)
    setCode(module.code)
    setNom(module.nom)
    setCoefficient(module.coefficient)
  }

  function handleDelete(id) {
    setModules(modules.filter((m) => m.id !== id))
    if (editId === id) {
      resetForm()
    }
  }

  return (
    <section className="card">
      <h2>Modules</h2>
      <form className="row-form" onSubmit={handleSubmit}>
        <input
          placeholder="Code"
          value={code}
          onChange={(e) => setCode(e.target.value)}
          required
        />
        <input
          placeholder="Nom"
          value={nom}
          onChange={(e) => setNom(e.target.value)}
          required
        />
        <input
          type="number"
          min="1"
          max="10"
          value={coefficient}
          onChange={(e) => setCoefficient(e.target.value)}
          required
        />
        <button type="submit">{editId ? 'Modifier' : 'Ajouter'}</button>
        {editId ? (
          <button type="button" onClick={resetForm}>
            Annuler
          </button>
        ) : null}
      </form>
      <table>
        <thead>
          <tr>
            <th>Code</th>
            <th>Nom</th>
            <th>Coefficient</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {modules.map((m) => (
            <tr key={m.id}>
              <td>{m.code}</td>
              <td>{m.nom}</td>
              <td>{m.coefficient}</td>
              <td>
                <button type="button" onClick={() => startEdit(m)}>
                  Modifier
                </button>
                <button type="button" onClick={() => handleDelete(m.id)}>
                  Supprimer
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </section>
  )
}

export default ModuleTable

import { useState } from 'react'

function CalculNote() {
  const [n1, setN1] = useState('')
  const [n2, setN2] = useState('')
  const [eff, setEff] = useState('')
  const [result, setResult] = useState(null)

  function handleSubmit(e) {
    e.preventDefault()
    const note1 = Number(n1)
    const note2 = Number(n2)
    const noteEff = Number(eff)
    const noteFinale = (note1 * 1 + note2 * 3 + noteEff) / 9
    const rounded = Math.round(noteFinale * 100) / 100
    setResult({
      noteFinale: rounded,
      reussi: rounded >= 10,
    })
  }

  return (
    <section className="card">
      <h2>Calcul de la note</h2>
      <p>Formule : (N1 × 1 + N2 × 3 + EFF) ÷ 9</p>
      <form className="row-form" onSubmit={handleSubmit}>
        <input
          type="number"
          min="0"
          max="20"
          step="0.01"
          placeholder="N1"
          value={n1}
          onChange={(e) => setN1(e.target.value)}
          required
        />
        <input
          type="number"
          min="0"
          max="20"
          step="0.01"
          placeholder="N2"
          value={n2}
          onChange={(e) => setN2(e.target.value)}
          required
        />
        <input
          type="number"
          min="0"
          max="100"
          step="0.01"
          placeholder="EFF (0 à 100)"
          value={eff}
          onChange={(e) => setEff(e.target.value)}
          required
        />
        <button type="submit">Calculer</button>
      </form>
      {result ? (
        <p className={result.reussi ? 'ok' : 'ko'}>
          Note finale : {result.noteFinale} / 20 —{' '}
          {result.reussi ? 'Réussi' : 'Ajourné'}
        </p>
      ) : null}
    </section>
  )
}

export default CalculNote

import { useState } from 'react'
import { initialUsers, initialModules } from './data/initialData'
import Login from './Login'
import ModuleTable from './ModuleTable'
import CalculNote from './CalculNote'
import './App.css'

function App() {
  const [user, setUser] = useState(null)
  const [modules, setModules] = useState(initialModules)

  function handleLogin(loggedUser) {
    setUser(loggedUser)
  }

  function handleLogout() {
    setUser(null)
  }

  if (!user) {
    return <Login users={initialUsers} onLogin={handleLogin} />
  }

  return (
    <div className="app">
      <header className="topbar">
        <h1>OFPPT Notes</h1>
        <div className="topbar-right">
          <span>{user.name}</span>
          <button type="button" onClick={handleLogout}>
            Déconnexion
          </button>
        </div>
      </header>
      <main className="content">
        <ModuleTable modules={modules} setModules={setModules} />
        <CalculNote />
      </main>
    </div>
  )
}

export default App

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background: #e8eef5;
  color: #1e293b;
}

.app {
  min-height: 100vh;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: #0f4c81;
  color: #fff;
}

.topbar h1 {
  margin: 0;
  font-size: 1.2rem;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.content {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

.card {
  background: #fff;
  border: 1px solid #cbd5e1;
  padding: 18px;
  margin-bottom: 18px;
}

.card h2 {
  margin: 0 0 12px;
  font-size: 1.1rem;
}

.row-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.row-form input {
  padding: 8px 10px;
  border: 1px solid #94a3b8;
  min-width: 120px;
}

button {
  padding: 8px 12px;
  border: 0;
  background: #0f4c81;
  color: #fff;
  cursor: pointer;
}

button[type='button'] {
  background: #64748b;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #cbd5e1;
  padding: 8px 10px;
  text-align: left;
}

th {
  background: #f1f5f9;
}

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8eef5;
}

.login-box {
  width: 100%;
  max-width: 360px;
  background: #fff;
  border: 1px solid #cbd5e1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login-box h1 {
  margin: 0 0 8px;
  font-size: 1.2rem;
  text-align: center;
}

.login-box label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9rem;
}

.login-box input {
  padding: 8px 10px;
  border: 1px solid #94a3b8;
}

.error {
  color: #b91c1c;
  margin: 0;
}

.hint {
  font-size: 0.8rem;
  color: #64748b;
  text-align: center;
  margin: 0;
}

.ok {
  color: #166534;
  font-weight: 700;
}

.ko {
  color: #b91c1c;
  font-weight: 700;
}

npm run dev