Dans ce screencast d'appariement, Sarah Drasner se joint à moi et me guide à travers certains de mes tout premiers apprentissages de React. Nous abordons quelques fonctionnalités de style «réel»: un formulaire de commentaire.
Cela s'est avéré être une interface utilisateur assez utile, car elle nécessitait beaucoup de choses assez fondamentales pour React (ou du moins, il me semble). Par exemple, une «application» principale qui traite du state(notre gros «état» est les commentaires eux-mêmes) et des composants qui traitent du rendu de la vue (par exemple, le formulaire de commentaire est un composant et chaque commentaire est un composant).
Ensuite, nous sommes entrés dans beaucoup de petits trucs de React, mais aussi d'énormes choses à comprendre dans React-land, comme:
props- un moyen de transmettre des données entre les composants. Ils ressemblent à des attributs HTML lorsque vous les envoyez et arrivent en tant qu'objet sous la forme this.props.refs- comment vous récupérez les données de l'élément de formulaire que nous avons créé.keys- un moyen d'identifier de manière unique un composant lorsqu'il est répété. Nous répétons les commentaires ici (il peut y avoir plusieurs commentaires), donc si nous devions avoir des fonctionnalités qui pourraient changer l'un d'entre eux, avoir une clé est ce qui rend React efficace (il peut simplement remplacer ce seul commentaire au lieu de tous) .
Et une tonne de plus!
Voici la démo sur laquelle nous avons travaillé:
Voir le Pen Démarrer un formulaire de commentaire alimenté par React par Chris Coyier (@chriscoyier) sur CodePen.
Comment améliorez-vous votre apprentissage React au-delà de cela? Commencer ici.