Your corrected answers
[React] - Test Technique
15 / 22
Tu connais React ?
Tu es sûr ?
Voici un test pour savoir si tu connais vraiment React. Il y a des questions pièges, sinon ce serait trop facile, fait bien attention à tes réponses.
Les fondamentaux
Dans cette partie, on va tester ta compréhension du JSX, du ReactDOM ainsi que le concept des composants.
Votre réponse, 'JavaScript XML', est trop vague et ne donne pas l'explication attendue sur ce qu'est le JSX. Le JSX, en termes simples, permet d'écrire du HTML dans du JavaScript. Essayez d'inclure cette information dans vos réponses futures.
<p id="title"> BeginReact </p> - Comment va-t-il être transformé pour être envoyé au navigateur ?Explanation: C'est React.createElement, le dom se charge de render les éléments, pas de les créer. Ensuite cette fonction prend toujours en deuxièmes paramètres les props.
ReactDOM dans lequel il modifie le VRAI DOM ?Votre réponse n'est pas tout à fait correcte. La phase du ReactDOM dans laquelle il modifie le VRAI DOM est appelée 'Commit'. Essayez de retenir cette information pour la prochaine fois.
composant ?Très bien! Vous avez parfaitement bien compris l'avantage principal de faire des composants - la réutilisabilité. Continuez comme ça!
Explanation: Un composant commence toujours par une majuscule et il faut utiliser la syntaxe de arrow function pour que ce soit un composant.
Explanation: Il n'y a pas besoin d'avoir minimum un élément JSX retourné, on peut aussi retourner des booléens et des chaînes. On peut créer des composants avec un seul caractère. Par contre, on ne peut pas retourner plusieurs éléments JSX, c'est pour ça que les fragments existent.
Considère le code suivant :
let value = 12;
const Component = (props) => {
value += props.x;
return <p>{value}</p>
}Votre réponse n'est pas totalement correcte. Le problème du composant n'est pas l'absence de changement d'état, mais le fait qu'il n'est pas pur. Un composant est impur quand il affecte une variable externe à lui-même, comme c'est le cas ici avec `value`. Continuez à travailler, vous êtes sur la bonne voie !
Hooks
Les hooks font partie des éléments essentiels de React. Voici 10 questions pour vérifier que tu les as compris.
useState
Considère le code suivant :
const Counter = () => {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1)
setCount(count + 1)
console.log("Log 1 : ", count)
}
return (
<button onClick={increment}>{count}</button>
)
}Imagine maintenant que je clique une seule fois sur le bouton.
Explanation: count n'est pas directement affecté, il faut attendre le prochain render.
Explanation: count a été incrémenté qu'une seule fois malgré les deux appels de `setCount` car on fait deux fois `setCount` avec 0 + 1 qui est égal à 1
Considère le code suivant :
const User = () => {
const [user, setUser] = useState(
{ name: "Foo", age: 42, /* ... other properties */ }
);
const onNameChange = (newName) => {
// ton code ici
}
return <NameForm user={user} onNameChange={onNameChange} />
}Félicitations, ta réponse est entièrement correcte. Tu as bien utilisé la copie d'un objet pour modifier le nom de l'utilisateur. Poursuis ton bon travail !
useEffect
tableau de dépendences change ?Très bien, c'est exactement ça. Lorsqu'une variable dans le tableau de dépendances change, le useEffect est effectivement réexécuté. Continuez comme ça !
Considère le code suivant :
const Counter = () => {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1)
}
useLayoutEffect(() => {
console.log("Log 1");
}, [count])
useEffect(() => {
console.log("Log 2");
}, [count])
return (
<button onClick={increment}>{count}</button>
)
}button ?Explanation: useLayoutEffect est exécuté avant useEffect
useEffect d'après la documentation React ?useEffect ? Félicitations! Votre réponse est correcte. C'est exact, le useEffect sera exécuté à chaque rendu si un tableau de dépendances n'est pas fourni.
useRef
Considère le code suivant :
const Counter = () => {
const ref = useRef(0)
const increment = () => {
ref.current += 1;
}
return (
<button onClick={increment}>{ref.current}</button>
)
}Explanation: useRef ne provoque pas de render React, l'interface ne sera donc pas mis à jour.
useRef ?Explanation: Il permet de stocker des variables et de les modifier sans influencer le render. Les références sont aussi "scopé" / limité à chaque composant. Ils permettent évidemment aussi de référencer des éléments du DOM.
Autre hooks
Excellent travail, ta réponse est correcte. Continue comme ça !
fonction afin qu'elle garde la même référence entre les rendus ?Parfait, votre réponse est correcte. Le hook 'useCallback' est effectivement utilisé pour mémoriser une fonction afin qu'elle garde la même référence entre les rendus. Continuez comme ça !
useMemo ?Excellent travail ! Votre réponse est correcte. Vous avez parfaitement compris quand utiliser useMemo. Continuez comme ça !
Explanation: useDebug n'est pas un hook valide ni useSyncStore. Par contre useInsertionEffect et useLayoutEffect sont bien des hooks qui existe en React. (ainsi que les autres)
Fin !
Notre système va corriger ton quiz et on reviendra vers toi dans quelques secondes pour t'informer des résultats.
Si tu souhaites t'améliorer considérablement en React, rends-toi sur BeginReact pour suivre un cours gratuit sur useState ainsi que 3 autres ❤️