Тёмный

Tutoriel React : Présentation de React hook form 

Grafikart.fr
Подписаться 298 тыс.
Просмотров 22 тыс.
50% 1

Article ► grafikart.fr/tutoriels/react-...
Abonnez-vous ► bit.ly/GrafikartSubscribe
Dans ce tutoriel nous allons découvrir comment gérer les formulaire avec React et la librairie [React Hook Form](react-hook-form.com/).
Soutenez Grafikart:
Devenez premium ► grafikart.fr/premium
Donnez via Utip ► utip.io/grafikart
Retrouvez Grafikart sur:
Le site ► grafikart.fr
Twitter ► / grafikart_fr
Discord ► grafikart.fr/tchat

Наука

Опубликовано:

 

2 дек 2020

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 39   
@reubyz
@reubyz 4 месяца назад
ça fait des années que je suis tes tutos, et je crois que c'est la première fois que je commente mais t'es un tueur, tout est ultra clair, tu précises pourquoi et comment, c'est très satisfaisant pour moi qui est absolument incapable de me servir de quelque chose tant que je ne sais pas pourquoi je le fais ni comment ça marche derrière... alors en général je vais à la pêche aux infos quand je n'ai pas ce que je cherche... mais tes vidéos creusent en profondeur et me permettent un gain de temps considérable, un énorme merci à toi !
@poischiche2933
@poischiche2933 3 года назад
Pour ceux qui découvriraient cette vidéo plus tard, la lib a été mise à jour et son fonctionnement diffère un peu de ce qui est présenté ici: il ne faut plus affecter le register à "ref" mais le décomposer en lui donnant le nom de l'input. Avant on faisait: Maintenant:
@MrGigip17
@MrGigip17 3 года назад
bonjour ,j'ai pas compris , on écrit quoi maitenant ? {..register ?????? c'est quoi ces 3 petit points
@poischiche2933
@poischiche2933 3 года назад
@@MrGigip17 on écrit tel quel. Les "..." c'est un opérateur qui, si je dis pas de connerie, est l'opérateur de déconstruction ou de décomposition (j'ai du mal avec les noms mais il me semble que c'est le premier). Il permet de "copier" les valeurs d'un objet. Pour comprendre comment ça marche, prenons ce cas: On a un objet `const preums = {a: 23, b: 42}` et un objet `const deuz = {c: "blabla", d: true}`. On peut utiliser l'opérateur pour faire: `const grosObjet = {...preums, ...deuz}`. L'objet vaudra alors: `{a: 23, b: 42, c: "blabla", d: true}` En utilisant l'opérateur on a copié le contenu de l'objet là où on a appelé l'opérateur. On a donc pas eu besoin de faire `grosObjet.a = preums.a`, il s'est fait tout seul grâce à l'opérateur, comme toutes les autres propriétés des deux objets. Concrètement pour l'exemple de la vidéo, la fonction register("INPUTID") renvoie un objet contenant un tas de propriétés, et faire va permettre de copier directement ces données dans notre élément input, sans devoir le faire manuellement comme c'était fait avant: J'espère que tu as compris, c'est compliqué sans mettre le texte correctement en forme. Cet opérateur rend les choses plus faciles et plus agréables à lire, selon moi. =)
@annako5240
@annako5240 3 года назад
@@poischiche2933 Il me semble que le mot que tu cherches est "destructuration" :)
@poischiche2933
@poischiche2933 3 года назад
@@annako5240 Voilààààààà merci !
@guillaumedumez5033
@guillaumedumez5033 3 года назад
Au top vraiment, tu es vraiment fait pour enseigner, tu expliques l'essentiel et tu justifies toujours tes choix de la meilleure des manières comme d'habitude.
@Max-xp3tf
@Max-xp3tf 3 года назад
Cela est très intéressant. Je n'ai jamais vu une manière de gérer des formulaires avec React aussi facilement. Je dois dire que je suis très heureux d'avoir tombé sur ta vidéo. Merci infiniment..
@oebelus
@oebelus Год назад
Vidéo très informative, merci pour votre effort!
@salamsahane1399
@salamsahane1399 3 года назад
Salut, Merci pour le tutoriel c'est vraiment superbe. J'espère qu'on aura droit à une vidéo sur les nouveautés de PHP 8 🙂
@pingolitipus
@pingolitipus 3 года назад
Magnifique j allais justement mis mettre... Ça tombe telleeeeemmmenntt bien 😘🤪
@mahamadoutoure7461
@mahamadoutoure7461 3 года назад
Merci du partage
@juliencisco8007
@juliencisco8007 2 года назад
merci bcp ! top la video !
@mathiasappelmans9214
@mathiasappelmans9214 Месяц назад
Pour info, la syntaxe du Controller a été mise à jour pour react-hook-form version 7 {field} remplace {value, onchange} ( field.onChange(date)} /> )} />
@pt4ve8cw3l
@pt4ve8cw3l 3 года назад
Je l’ai découverte en septembre et j’ai tout changé pour elle. C’est TELLEMENT plus simple avec React Hook Form comparé à Formik par exemple.
@camillekongolo1408
@camillekongolo1408 3 года назад
Merci Graphi, Il y avais pas de tuto de react form hook en français, du coup je galéré un peu avec celle d'anglais.
@daveglad3554
@daveglad3554 3 года назад
🤣
@mustafamuse2904
@mustafamuse2904 3 года назад
Si il y a un cour en francais.donnes moi ton email .je t envoie
@qamarh1962
@qamarh1962 3 года назад
Bonjour, merci encore pour tout ce que tu fais sincèrement. J'ai beaucoup appris grâce à toi. Je voulais savoir sur tu pouvais faire un tuto sur les composants d'ordre supérieure.
@renaud689
@renaud689 2 года назад
Les HOC sont obsoletes desormais
@xxFyl
@xxFyl 2 года назад
@@renaud689 Non.
@tropikalGG
@tropikalGG 3 года назад
Beau tuto comme toujours, j'ai quand même une préférence pour formik
@grafikart
@grafikart 3 года назад
Ah moi j'ai vraiment pas réussi à accrocher à Formik :( Tu as des exemples en tête de choses que tu préfère ?
@tropikalGG
@tropikalGG 3 года назад
@@grafikart je fais plus de react native que de react, ca doit être parce que react hook form n'est pas très fluent avec react native mais c'est kiff kiff, retours des erreurs, utilisation de Yup... Pour mon prochain projet react, je donnerai une seconde chance a react hook form 😉
@mamadoubobodiallo1197
@mamadoubobodiallo1197 3 года назад
super
@omaracelys3217
@omaracelys3217 11 месяцев назад
comme d'habitude, expliquer le pourquoi puis le comment, toujours aide à mieux comprendre, plus voix apaisante (moins robotique de bcp de video RU-vid 😉)
@bouhouchkhalid1563
@bouhouchkhalid1563 Год назад
tanmirt
@gippel1
@gippel1 3 года назад
Hello, super tuto merci, est-ce qu'il y a une technique pour pour récupérer la valeur d'un select et le 'pre-render' d'un un formulaire d'update par exemple ?
@EminoMeneko
@EminoMeneko 2 года назад
Pour celles et ceux qui font ça maintenant il y a eu des mises à jours dans la librairie et la syntaxe de ref ne marche plus. (YT n'aime pas les liens mais y'a un truc sur stack overflow). l'objet errors est dans le formState. Je n'ai pas pratiqué la seconde moitié du tuto donc il se peut qu'il y ait d'autres différences → RTFM.
@MFRDeLaVega91
@MFRDeLaVega91 2 года назад
Si ce tuto ne fonctionne pas pour vous c'est normal : il y a eu des MAJ au niveau de hook form et la synthaxe de Grafikart n'est plus bonne. Le principe reste le même mais faut changer la synthaxe. Il faut utiliser la V7.
@mahamadoutoure7461
@mahamadoutoure7461 3 года назад
Bonjour Boss
@daveglad3554
@daveglad3554 3 года назад
Un tutoriel sur comment faire une Navbar responsive sur React s’il vous plaît 🙏
@camillekongolo1408
@camillekongolo1408 3 года назад
Tu peux le faire avec styled components, puis tu gère juste le média query,
@daveglad3554
@daveglad3554 3 года назад
@@camillekongolo1408 très bonne idée... merci beaucoup frère !
@guillaumedumez5033
@guillaumedumez5033 3 года назад
Tu le fais en tant que composant et tu gere sson css non ?
@camillekongolo1408
@camillekongolo1408 3 года назад
@@guillaumedumez5033 Oui!
@ncesar
@ncesar 3 года назад
ooh, too bad it isnt in english :/
@ziat1988
@ziat1988 3 года назад
React form avec symfony please...
@grafikart
@grafikart 3 года назад
Les 2 n'ont pas d'incidence l'un sur l'autre. Côté symfony il faut créer une API donc ce n'est pas dépendant du framework frontend.
Далее
Tutoriel JavaScript : Storybook
32:39
Просмотров 29 тыс.
LISA - ROCKSTAR (MV Teaser)
00:10
Просмотров 7 млн
React Hook Form - Complete Tutorial (with Zod)
28:22
Просмотров 86 тыс.
React : Chapitre 23, Les contextes
39:31
Просмотров 25 тыс.
Formulaire de contact avec React-hook-form et Yup
24:02
Comprendre le hook useReducer de React
35:51
Просмотров 4,7 тыс.
Particules 3D connectées avec Three.js
47:43
Просмотров 27 тыс.
Découverte de react-query
45:55
Просмотров 26 тыс.
React Query Makes Writing React Code 200% Better
13:54
Просмотров 178 тыс.
APPLE совершила РЕВОЛЮЦИЮ!
0:39
РЭДФЛАГИ СБОРЩИКОВ ПК часть 1
1:00
Lid hologram 3d
0:32
Просмотров 7 млн