Écris. Exécute. Corrige.

Un vrai bac à sable React dans le navigateur : modifie le JSX, lance le rendu et valide les comportements attendus.

Prêt à exécuter 00:30:00

App.jsx

Écris ton composant sans quitter CodeArena.

const users = [
  { id: 1, name: 'Ada Lovelace', role: 'Frontend engineer' },
  { id: 2, name: 'Grace Hopper', role: 'Platform engineer' },
  { id: 3, name: 'Margaret Hamilton', role: 'Systems engineer' },
];

function App() {
  const [query, setQuery] = React.useState('');
  // TODO: filter the users by name with the query
  const filteredUsers = users;

  return (
    <main className="app-shell">
      <p className="eyebrow">Entraînement React</p>
      <h1>Liste d’utilisateurs</h1>
      <input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Rechercher un utilisateur" aria-label="Rechercher un utilisateur" />
      <ul>{filteredUsers.map((user) => <li key={user.id}><strong>{user.name}</strong><span>{user.role}</span></li>)}</ul>
    </main>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

23 lignes · Tab insère deux espaces

Aperçu navigateur

iframe isolée

Vérifications

Un champ de recherche est présent

La liste affiche des utilisateurs

Le rendu contient un nom utilisateur

0 / 3 vérifications150 XP à gagner

Console

Lance le code pour observer le résultat.