L'API de contexte de React

Dans cette vidéo je t'explique comment fonctionnent les contextes et le hook useContext de React.
Un context te permet de passer des informations d'un composants parent à des composants enfants sans passer par les props. C'est une notion essentielle à connaître !
Bon visionnage !
🧑‍💻 Dépôt Github:
github.com/Atomic-React/todo-yt
⚛️ Rejoins le serveur Discord d’Atomic React:
/ discord
⚛️ La plateforme de cours Atomic React:
www.atomic-react.com/
#reactjs #reactjsdeveloper #reactjstutorial #javascript #js

[@freddyumba8332]

Super 🎉🎉🎉

[@k4nful]

Je viens d'angular, je suis fan des services en injection de dépendance, je cherchais l'equivalent react, et cette hisoitre de balise "consumer" à rajouter dans le template me parlait PAS MAIS PAS DUTOUT! Avec le hook useContext je revis! Merci

[@worksfatherwemagic3152]

La meilleure vidéo de useContext que j'ai vu à ce jour. L'essentiel bien expliqué

[@Sql37]

Excellent dans tes explications !

[@leocrotet]

Top qualité cette vidéo. Déjà les 1.5K abo, très bientôt les 2000. C'ets largement mérité !

[@dylannoel1996]

Excellent 🙌🏼

[@Oumar_kone]

L'utilisation de React context et du design pattern composant composé es le meilleur 😍

[@guilhemjoly]

Très bonne vidéo, merci à toi !

[@phptempaltedf]

Merci infiniment pour ces informations

[@smithjohn2367]

Tres bonne vidéo comme toujours, j'ajouterai qu'en bonne pratique, il est maintenant recommandé de créer un custom hook dédié à ton contexte, plutot que d'importer useContext(etTonContext) partout. Dans ton cas dans le fichier ou tu créer ton context tu fais un hook useTasksContext function useTasksContext() { const context = useContext(TasksContext) if(!context) { throw new Error("useTasksContext must be used within a TasksContextProvider") } return context } et derriere ta juste à faire dans tes composant la ou tu en as besoin. const { createTask } = useTasksContext()

[@atomicreact]

Justement la vidéo à ce sujet sort aujourd'hui 😉

[@yanntrad2304]

Merci pour cette super vid ! De toute façon le Consumer ne fonctionne plus du tout j'ai testé.

[@renejeanrugaba4234]

Merci mon gars, toi au moins tu ne fais pas un énième tuto sur redux...

[@atomicreact]

Ahah je pourrai ! J'ai bien fais un énième tuto sur useState 😉 Il en faut pour tous les goûts. La différence c'est que je vais apporter de la nuance, des bonnes pratiques et expliciter au maximum pourquoi il faudrait ou pas l'utiliser

[@renejeanrugaba4234]

@@atomicreact vidéo qui pourrait m'intéresser car c'est un beau sujet.

[@elskared3720]

Mon cours : "Partagez vos données avec le Contexte et useContext" Moi : Est-ce qu'Atomic React a fait une vidéo dessus ? Atomic React : "L'API de contexte de React", il y a 6 jours. MAIS QUEL TIMING !!! Merci pour cette vidéo !

[@atomicreact]

Incroyable comme coïncidence 😅 En tous cas ça me fait plaisir que tu penses à moi quand tu as une question sur React 😊

[@marcrichet2626]

Quand est-ce que tu penses sortir la suite de la création de la librairie Atomic-ui de composants React ? THX

[@atomicreact]

Je ne sais pas encore. On m'a demandé de traiter beaucoup de sujets et à un rythme d'une vidéo par semaine c'est difficile de contenter tout le monde 😅

[@marcrichet2626]

Salut, la pratique y que çà de vrai pour progresser alors ce serait cool de pouvoir manipuler le code de tes files en même temps que ton cours, mais pour çà faudrait que tu donnes accès à tes files :))

[@atomicreact]

Je vais voir pour mettre ça sur GitHub 👍

[@atomicreact]

J'ai mis le lien du dépôt en description de la vidéo

[@thibauds1061]

Du coup l'Api context peut être utilisé pour éviter le props drilling mais aussi pour simplement stocker des données globales ?

[@atomicreact]

Tout à fait !

[@thibauds1061]

Une derniere question si je peux me permettre ! Si j'ai bien compris, on peut split différentes logiques avec différents contextes qu'on peut mettre dans le même provider ? Comme pour ta notification c'est bien ça ?

[@atomicreact]

Chaque context doit avoir son provider dédié. Dans la vidéo j'ai mis le provider du thème et celui des notifications dans `main.jsx` pour que dans `app.jsx` on puisse se concentrer sur celui des tâches. C'est pour ça que tu ne le vois pas 😉

[@thibauds1061]

@@atomicreact ah d'accord, merci pour ces informations 😀

[@fallouseye4628]

slt y a moyen d'avoir un lien github pour le code source de ce tuto? l'explication est vraiment super et instructive😊😊

[@atomicreact]

Désolé je n'ai pas publié le code sur GitHub. Je vais réfléchir à mettre ça en place sans que ça devienne le bazar dans mes dépôts 😅

[@fallouseye4628]

@@atomicreact au pire crée un compte github secondaire pour juste y mettre les tutos