Entretien React Débutant — Composants, Props et State

Q: Quelle commande utilise-t-on pour créer une nouvelle application React avec Vite ?

Bonne réponse : npm create vite@latest my-app -- --template react. Avec Vite (recommandé depuis 2023), on utilise npm create vite@latest my-app -- --template react. create-react-app est l'ancienne méthode, désormais en maintenance.

Q: Qu'est-ce que JSX dans React ?

Bonne réponse : Une extension syntaxique qui permet d'écrire du HTML dans du JavaScript. JSX (JavaScript XML) est une extension syntaxique de JavaScript qui ressemble au HTML. Il permet de décrire l'UI de manière déclarative. Sous le capot, JSX est compilé en appels à React.createElement().

Q: Comment affiche-t-on une variable JavaScript dans du JSX ?

Bonne réponse : {variable}. Dans JSX, on utilise les accolades {} pour évaluer une expression JavaScript et afficher son résultat. Exemple : <h1>Bonjour {prenom}</h1>.

Q: Qu'est-ce qu'un composant fonctionnel React ?

Bonne réponse : Une fonction JavaScript qui retourne du JSX. Un composant fonctionnel est une simple fonction JavaScript qui accepte des props en argument et retourne du JSX. C'est la façon moderne et recommandée d'écrire des composants React.

Q: À quoi servent les props dans React ?

Bonne réponse : Passer des données d'un composant parent à un composant enfant. Les props (propriétés) sont des données en lecture seule passées du composant parent vers le composant enfant. Elles permettent de rendre les composants réutilisables avec des données différentes.

Q: Quel hook React utilise-t-on pour gérer l'état local dans un composant fonctionnel ?

Bonne réponse : useState. useState est le hook fondamental pour ajouter un état local à un composant fonctionnel. Il retourne un tableau [valeur, fonctionDeMiseÀJour]. Exemple : const [count, setCount] = useState(0).

Q: Comment gère-t-on un clic sur un bouton en React ?

Bonne réponse : . En JSX, les événements s'écrivent en camelCase : onClick, onChange, onSubmit. On passe une référence de fonction (pas un appel) : onClick={handleClick}.

Q: Quelle méthode utilise-t-on pour afficher une liste d'éléments en React ?

Bonne réponse : La méthode .map() avec une key unique pour chaque élément. On utilise la méthode JavaScript .map() sur un tableau pour générer des éléments JSX. Chaque élément doit avoir une prop key unique et stable (pas l'index du tableau si l'ordre peut changer).

Q: À quoi sert le hook useEffect dans React ?

Bonne réponse : Effectuer des effets de bord (appels API, timers, abonnements). useEffect permet d'exécuter du code après le rendu : appels API, souscriptions à des événements, manipulation du DOM, etc. Il remplace les méthodes de cycle de vie des composants classes.

Q: Comment lit-on la valeur d'un champ input dans un formulaire React contrôlé ?

Bonne réponse : Avec un state local et onChange. Dans un composant contrôlé, la valeur de l'input est liée à un state React : value={text} et onChange={(e) => setText(e.target.value)}. C'est React qui est la source de vérité.

React Debutant Quiz-React-Debutant React-Composants React-Props React-State React-Jsx React-Routing Questions-Entretien-React Qcm-React Apprendre-React Cycle-De-Vie-React Javascript Front-End

Débutant 🔀 Mixte 20 questions ⏱ 15 min

📝

Entretien React Débutant — Composants, Props et State

20 questions sur les bases de React : composants, props et state. Idéal pour préparer un entretien développeur React débutant.

20 questions ⏱ ~15 min Niveau Débutant

Publié/Développé par Mezgani Said

Développeur web full‑stack et formateur spécialisé en Angular, TypeScript et Node.js, il partage sur AngularForAll des ressources complètes pour les développeurs : tutoriels pratiques, guides pas‑à‑pas, outils gratuits, exercices, QCM techniques et retours d’expérience issus de projets réels (SaaS, micro‑frontends, architectures modulaires, applications d’entreprise).
Le site couvre l’ensemble de l’écosystème web : front‑end, intégration HTML/CSS, Composants réutilisables, SEO, back‑end, cloud, IA, CLI, productivité, bien‑être, outils web et métiers du digital.
Un espace pensé pour générer, apprendre, progresser et développer des projets modernes avec des bonnes pratiques professionnelles.

Banque de révision : les 20 questions corrigées

Voici l'intégralité des 20 questions de « Entretien React Débutant — Composants, Props et State », chacune avec sa bonne réponse et son explication. Le quiz interactif ci-dessus en tire une sélection aléatoire à chaque tentative — utilisez cette liste complète pour réviser.

npx create-react-app my-app
npm create vite@latest my-app -- --template react (bonne réponse)
npx react new my-app
npm init react my-app

Explication : Avec Vite (recommandé depuis 2023), on utilise npm create vite@latest my-app -- --template react. create-react-app est l'ancienne méthode, désormais en maintenance.

Vite offre un démarrage quasi-instantané et un HMR (Hot Module Replacement) ultra-rapide comparé à CRA.

Un langage de programmation distinct de JavaScript
Une extension syntaxique qui permet d'écrire du HTML dans du JavaScript (bonne réponse)
Un framework CSS pour React
Un outil de build pour React

Explication : JSX (JavaScript XML) est une extension syntaxique de JavaScript qui ressemble au HTML. Il permet de décrire l'UI de manière déclarative. Sous le capot, JSX est compilé en appels à React.createElement().

JSX n'est pas du HTML valide : utilisez className au lieu de class, et htmlFor au lieu de for.

{{ variable }}
{variable} (bonne réponse)
${variable}

Explication : Dans JSX, on utilise les accolades {} pour évaluer une expression JavaScript et afficher son résultat. Exemple : <h1>Bonjour {prenom}</h1>.

Toute expression JavaScript valide fonctionne entre accolades : {a + b}, {user.name.toUpperCase()}, {condition ? "oui" : "non"}.

Une classe JavaScript qui étend React.Component
Une fonction JavaScript qui retourne du JSX (bonne réponse)
Un élément HTML personnalisé
Un hook React spécial

Explication : Un composant fonctionnel est une simple fonction JavaScript qui accepte des props en argument et retourne du JSX. C'est la façon moderne et recommandée d'écrire des composants React.

Avec les hooks, les composants fonctionnels peuvent gérer l'état local et les effets de bord, rendant les composants classes obsolètes.

Stocker l'état local du composant
Passer des données d'un composant parent à un composant enfant (bonne réponse)
Gérer les événements utilisateur
Faire des requêtes API

Explication : Les props (propriétés) sont des données en lecture seule passées du composant parent vers le composant enfant. Elles permettent de rendre les composants réutilisables avec des données différentes.

Les props sont immutables : un composant ne doit jamais modifier ses propres props.

useEffect
useContext
useState (bonne réponse)
useReducer

Explication : useState est le hook fondamental pour ajouter un état local à un composant fonctionnel. Il retourne un tableau [valeur, fonctionDeMiseÀJour]. Exemple : const [count, setCount] = useState(0).

La fonction de mise à jour peut accepter une fonction callback pour se baser sur l'état précédent : setCount(prev => prev + 1).

(bonne réponse)

Explication : En JSX, les événements s'écrivent en camelCase : onClick, onChange, onSubmit. On passe une référence de fonction (pas un appel) : onClick={handleClick}.

Si vous devez passer un argument, utilisez une arrow function : onClick={() => handleClick(id)}. Attention à ne pas créer de nouvelle fonction à chaque rendu si possible.

Une boucle for classique dans le JSX
La méthode .map() avec une key unique pour chaque élément (bonne réponse)
La directive *ngFor
Un composant spécial

Explication : On utilise la méthode JavaScript .map() sur un tableau pour générer des éléments JSX. Chaque élément doit avoir une prop key unique et stable (pas l'index du tableau si l'ordre peut changer).

La clé (key) aide React à identifier les éléments modifiés, ajoutés ou supprimés pour optimiser le rendu.

Gérer l'état local du composant
Effectuer des effets de bord (appels API, timers, abonnements) (bonne réponse)
Créer un contexte global
Mémoriser des valeurs calculées

Explication : useEffect permet d'exécuter du code après le rendu : appels API, souscriptions à des événements, manipulation du DOM, etc. Il remplace les méthodes de cycle de vie des composants classes.

Le tableau de dépendances (2e argument) contrôle quand l'effet s'exécute : vide [] = au montage uniquement, avec variables = quand elles changent.

document.getElementById("input").value
Avec un state local et onChange (bonne réponse)
Avec la propriété ref
Avec $event.target.value uniquement

Explication : Dans un composant contrôlé, la valeur de l'input est liée à un state React : value={text} et onChange={(e) => setText(e.target.value)}. C'est React qui est la source de vérité.

Les composants contrôlés offrent plus de contrôle sur les données du formulaire (validation instantanée, formatage, etc.).

Une copie exacte du DOM réel stockée dans le navigateur
Une représentation légère du DOM en mémoire que React utilise pour optimiser les mises à jour (bonne réponse)
Un plugin navigateur pour déboguer React
Le DOM du serveur

Explication : Le Virtual DOM est une copie légère du DOM réel conservée en mémoire. Quand l'état change, React crée un nouveau Virtual DOM, le compare avec l'ancien (diffing), puis met à jour uniquement les parties modifiées du DOM réel (reconciliation).

Cette approche rend React très performant car les manipulations directes du DOM réel sont coûteuses.

En utilisant un tableau d'éléments
En utilisant un Fragment ( ou ) (bonne réponse)
On ne peut pas, il faut toujours un élément parent
En utilisant une section

Explication : Les Fragments (<>...</> ou <React.Fragment>) permettent de grouper des éléments sans ajouter de nœud supplémentaire au DOM. C'est utile pour ne pas casser les mises en page CSS.

La syntaxe courte <></> ne supporte pas les attributs. Si vous avez besoin d'une key, utilisez <React.Fragment key={...}>.

(bonne réponse)

Explication : En JSX, l'attribut class HTML s'écrit className. On peut utiliser des expressions JavaScript ternaires ou la librairie clsx/classnames pour des cas complexes.

Avec clsx : className={clsx("btn", { "btn-primary": isPrimary, "btn-disabled": isDisabled })}. C'est très pratique pour gérer plusieurs classes conditionnelles.

function Card(props) { return {props.children}; }
function Card({ children }) { return {children}; }
Les deux réponses sont correctes (bonne réponse)
function Card() { return ; }

Explication : Les deux syntaxes sont valides. children est une prop spéciale qui contient le contenu entre les balises du composant : <Card><p>Texte</p></Card>. On peut l'accéder via props.children ou le destructuring.

Les children peuvent être n'importe quel nœud React valide : chaîne, élément, tableau, fonction (render props), etc.

Afficher ou masquer des composants selon une condition (bonne réponse)
Compiler conditionnellement le code
Charger des composants depuis le serveur
Utiliser des conditions dans les boucles

Explication : Le rendu conditionnel permet d'afficher différents contenus selon l'état ou les props. Les techniques courantes : opérateur ternaire {condition ? <A /> : <B />}, court-circuit {condition && <A />}, ou if/else avant le return.

Attention au court-circuit avec des valeurs falsy comme 0 : {count && <p>{count}</p>} affichera 0 si count vaut 0. Utilisez {count > 0 && ...}.

useState
useEffect
useMemo (bonne réponse)
useRef

Explication : useMemo mémorise le résultat d'un calcul coûteux entre les rendus. Il ne recalcule que si ses dépendances changent. Exemple : const sortedList = useMemo(() => items.sort(), [items]).

N'utilisez pas useMemo pour toutes les valeurs : réservez-le pour les calculs vraiment coûteux. Une optimisation prématurée peut nuire à la lisibilité.

En passant un tableau de dépendances en deuxième argument (bonne réponse)
En utilisant return false dans le useEffect
En mettant le useEffect dans une condition if
On ne peut pas empêcher son exécution

Explication : Le tableau de dépendances (2e argument) indique quand l'effet doit être réexécuté. [] = uniquement au montage. [dep1, dep2] = quand ces valeurs changent. Sans tableau, l'effet s'exécute après chaque rendu.

La fonction de nettoyage retournée par useEffect s'exécute avant la prochaine exécution de l'effet ou au démontage du composant.

Utiliser une boucle for à la place
Ajouter une prop key unique à chaque élément (bonne réponse)
Utiliser un index comme identifiant
Wrapper la liste dans une

Explication : La prop key est obligatoire pour chaque élément d'une liste générée dynamiquement. Elle doit être unique et stable (un ID de données idéalement, pas l'index si la liste peut être réordonnée).

Une mauvaise gestion des clés peut causer des bugs d'état (state) car React utilise les clés pour associer chaque élément à son état.

Un composant contrôlé a son état géré par React ; un non contrôlé par le DOM lui-même (bonne réponse)
Un composant contrôlé est plus petit ; un non contrôlé plus grand
Il n'y a pas de différence
Un composant contrôlé utilise des classes ; un non contrôlé des fonctions

Explication : Dans un composant contrôlé, React est la "source de vérité" : la valeur de l'input est stockée dans un state et mise à jour via onChange. Dans un composant non contrôlé, le DOM gère l'état et on y accède via une ref.

Les composants contrôlés sont recommandés pour la plupart des formulaires car ils offrent un contrôle total sur les données.

Dans le corps du composant, directement
Dans un useEffect avec un tableau de dépendances vide [] (bonne réponse)
Dans le return du composant
Dans une fonction appelée dans le JSX

Explication : On utilise useEffect avec un tableau vide [] comme dépendances pour que l'appel API ne se fasse qu'une fois, au montage du composant. Exemple : useEffect(() => { fetchData() }, []).

N'oubliez pas de gérer l'état de chargement (loading) et les erreurs : useState pour loading/error/data. Voir aussi React Query/TanStack Query pour une gestion avancée.