React - Les Bases

Qu'est-ce que React ?

React, c'est une librairie JavaScript (pas vraiment un framework) créée par Facebook pour construire des interfaces utilisateur.

Pourquoi React ?

• Component-based : on découpe tout en petits blocs réutilisables
• Déclaratif : on dit ce qu'on veut, pas comment le faire
• Écosystème énorme : tout existe déjà, ou presque
• Job market : c'est le plus demandé sur le marché
  voir https://2024.stateofjs.com/en-US

---

Setup rapide avec Vite

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

Et voilà ! Ton app React tourne sur localhost:5173

---

Les 3 concepts essentiels

1. Les Composants

function MonComposant() {
  return <h1>Hello World!</h1>
}

2. Le State (useState)

import { useState } from 'react'

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

  return (
    <div>
      <p>Compteur: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  )
}

3. Les Props

function Salut({ nom }) {
  return <h1>Salut {nom}!</h1>
}

// Utilisation
<Salut nom="Andy" />

---

JSX en 30 secondes

• HTML dans JavaScript
• className au lieu de class
• {} pour injecter du JS
• Toujours fermer les balises

function App() {
  const nom = "Andy"

  return (
    <div className="container">
      <h1>Salut {nom}!</h1>
      <img src="photo.jpg" alt="Photo" />
    </div>
  )
}

---

Exemple concret : Todo List

import { useState } from 'react'

function TodoList() {
  const [todos, setTodos] = useState([])
  const [input, setInput] = useState('')

  const ajouter = () => {
    if (input.trim()) {
      setTodos([...todos, { id: Date.now(), text: input }])
      setInput('')
    }
  }

  return (
    <div>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Nouvelle tâche..."
      />
      <button onClick={ajouter}>Ajouter</button>

      <ul>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  )
}

Pour aller plus loin

Roadmap complète : https://roadmap.sh/react
Documentation officielle : https://react.dev/learn