[Jouer de la musique] 

NEEL MEHTA: Ici, il va. 

Eh bien, tout le monde, Bienvenue dans le Web applications de l'avenir avec réagir. Ceci est CS50. Mon nom est Neel. Je suis un TA pour CS50 et un étudiant en deuxième année à Harvard College et un très, très développeur web passionné. Je suis donc très excitant de être de vous parler aujourd'hui, si vous êtes ici ou à la maison regarder, à propos Réagir, qui est, encore une fois comme je le disais, l'avenir des applications web. 

Donc Réagir est un framework web. Et comme je l'ai été dit pour certaines personnes ici, un cadre est juste un un ensemble d'outils que vous pouvez utiliser de structurer et de construire votre application web. Et les applications web sont, à nouveau, les sites Web qui sont interactifs comme Facebook, Twitter.com, Instagram.com, peu importe. 

Donc, Facebook est un framework web qui a été développé par Facebook quelques années back-- REACT passe. Il a depuis été utilisé dans Facebook sur leurs applications mobiles et l'application web, Instagram. Khan Academy est un autre adopteur précoce éminent de réagir. 

Il a vraiment été d'obtenir extrêmement populaire. Si jamais vous utilisez des choses comme angulaires ou Backbone, ceci est de la même famille, mais il n'a jusqu'à présent puisque dépasser leur popularité. Il est la nouvelle chose chaude. Il est vraiment, vraiment énorme. 

Et donc Réagir est bon non seulement comme un framework web pour les interfaces de construction. Il est bon pour la création d'interfaces web. Il ya aussi une chose Réagir appelé maternelle qui vous permet de construire des interfaces pour Android et iOS et peut-être d'autres plates-formes dans le futur en utilisant simplement le même code JavaScript. Vous pouvez utiliser exactement la même Code JavaScript pour rendre les sites Web, pour rendre les applications Android et les applications iOS. 

Il est un moment très, très excitant. Il est une occasion vraiment, vraiment cool. Il est vraiment un Web universel outil de développement d'interface, il est donc très, très chose importante à savoir. Et, comme je disais aux gens avant, cela, je pense, qui va changer la façon dont nous construire des applications web toujours. Donc, il est peut-être une hyperbole de peu, mais je pense qu'il est une assez bonne chose à savoir. 

OK, donc ce qui est Réagir? Réagir est un cadre vous pouvez utiliser pour construire des interfaces. Une interface est, à nouveau, une page web, non? Alors, voici Instagram.com, utilisations réagir. 

Réagir est construit sur le idée de composants. Un composant est un HTML élément sur les stéroïdes, si un élément HTML est comme un bouton. Il est un paragraphe. Il est un en-tête, non? Et Instagram utiliser ceux-ci, mais il sera également utiliser des composants de réagir. 

React composants sont éléments HTML trafiquées qui ont leur propre comportement contenue en leur sein. Ainsi, à titre d'exemple, nous pourrions avoir un élément de temps, une composante de temps, qui contiendra comme l'horodatage, vous le savez, un composant de profil qui contiendra l'image de profil et le nom de la personne. Il peut avoir un compteur analogue, qui peut compter comme le nombre de goûts, et si vous cliquez dessus, il va augmenter le nombre de goûts. Un composant est juste un tas de code HTML qui a certaines fonctionnalités enveloppé à l'intérieur. Donc, il est comme un élément HTML sur les stéroïdes, comme je l'ai dit avant. Vous pouvez prendre ces composants, et vous pouvez les mettre ensemble de faire de nouveaux composants, en ce cas, une composante de poste, qui contient tous ces trucs. Il contiendrait horaire, Profil, LikeCounter, peut-être le commentaire et peut-être l'image elle-même. Et donc les applications web sont construits juste en prenant composants et de les mettre ensemble. Un flux Instagram est rien de plus que un tas de messages un après l'autre, chaque poste contient comme le temps, Profil, LikeCounter, et ainsi de suite. Il est un peu comme construire une maison. On ne construit pas la maison de haut en bas. Vous prenez-vous components-- prendre comme la salle de bains. Vous prenez le bedroom-- vous les tenez ensemble, et vous avez un nouveau composant. Vous avez une nouvelle partie de la maison. 

Donc Réagissez est tout construit autour cette idée de composants sont interactifs, qui sont déclarative. Comme vous venez de dire ce qu'est un profil est, et il rend. Ils sont composables. Vous pouvez prendre un temps et un profil, mettez ensemble, font quelque chose de mieux. Et ils sont réutilisables, donc si vous avoir le code source pour un poste, vous pourriez intégrer cela nulle part. 

Vous pouvez incorporer un Instagram chose sur votre propre site. Vous pouvez intégrer dans Facebook, par exemple, dans la mesure où il utilise ainsi React. Donc, les composants sont vraiment, vraiment, vraiment puissants éléments constitutifs de la nappe qui peut être utilisé n'importe où et mis ensemble pour faire de nouveaux blocs de construction. Voilà le très, très aperçu de haut niveau. Donc, encore une fois, si vous avez des questions à tout moment sur la philosophie du réacteur, le codage, pour moi arrêter, et laissez-moi savoir. 

OK, donc réagir parce qu'il est cool a une façon différente de voir comment vous construisez des applications web. Vous avez probablement entendu parler de MVC, un le modèle que vous contrôlez dans CS50 ou quoi d'autres catégories de sondage que vous utilisez. Et la plupart des cadres sont construit autour de l'idée de MVC. Réagir est pas. Réagissez est construit autour de l'idée du flux de données unidirectionnel comme on le voit par ce tableau ou le graphique ici. 

Fondamentalement, vous avez une source de données. Et la source de données va décider comment définir certains composants. Et les composants seront puis, quand ils changent, ils diront au la source de données à modifier. 

Pour utiliser le Instagram par exemple, vous pourriez avoir une liste d'objets de poste comme dans une base de données ou quelque chose. Que les données. Et puis nos composants de poste aura que les données, et utiliser ces données pour rendre une chose sur l'écran. Voilà ce que la flèche à partir de données de composant est, et alors que les mêmes données est utilisé de rendre un tas de composants. 

En Facebook Messenger, pour par exemple, ce qui est React, vous pourriez avoir une liste des les messages que votre source de données. Et cela rendrait pas que la liste des messages mais aussi la liste d'amis que vous avez. Vous avez le comptage non lu. Peut-être aussi de rendre la chose Facebook qui est au bas de Facebook.com. Les mêmes données est un source unique de vérité et qui provoque beaucoup de composants devant être rendus. Et chaque fois que l'un de ceux des composants est modifié, il remonte et change la source de données. 

Vous envoyez un message, non? Cela change la source de données. Vous avez lu vos messages, si vous définissez non lu à 0. Cela change la source de données. Et remarquez que tous ces derniers d'une flèche revenir aux mêmes données la source, de sorte que vous savez, étant donné un certain ensemble de données, vous savez exactement ce que le page est va ressembler. Il est déterministe. Vous savez, certaines données fournies, ce qui la page va ressembler. Vous pouvez prédire comment il va se comportent et comment les choses vont de travailler quand ils sont mis ensemble. 

Et si je devais un million de composants ici, il se comporterait de la même, non? Vous auriez pas interconnexions bizarre. Un rendu des données d'un million de composants. Un million de composants pourraient revenir en arrière et modifier les données. Et donc cela est très agréable. Nous construisons composables, facilement des applications Web évolutives. 

Vous disposez d'une source de données, la source de la vérité. Qui indique à vos composants la façon de poser la page, et les composants seront gérer l'interaction. Et si ils veulent changer les choses, juste remontent et dire à la source de données pour changer. Donner un sens? Donc Réagir est tout au sujet compréhension comment construire un composant et comment faire votre composant interagir avec le monde extérieur. 

Faire interagissent de composante avec le monde extérieur utilise une autre technologie Flux appelé, qui est un cadre qui est ajoutée sur le dessus de réagir. On ne va pas parler de ça. Nous allons parler plus sur, étant donné données, comment pouvez-vous rendre un composant? 

Et donc Réagir est vraiment cool parce que vous peut l'utiliser à tout bout de retour que vous voulez. Si vous avez comme une extrémité arrière Python, si votre Python peut cracher des données, Réagir peut rendre. Si vous êtes pas sorties JS des données, Réagir la rend. Ruby rails avec données, Réagir rend. 

Donc Réagir est fondamentalement une web view-- une extrémité avant avec des composants pour toute source de données. Et ainsi va de la source de données pour réagir composants est assez facile. Dans l'autre sens est un peu plus difficile. Qui utilise Flux comme je l'ai mentionné auparavant. Nous allons pas entrer dans cela. Nous allons nous concentrer plus sur le données à côté composants. De cette façon, vous pouvez faire cool, applications web fun. Il ne sera pas affecter le monde extérieur pour l'instant, mais cela est une autre histoire. 

OK, donc si vous étiez ici pour mon dernier séminaire vous saurez que tout le code pour La discussion d'aujourd'hui va être à cette adresse URL ici, désolé, cette URL ici. Et fondamentalement, nous allons aller à travers quatre étapes, peut-être cinq, probablement pas cinq. Nous allons passer à travers quatre étapes de la construction d'un échantillon Réagir app. Et ainsi tout le code source pour chaque étape de la manière va être ici, donc si vous suivez à la maison, hésitez pas à prendre connaissance de ce code. Si vous suivez ici, nous allons le montrer sur l'écran, donc ne vous inquiétez pas à ce sujet. Mais si vous êtes à la maison, sentez libre pour visiter ce site. Et, oui, vous devriez être en mesure d'obtenir tout le code que vous avez besoin ici. Donc, il est une bonne feuille de triche ainsi pour vos futures aventures avec réagir. Cool, si tout le monde qui est ici, et même si vous êtes à la maison, tirer vers le haut ce site, is.gd/cs50react, pas de capital, pas de soulignement, rien. 

Vous verrez une page qui ressemble un peu comme ça. Ceci est une chose appelée CodePen. CodePen est une collaboration environnement de codage avec laquelle je peux écrire le code ici, et il sera automatiquement envoyé. Et de cette façon, je peux écrire du code. Je peux exécuter du code ici. 

Pour example-- et si elle reloads-- voir, Je fais tourner du code JavaScript sur la page ici, et il va rendre automatiquement une page web avec ce code JavaScript. Et donc cela est une façon pour nous d'essayer de code vraiment rapide sans avoir à utiliser notre identité ou utiliser notre machine locale ou peu importe. Il est un moyen très rapide pour vous de maquette et de tester différents types de code. 

Donc, je vais être en prenant exemple de code, de le mettre ici. Nous allons travailler à travers elle. Et si vous êtes à la maison, vous peut tirer cette ainsi. Et je l'ai déjà installé Réagir ici, donc vous pouvez juste écrire votre propre code ici, et essayer que votre propre terrain de jeux. 

Ouais, si tout le monde ouvrir ce lien ici. S'il vous plaît me donner un coup de pouce une fois que vous l'avez ouvert. Cool, cool cool. Il n'y a rien ici pour le moment, mais nous allons changer très bientôt. 

OK, donc Réagir est un JavaScript bibliothèque, et en tant que tel, nécessite la connaissance de JavaScript, qui est le langage de programmation Web. Et il est utilisé pour d'autres choses maintenant trop, mais surtout développer le web la langue, donc si vous n'êtes pas familier avec que, lisent un site appelé JSforCats.com. C'est merveilleux. Vous pouvez en apprendre JavaScript dans une demi-heure. C'est incroyable. 

Afin de lui donner une lecture. On est aussi beaucoup de HTML ici parce que nous concevons des pages Web bien sûr. Donc, si vous n'êtes pas familier avec HTML, consultez HTMLdog.com. Je pense qu'apprendre est un Réagir million de fois plus facile si vous avez déjà connaître les blocs de construction. Si vous avez les composants, il est facile de faire une plus grande composante. Voilà Réagir langue pour vous. 

Donc, aller de l'avant et de donner ces choses une lecture. Mettre en pause cette vidéo. Donnez-lui une lecture si vous êtes à la maison si vous n'êtes pas familier avec le HTML ou JavaScript OK, donc ce que nous allons faire est que nous allons faire une application flashcard très basique utilisant réagir. Nous allons avoir un linker. Vous pouvez retourner la carte d'avant en arrière. Et nous aurons aussi une liste de toutes les cartes que nous avons, et si nous nous sentons ambitieux, nous pourrions être capable de basculer entre voitures en cliquant sur eux. 

Mais cela est, de votre nu os, très simple Réagir app. Et si cela est réellement pas trivial à mettre en œuvre, mais nous allons montrer que, si vous faites cela, il est très, très facile de l'étendre si d'autres personnes de vous aider avec elle. Nous allons donc passer par quatre étapes à partir de zéro pour construire ce. 

Ok, donc les quatre étapes, nous allons commencer avec la première étape. La première étape va être la construction de votre premier composant. Comme je l'ai déjà dit, un composant dans Réagir est juste un élément HTML sur les stéroïdes. Il spécifie le HTML et certains comportements, et il précisera comment les gens il peut interagir avec comment il aurait état interne. Comme un bouton saura comme le nombre de Parfois, il a été cliqué par exemple, et il saura se trouvait dehors. 

Donc, nous allons aller de l'avant et de construire notre premier composant en utilisant JavaScript. Donc, si la syntaxe un peu bizarre, qui est parce que ce genre d'est. Donc, encore une fois, nous allons de faire une variable appelée application en utilisant le mot-clé laisser, ce qui rend une variable, laissez App égale React.createClass. 

Réagir est une bibliothèque et a créer la fonction de classe. Et cette fonction est un peu de code que vous peut utiliser pour créer une nouvelle Réagir type de composant. Et donc React.createClass fait un composant, et cette composante être capable de faire des choses. La principale chose qu'il peut faire est de rendre quelque chose, comme une fonction de rendu. 

Encore une fois, si cet indice est pas évidente pour vous, je vous recommande d'aller sur JS pour les chats et check it out. Est-ce que zoomé assez bien? Cool. 

Ainsi, chaque composant besoins d'avoir une fonction de rendu. La fonction render dit, que dois-je imprimer sur l'écran? Mais le composant est inutile si elle ne le fait pas savoir quoi imprimer sur l'écran, de sorte vous devez avoir une fonction de rendu. 

Donc, dans la chose rendre, vous juste besoin de retourner une partie HTML. Et ce qui est cool est que il ya une chose appelée JSX, qui est une extension de JavaScript qui est utilisé par réagir. Ce qui vous permet d'écrire HTML à l'intérieur JavaScript de votre, qui sons un peu bizarre quand vous pensez d'abord à ce sujet, mais il fait beaucoup de sens après. Donc, nous pouvons le faire. Si vous êtes familier avec le langage HTML, je sais nous avons une div avec un objectif général récipient pour des trucs. Nous pouvons retourner une div, et à l'intérieur cette div, nous pouvons mettre des choses. 

Donc, disons que nous voulons rendre juste un linker straight-up pour le moment. Le linker, je dirais, aura une question et la réponse. Donc, l'intérieur de cette div, nous allons imprimer un paragraphe qui dit question-- Quelle est la réponse ultime à la vie, l'univers? Et alors la réponse est va être, bien sûr, 42. 

Ce ne sont pas venus du tout. Ouais, donc, fondamentalement, vous pouvez vraiment écrire HTML dans votre navigateur. Et cela va être imprimé à l'écran. Donc, nous allons essayer. 

Donc, nous avons notre composant. Nous devons dire Réagir à mettre le composant sur l'écran afin React.render, donc remarquer que nous traiter soft comme tout autre élément. Nous écrivons comme il était un élément HTML. Comme lieu de dire comme img pour l'image ou p pour paragraphe, vous écrivez App, afin App est traité comme un élément HTML. Comme je l'ai dit avant, il est un élément sur les stéroïdes. 

Donc vous rendez App, et vous lui donner un endroit pour le mettre. Et c'est comment vous pouvez dire où le mettre. Je l'ai créé d'un simple div sur la page appelée avec un ID de page, et voilà où le élément va aller. 

Et on ne va pas à courir avec HTML. Fondamentalement, cela va se faire mettre à l'intérieur de cet élément de la page que nous avons sur l'écran. Donc, il exécute ce code, et il tire cette chose sur l'écran, de sorte que nous sommes ici. Nous avons fait notre première composante réagir. 

Ainsi, tout comme une récapitulation, nous fait en douceur un nouveau type de composant, non? Voilà ce que l'React.createClass. Et en ce que le composant, nous il dit ce qu'il doit faire. Chaque fois que cette composante est de être imprimé sur l'écran, il va imprimer le div avec les deux paragraphes à l'intérieur. 

Et ce que nous avons fait, nous avons fait une nouvelle application en utilisant la notation équerre app. Nous avons dit à mettre à l'intérieur de l'élément de page. Et si ce que je faisais, il a créé une nouvelle application à partir de ce modèle. Et puis je l'ai dit à la rendre. Donc, il a dit, OK, l'application, que dois-je imprimer? App dit, allez imprimer une div avec deux points à l'intérieur de celui-ci. Et voila, il ya notre div avec deux paragraphes à l'intérieur. Donner un sens à ce jour? 

Donc, encore une fois, tout le défi de la Réagir est juste savoir comment faire composants. Comment faire de la composants fonctionnent ensemble. Maintenant que nous avons fait notre premier composant, revenons et fabriquer des composants personnalisable. Donc vous savez comment vous en HTML peut donner à vos classes de boutons? Vous pouvez donner vos points d'ancrage le href. Vous pouvez donner vos entrées un type, non? Vous pouvez donner plus personnalisé propriétés à l'ensemble de vos éléments pour le rendre plus intéressant. Et nous pouvons le faire effectivement exactement la même chose. 

Donc, disons que nous voulons que notre app pour aller rendre une carte. En ce moment, nous avons juste rendu une carte codée en dur. Nous savons qu'il ya un seul carte, il peut le faire, donc nous sommes va essayer de changer cela maintenant si que nous ne pouvons lui donner une carte. Il va imprimer la carte. 

Vous devriez essayer de faire de votre composants d'un usage très général. Ainsi de cette façon je pouvais envoyer un courriel ce mon ami et être comme, quel que soit flashcard vous avez, juste nourrir dans ici, et il va le faire par lui-même. Vous pouvez mettre l'autre choses dans votre propre application. 

Mais d'abord, nous allons briser ce en deux composants, mais nous voulons séparer la carte impression d'une partie de la partie réelle de l'application. Donc, ce que nous pouvons faire est de nous peut changer cette App à CardView, juste un nouveau nom pour l'application, et nous pouvons faire une nouvelle composant appelé App, à ne pas confondre avec l'ancien App. Nous avons les createClass, et comme en HTML, vous pouvez nid Réagir composants à l'intérieur de l'autre. 

Donc, dans cette fonction render, retour de la fonction CardView, et cela est exactement la même chose. Voir pourquoi il est la même chose? Au lieu de rendre simplement l'application qui a la div et le jumelage à l'intérieur, l'application rend le CardView, et la CardView rend la div et le paragraphe. Voici donc notre premier exemple de les éléments d'emboîtement à l'intérieur de l'autre. Cela a-t-il du sens? Donc, encore une fois, nous avons un élément CardView. Nous avons des éléments d'applications qu'il est plus grand que. 

OK, si nous voulons que notre CardView-- si vous donner une bonne CardView une certaine carte, il va imprimer pour vous, non? Alors d'abord, nous avons besoin de faire une carte, Faisons donc un objet de la carte. Alors laissez ma carte equal-- si vous connaissez tous, ceci est juste la notation de décision objet en JavaScript. Il est un peu comme une struct en C, donc nous avons fait une carte, et maintenant nous pouvons passer cette carte comme une propriété ou un attribut HTML terminologie pour notre application. Donc, nous pouvons faire cela, App carte égale MaCARTE. 

Vous savez comment en entrée, vous faites Type d'entrée est égale à texte ou bouton classe est égal btn pour bootstrap ,? Même idée, carte App equals-- vous avez à mettre des accolades ici-- Carte App égale MaCARTE, cette dit que nous devons cet objet de la carte. Je vais passer comme biens à la composante de l'application. Et cette composante de l'application sera être en mesure d'y accéder et de le faire choses intéressantes avec elle. 

Donc notre application va être donné une carte, donc pour l'instant, nous allons avoir l'application juste donner la carte à la CardView lui-même parce que, comme le soft est pas va savoir quoi faire avec elle, donc nous allons simplement le donner à l'CardView. Donc, nous allons l'adopter le De même, la carte est égal, et ainsi de chaque composant peut accéder à la des choses qui a été donné. Ils peuvent accéder aux propriétés qui ont été donnés à elle en utilisant cette syntaxe, this.props.card. 

Donc ce qui se passe ici est vous avez l'objet de MaCARTE. Vous passez dans l'application en utilisant une carte App égale MaCARTE. Cet objet de carte est donnée à votre application. L'application peut accéder comme this.props.card. Il est un peu comme une image sait ce qu'il est la source. 

Cette application sait ce qu'il est la carte est, et il peut faire des choses avec elle. Il peut faire des calculs. Il peut prendre des décisions basées hors de lui. 

Pour l'instant, je vais passer this.props.card sur la CardView. Donner un sens à ce jour? Il va faire plus de sens aujourd'hui. 

OK, maintenant que nous sommes à CardView. Notre CardView, compte tenu de la carte, devrait imprimer sa question et la réponse. En ce moment, nous avons juste imprimé certains questions et réponses codées en dur. Nous devons comprendre que nous devons out-- de demander à la carte qui ils nous ont donné Quelle est la question et la réponse, et puis imprimer ceci dans l'écran. 

Donc, nous pouvons le faire ici. En rendre begin-- abord faire égale. Donc, ce que nous faisons ici est que nous savons que les cartes nous sont donnés à une propriété, droit? Il est donné à nous comme une entrée. Comme il est presque comme arguments à une fonction. La carte est un argument presque à cette CardView. 

Nous extrayons cela, et mis dans la question variable. Assurez-vous que la réponse est allé à la réponse variable. Invite cette carte pour répondre. Et maintenant que nous avons ces derniers, au lieu d'imprimer sur ce texte, nous allons imprimer tout ce qu'ils nous ont donné. 

Donc, ce stuff-- nous allons donc pour éteindre Question Réponse. Voyons voir si cela fonctionne. Cool, nous allons donc étape à travers elle une fois de plus juste pour être sûr. 

Donc, ma carte est un objet de la carte, et nous sont donnant cette carte à l'application. Et l'application va prendre la carte et donnez-la à CardView. Et ce CardView dit, si vous me donner tout objet flashcard, Je vais imprime sa question et sa réponse, non? 

Donc ce que je pourrais faire est que je peux envoyer ce code, la première comme 10 lignes de mon code, à mon ami. Il pourrait l'intégrer dans sa propre demande. Et tant qu'il fait la même chose, comme la carte de cette CardView égale, aussi longtemps que il a créé le CardView et il a donné la bonne information, il pourrait rendre sa propre carte. Et de cette façon, il est vraiment un façon cool pour vous de construire composants qui utilisent l'autre, non? Cette carte, je pourrais publier ce CardView sur l'Internet, et les gens seraient en mesure de l'utiliser. Donc, fondamentalement, il est comme l'un des fonctions standard dans la bibliothèque C. 

Il est une fonction où quelqu'un l'a écrit. Vous donnez une certaine entrée. Il va produire une certaine sortie. Vous ne vous souciez pas comment cela fonctionne en interne. Tant que vous lui donnez le droit entrée, il va prendre la bonne sortie. 

Et un composant peut être pensé de la même façon. Cette CardView est comme une fonction de bibliothèque. Si vous lui donnez une certaine carte comme une propriété, il va imprimer le contenu de cette carte. Comme si je change ma carte à à la place être comme ce qui est 5 plus 37, il mettra à jour en conséquence. Donc, en changeant simplement l'entrée, il obtient une certaine sortie. Alors vous pouvez penser de composants presque que les fonctions de cette manière, ce qui vous pouvez mettre ensemble. Vous obtenez entrée, comme cela CardView comme entrée, vous obtenez une sortie. Dans ce cas, la sortie est le code HTML. Donner un sens à ce jour? Cool, là encore, les propriétés sont comment vous pouvez transmettre des informations dans et hors des composants. 

OK, donc nous allons faire ce chose interactive. Actuellement, il est un peu ennuyeux. Qu'est-ce que [inaudible]? Vous pouvez imprimer quelques-uns, mais qui est tout ce qu'il peut faire. 

Donc revenons à la vieille question juste pour aujourd'hui. Ok, donc en ce moment ces composants sont ennuyeux parce que tout ce qu'ils font, ils obtiennent entrée. Ils font la sortie, à droite? Voilà un peu ennuyeux. Nous voulons avoir notre composants pour pouvoir avoir une sorte de l'état interne, comme souvenir de quelque chose. 

Pour un linker, par par exemple, ce genre d'état pourriez vous voulez souviendront linker? Quel statut temporaire pourriez vous voulez vous rappeler pour une carte flash dans une application flashcard? Public: Que ce soit en été renversé? NEEL MEHTA: Ouais, à droite. Donc, vous pourriez vouloir garder sont une trace de vous rencontrez ou êtes vous faites face vers le bas sur la carte. Sur Facebook, par exemple, vous le feriez voulez vous rappeler où dans le fil de nouvelles êtes-vous ou comme l'OMS est le profil faites-vous en ce moment. 

Sur Messenger, comme ce texte tapez dans la boîte d'entrée, à droite? Si vous actualisez la page, il disparaît. Mais vous ne vous souciez pas vraiment. Il est juste temporaire. Oui? 

AUDIENCE: [inaudible] NEEL MEHTA: Comme un éclair carte, comme vous pouvez être voir du côté de la question ou du côté de la réponse? 

AUDIENCE: OK. 

NEEL MEHTA: Comme un flashcard recto-verso, non? Ouais, si vous voulez avoir cette idée de l'entreprise Je dois propriétés, qui est comme entrées, mais l'Etat, qui est temporaire, euh, où vous êtes sur la page, à droite? Encore une fois, je l'ai dit dans Facebook Messenger, je dois, comme personne qui vous consultez Facebook ou qui est le profil, à droite? 

Ceci est seulement temporaire. Il est important de montrer à l'utilisateur ce qui se passe, mais rafraîchir la page. Il n'a pas vraiment d'importance. Il est donc état temporaire, donc nous avons tout ce qu'il Etat. 

Donc, encore une fois, il ya l'état et les accessoires. Props est entrée donnés à partir de votre source de données. État est juste comme valeurs par défaut. Il est juste comme des choses qui rend la chose interactive. 

Donc, dans notre CardView-- ayons notre CardView-- il était bien agréable. Ce que nous allons faire ici, nous allons toucher CardView et seulement CardView. Et alors mon ami qui a obtenu cela, ils ne serait pas remarqué de différence. Ils ne voulaient pas avoir à changer tout de leur propre code, mais ils verraient leur CardView obtenu gonflée. Voilà une belle partie sur les composants. 

OK, donc dans notre CardView, nous allons essayer de garder une trace de savoir si nous phase jusqu'en ou vers le bas. Dans Réagir nous faisons cela en premier spécifiant l'état initial. Où commence la carte? 

Donc, être une fonction appelée getInitialState fonction, et nous retournons un objet. Cet objet contient un certain état, et un état est juste une paire clé-valeur. Comme dans instruire, vous avez une clé et un valeur, vous avez comme le nom est une chaîne. 

Dans ce cas, disons avant est vrai. Ce dit que nous avons un état. Une composante de l'état est un attribut appelé avant. [Inaudible], donc, par défaut, nous sommes à l'avant de la carte, et nous pouvons changer cela comme nous renversons la carte. Donner un sens? 

OK, donc en rendons, en ce moment, nous sommes montrant la question et la réponse. Maintenant, ce que nous devrions faire montrer est la question si nous sommes à l'avant de la carte de sorte la réponse est pour le dos de la carte. Voilà pourquoi vous faites tous la carte interactive. Essayons donc et cela ici. Eh bien, tout simplement faire une variable. Nous pouvons demander maintenant this.state.front. Nous accédons indiquer le même nous accès des accessoires, de sorte this.state.front. 

Si nous sommes avant, puis le texte est this.props.card.question. Si nous sommes sur le devant de la carte, nous allons essayer et grab la question de la carte. Sinon, si nous sommes sur le dos de la carte, que faisons-nous? 

PUBLIC: La réponse? 

NEEL MEHTA: Yep, pour que le texte this.props.card.answer égaux. Mais si vous remarquez, nous utilisons l'état de prendre une décision parce que maintenant le composant sera différent basée hors comment ceux-ci interagissent avec elle. Donc, au lieu d'imprimer ce, nous suffit d'imprimer le texte. Cool, maintenant, comme vous le voyez, nous ne voyons que la question. Et si je change l'état manuellement ici à l'avant est faux nous obtenons 42 dos. 

Donc, encore une fois, cette composante a son propre état. Comme un bouton sait si il a été pressé ou non, cette chose sait ce qui est sur l'avant ou à l'arrière. Par défaut, il est sur le front. Et puis, si elle est sur le front, nous imprimons sur la question. Si il est sur le dos, nous allons imprimer la réponse. Donc, encore une fois, l'information donnée est la même. Il semble juste différente basé sur la façon dont vous le programmez. Ainsi, par exemple, Facebook Messenger, même si vous obtenez la même source de données, il peut être différent parce que l'État est différent. Vous êtes à la recherche à un Le message de personne différente. 

OK, donc tout cela est bien et bon, mais maintenant, ce qui est fait nous rendre capables de changer, si notre carte est avant ou l'arrière. Nous pouvons faire cela en ajoutant un flip bouton, un bouton à la carte qui va retourner la carte si elle est [inaudible]. Donc, nous allons ajouter un bouton ici, ce bouton, ce bouton va dire flip. 

Et maintenant, il ne rien faire. Il semble juste agréable. Ce que nous pouvons faire est que nous pouvons ajouter un clic gestionnaire, onClick égale this.flip, et nous allons définir la médaille plus tard. Mais fondamentalement, onClick est une fonction qui est appelée lorsque l'utilisateur clique dessus. 

Donc le bouton saura quand il a été cliqué. Est allé il a été cliqué, il va retourner la carte. Il est un peu comme votre livreur de pizza. Vous êtes comme, tout droit, chaque fois que quelqu'un appelle-moi, je vais livrer une pizza, non? 

Vous enregistrez cet écouteur. Vous écoutez pour un événement. Vous avez appelé, et quand le événement se produit, vous faites quelque chose. Vous obtenez une pizza. Dans ce cas, lorsque vous êtes cliqué, vous retournez la carte. 

Et donc nous avons besoin de définir une fonction qui va retourner la carte, de sorte que nous allons écrire ce droit ici, flip fonction. Et que pensez-vous bascule va faire? Encore une fois cette est appelée lorsque nous cliquons sur le bouton flip. Qu'est-ce que la fonction bascule devrait faire? 

AUDIENCE: Changement this.state.front de vrai à faux, faux à vrai. 

NEEL MEHTA: Ouais, donc prendre toutes les this.front est-- l'état avant est. Prenez l'état avant, si il est vrai, font fausse. Si elle est fausse, rendre vrai, non? Essayons donc de cela. 

Vous ne pouvez pas changer d'état tout en faisant this.state. Vous ne pouvez pas faire cela. Vous ne pouvez pas faire cela. Vous devez utiliser une fonction appelé this.setState. 

Donc vous pouvez dire this.setState avant colon-ci où, encore une fois, l'exclamation le point signifie le contraire. Je suppose que si cela. state.front est vrai, il va se fausse. Donc, nous allons définir l'état de vrai à faux. Si elle est fausse, nous allons régler false à true. 

Juste remarquons que nous définir et obtenir légèrement différemment, et nous allons donc essayer. Bada Bing, regardez cette. Le bouton le fera maintenant passer l'avant vers l'arrière Etat. 

Et voici où vous voyez une peu de la magie de réagir. Comme on n'a jamais dit que ce à nouveau rendu. On n'a jamais dit que ce redessiner rien. Si vous faites cela sans Réagir, vous seriez ont to-- comme lorsque le bouton bascule est cliqué, vous auriez à dire à manuellement re-rendre, non? 

Réagir est vraiment cool en ce que si vous lui donner un certain état et propriétés, il sera toujours rendre exactement la même chose. Et donc quand nous jamais nous changeons l'état et les propriétés, réagir tout simplement ré-rend le tout. Il sait qu'il ya une une à une correspondance entre l'État et paramètre et HTML. Donc, chaque fois l'un de ces changements par par un état de jeu, il va changer la façon dont le rémunération est un nouveau rendu. Et donc, fondamentalement Réagir est comme en attente pour vous de changer. 

Chaque fois que cela change quelque chose, il va re-rendre la page entière. Et si cela semble inefficace, il est parce que ce serait, mais réagir utilise une chose appelé Ombre DOM. Au lieu de tirer directement à la page, il maintient l'arbre HTML virtuel en mémoire. 

Vous savez, HTML est comme un arbre, comme une structure de données hiérarchique. Il conserve un faux arbre en mémoire, et chaque fois que vous mettez à jour la page, il va dessiner un autre faux arbre, et il va calculer Quel changement dont il a besoin pour faire le page pour faire les deux arbres égaux. Donc, fondamentalement, il est pratiquement re-rend beaucoup. Et puis il ne l'aime pas les changements page dans peu de réglages au besoin, il est donc très, très, très efficace. 

Donc, fondamentalement Réagir volonté chaque fois que vous changez quelque chose, il va re-rendre la page virtuellement. Il va comprendre ce que dois-je changer pour rendre la page réelle reflète la page virtuelle, et il va le faire. Voilà le DOM virtuel. Il est l'un des plus grands caractéristiques de réagir. 

Cela a-t-il du sens? Des questions? Oui? 

Public: Comment fonctionne comparer encore à la MVC dont nous avons parlé avant que des ressources comme. 

NEEL MEHTA: Oui, la question est comment se comparent à MVC? Vous avez demandé sur les ressources. Eh bien, nous allons parler de la façon dont il fonctionne. 

Dans MVC, vous souhaitez mettre à jour le modèle. Dans ce cas, nous aurions un modèle de carte. La vue aurait le bouton bascule, et le contrôle aurait pour fonction de flip. Donc, la vue serait dire la contrôleur pour Flip Flip. Retourner serait dire la modèle à changer, non? 

Et donc quand vous faites un MVC, vous écouter pour le modèle à changer, et vous êtes-rendu de la vue en conséquence. Ou vous avez juste à aimer disposer le dispositif de commande. Attendez que le modèle à changer, puis choisir une partie de comme une chose changer. Ici, nous avons une chose, mais dans une grande application, il faut aimer se rappeler ce que le changement dans chaque endroit unique, il est donc un peu ennuyeux. Et donc Réagir est agréable parce qu'il a une Ombre Dom. Il peut se permettre de simplement réécrire la chose entière. Vous ne devez pas sélective comme deviner ce que la mise à jour. 

Sur Facebook, si vous le souhaitez obtenir un nouveau message, dans MVC, vous auriez à retenir, OK, changer des choses au sommet de la la page, l'icône de message. Pop aussi une nouvelle fenêtre au fond. Assurez-vous également une chose nouvelle dans cette fenêtre. Aussi jouer un son. 

Cela fait beaucoup de choses sortir en même temps. Et si vous ne le faites pas avoir une ombre Dom, vous seriez avoir à faire cela manuellement, car vous ne pouvez pas vous débarrasser de toute la page. Vous ne pouvez pas vous permettre, si vous avez Pour changer chaque chose manuellement, qui est vraiment gênant dans MVC. 

Ainsi, afin d'être économe, ils sélective mettre à jour la page, ce qui est efficace, mais aussi ennuyeux. Dans réagir, en raison de l'Ombre Dom, vous obtenez deux choses gratuitement. Il est efficace car de l'Ombre Dom. Le goulot d'étranglement est mise à jour la page. Il ne fait pas la manipulation de l'arbre. Vous obtenez l'efficacité. Vous bénéficiez également de la facilité d'utilisation, car si vous venez de réécrire la page entière, mais vous savez, tout droit, les choses vont être sur la page quelque part. Il pourrait être dans un endroit différent, mais ça va être sur la page, à droite? Donc, vous venez de nouveau rendu la chose entière virtuellement, et vous pourriez faire quelques des modifications à la page elle-même. 

Donc, encore une fois, dans MVC vous aurait à choisir entre la facilité d'utilisation et l'efficacité, et réagir, vous obtenez à la fois. Il est donc préférable. Donner un sens? Solide. 

OK, alors voyons parlons un peu plus sur l'étape 4, comment nous pouvons intégrer des composants. Donc, nous avons ce droit maintenant. Nous avons notre petite touche cool. Nous pouvons retourner en arrière et de suite, et voilà tout ce qu'il fait. Disons que nous voulons avoir un autre composant. Disons que notre application flashcard devrait contenir une liste de toutes les cartes que vous avez, ce qui signifie que nous avons devrait avoir un autre composant. Eh bien, peut-être appeler une vue de liste. Faisons une vue liste coexiste avec l'CardView, et ce point de vue de liste et CardView aimeront travailler ensemble. Et vous pouvez les combiner pour rendre notre application pour vous. 

Alors d'abord, faisons un couple plus de cartes à droite. Disons que, quelles cartes? Et juste pour que je ne dois pas vous ennuyer avec le tapant dans, Je vais juste de le copier à partir d'ici. Et donc je vais pas lui donner une seule carte. Je vais lui donner une gamme de cartes. Donc, les premières applications va se casser pour le moment. Très bien, nous allons donc faire cette mesure de gérer plusieurs cartes. Alors d'abord, nous allons lui donner, pas juste une carte, mais une gamme de cartes, comme une liste de cartes. Et dans ce cas, nous avons trois d'entre eux. 

Très bien, alors si l'application est aller pour obtenir une liste des cartes, et il va décider l'un pour montrer au CardView. Le CardView ne peut rendre une carte, mais l'application obtient une liste de toutes les cartes, à droite? 

Alors, quand vous comprenez l'un carte à donner à CardView, comment voulez-vous deviner que vous pourriez être en mesure pour prendre une décision à propos de la carte qui montrer? Pour vous donner une idée, il est temporairement Vous serez affichez une certaine carte. Si vous actualisez la page, vous allez juste revenir à la première carte. Voilà OK parce qu'il est temporaire. Quelle technique pourrions-nous utiliser? 

AUDIENCE: Vous pourriez faire une variable Ainsi, tout comme vous aviez avant. Est-ce vrai, vous pourriez ont carte actuelle est égale à 1? 

NEEL MEHTA: Ouais, donc nous voulez avoir l'état, non? Vous souhaitez utiliser Etat dans le composante de comprendre quelle carte voulons-nous obtenir. Comme nous avons une liste de toutes les cartes, nous allons utiliser l'état de comprendre une de la première carte, seconde carte, la troisième carte, et ainsi de suite. 

Donc, une application pour une application obtiendra une avoir la fonction getInitialState, getInitialState retour de la fonction. Et nous dirons juste activeIndex 0. Alors maintenant, notre application a son propre état. 

Et donc maintenant rendre, à comprendre une carte, nous allons simplement aller à la gamme et de saisir la chose à cet index. Sélectionnez carte this.props.cards égales this.state.activeIndex. Donc, comme vous voyez ici, les accessoires et l'état effectivement travailler ensemble. Alors, maintenant que nous avons notre ActiveCard, nous l'appellerons ActiveCard, et nous allons voir si cela fonctionne. [INAUDIBLE] 

Oh, ce fut une erreur de texte. Ah. 

Cool, yep, alors maintenant nous étions de retour à l'endroit où nous étions avant, non? Ancien programme même, sauf maintenant nous pouvons soutenir une liste des cartes, et pas seulement une seule carte. Et maintenant, encore une fois, si nous changeons le activeIndex, nous pouvons aller de 0 à 1, et maintenant que la deuxième carte, puis nous sommes allés à 0. Alors, voici une nouvelle gonflée version de notre. 

OK, alors maintenant nous allons avoir une vue de liste montre toutes les cartes dans votre programme, donc nous allons faire une nouvelle composant appelé listView. Laissez listView égale react.createClass. Donc, nous voulons rendre un non ordonnée liste avec un élément de la liste pour chaque carte. Et donc nous avons un tas de cartes. Nous voulons un élément de la liste pour chaque carte, à droite? Nous pourrions faire une boucle ou quelque chose à faire un nouvel élément de liste. Mais la façon dont vous le faites dans Réagir, utiliser une chose appelée carte. La carte est un outil ou une fonction que vous utilisez que, pour chaque article, exécute une fonction, prend valeur de retour, et vous donne que de retour. 

Ainsi, à titre d'exemple, on a le tableau 1, 2, et ce 3.map function-- est un raccourci pour une function-- x flèches x fois x. Ce dit, pour chaque numéro en 1, 2, 3, prendre. Carré, et lui redonner. Alors, que pensez-vous 1, 2, 3.map x va à x fois x vous donne retour donné que cette fonction est exécuter sur chaque élément de ce tableau. 

Public: 1, 4 9? 

NEEL MEHTA: Yep, 1, 4, 9 parce que vous faites 1 fois 1. Cela vous donne un. Voilà le premier élément. 

2 fois 2 est 4. Voilà un deuxième élément. 3 fois 3 est neuf. Voilà un troisième élément. Donner un sens? Donc, la carte dispose d'une technique que vous utiliser dans les programmeurs fonctionnels, le nouveau style de programmation à faire quelque chose à chaque élément dans votre liste. Et si cela vous semble familier. Nous avons une liste de cartes. Nous voulons obtenir un élément de la liste pour chaque l'un, donc nous allons simplement utiliser la carte ici. Nous dirons, laissez liste égaux this.props, cartes, carte. 

Et donc donné une carte, nous sommes va générer un élément de la liste avec le contenu du côté de cette carte de celui-ci. Disons que nous voulons donner à les cartes question afin card.question. Donc, cette liste contient une tableau des Li ou mettre des articles où il ya une liste point pour chaque carte, et qui contient les cartes question. Donner un sens? 

Cool, alors maintenant nous allons fait imprimer cela. Donc, nous allons revenir un ul. A l'intérieur de cette liste non ordonnée, nous allons juste coller la liste complète qu'ils nous ont donné. Cool. 

Très bien, alors maintenant ce de liste fonctionne tout trouver. Une question sur l'affichage de la liste? Vous avez un tas de cartes. Vous faites un élément de la liste pour chaque carte. Et vous les mettez à l'intérieur d'un non ordonnée liste, et vous lui redonner. Donc, maintenant nous allons agir de sorte que nous intégrons ceci à l'intérieur de notre application, afin que nous puissions le faire, de liste. Quel argument ne nous passons à la vue de liste? Quelles sont les propriétés ne nous lui donnons? Rappelez-vous, si vous donnez un tas de cartes, ça va faire la liste voir pour ces cartes. Alors, que pourrions-nous passer ici comme argument? PUBLIC: Une liste des cartes? NEEL MEHTA: Ouais, donc les cartes this.props.cards égaux, non? Et si le seul problème est que vous ne pouvez tourné un élément de niveau supérieur dans rendre, si vous avez de l'envelopper dans un div. C'est étrange. Voyons donc si ce. Ça marche? 

Yep, là vous allez. Alors maintenant, nous avons une liste des cartes à la base, puis nous avons notre Se CardView sur le dessus, et qui va retourner entre les deux côtés de la carte. Maintenant, cela fait-il sens comment je l'ai fait? Ouais, donc encore une fois, nous avons deux composants. Les premières impressions de composants sur chaque carte dans la liste. Voilà la vue de liste. Et le deuxième composant imprime simplement cette carte. Si vous lui donnez une certaine carte, il va imprimer des informations à propos de cette carte et laissez-vous aller et venir. 

Donc, si nous voulons, nous pouvons essayer de parler sur l'ajout de nouvelles fonctionnalités à cette. Sinon, nous pouvons parler un peu plus environ de la vitesse de réacteur, ou nous pouvons répondre questions que vous pourriez avoir Parce que ce sont toutes les pièces de base de réagir que je veux parler. Nous pouvons aller de l'avant. Nous pouvons répondre à des questions. Tout ce que vous voulez. 

AUDIENCE: Pouvez-vous utiliser JSX dans normale JavaScript? Ou est-ce quelque chose qui est venu avec la [inaudible]? 

NEEL MEHTA: La question est: pouvez- vous utilisez JSX avec JavaScript normale? La réponse est oui. JSX est juste une façon de cela prend votre JavaScript qui a HTML à l'intérieur de celui-ci, et il compile en JavaScript n'a pas HTML à l'intérieur. Donc remarquer that-- donc noter ici. Ce semble que vous avez comme div et vous avez des choses à l'intérieur de celui-ci. 

Qui compile de JavaScript qui comme génère la même chose. Je suppose que ce que je dis est que JSX est juste un syntaxique, comme il est un préprocesseur JavaScript beaucoup comme PHP est un préprocesseur pour HTML. JSC est un préprocesseur JavaScript qui vous permet vous mettez HTML à l'intérieur de votre JavaScript. Et donc si vous avez le droit transformateur qui est une chose appelée [inaudible], qui va transformer. Le préprocesseur droite, il va vous laisser faire cela. 

AUDIENCE: [inaudible] NEEL MEHTA: Habituellement, vous ne devez pas de mettre HTML à l'intérieur de JavaScript sauf si votre faire réagir. Mais vous pouvez le faire de toute façon. Oui? 

AUDIENCE: Je pense que vous avait décrit Réagir comme un langage de programmation fonctionnel. Nous avons appris C dans CS50. C est aussi un langage fonctionnel? NEEL MEHTA: Donc la question est sur le point fonctionnel par rapport à une autre chose appelée la programmation impérative ou de procédure. Il ya deux sortes de programmes populaires. Un est ce qu'on appelle la procédure, qui est tout au sujet comme les commandes faites, et une est fonctionnelle, ce qui est tout d'avoir des fonctions et ayant entrée et la sortie de ceux-ci. Réagir est un paradigme fonctionnel. C est un paradigme très procédurale. 

Et titre d'exemple, par exemple C, vous ne faites pas de cette façon déclarative de rendre le programme, non? Vous avez à dire, imprimer. Changer cette structure de données. Imprimer cette. Il est tout au sujet des commandes. 

Dans Réagir, il n'y a pas que de nombreuses commandes. Il est tout d'avoir composants mis ensemble. Ils sont comme des fonctions. Vous avez comme une fonction appelé CardView, qui est une fonction qui a entrée, de sortie, et ainsi est tout Réagir sur cette philosophie nous de having-- vous avez données. Vous passez à travers cette algorithme, et il va sortie HTML que vous juste la page imprimée, et donc vous devez construire pièce par pièce. 

Donc, pour en tirer une métaphore pour ce que Je l'ai dit avant, vous savez comment sur Facebook si vous recevez un message, et que vous choisissez quelles parties de mettre à jour, qui est procédural. Il est impératif, non? OK, je suis arrivé un message. Changeons compte là-bas. 

Disons une fenêtre pop ici. Changeons compte là-bas. Tirons cela ici. Voilà une approche procédurale. 

Voilà ce que des choses comme angulaire, Boost, Backbone, d'autres cadres utilisent. Réagir est fonctionnel. Il est une façon très différente de penser à des choses. Il prend cette idée de nous allons avoir des fonctions ou des algorithmes qui vous donner des données. Il va cracher ce qu'il devrait être, et l'ordinateur prendra soin de pesée. Vous ne le manipulez pas vous-même. Est-ce que faire un peu de bon sens? Oui? 

AUDIENCE: Dans un langage fonctionnel, tout se passe à la fois? 

NEEL MEHTA: Non, les choses se passent dans l'ordre. Comme ici il ya encore commander, mais il ne le fait pas produire afin de comme féliciter, commande, commande. Il arrive dans l'ordre de fonction vous donne la sortie. Mettez ça dans une autre fonction. Mettez ça dans un autre fonction, une autre fonction. 

Si vous faites CS51, vous aurez apprendre programmes fonctionnels un peu hors de la portée de cette. Mais fondamentalement, ce qui rend Réagir fraîche est non seulement le flux de données unidirectionnel et le Dom virtuel, mais aussi cette idée de la programmation fonctionnelle. Et la programmation fonctionnelle est très facile pour composer et faire des trucs cool sur, et il est très facile de penser propos et la raison à propos. Donc, il est un autre bon match nul de réagir. Autres questions? Oui? 

AUDIENCE: Euh, pourquoi voulez-vous utiliser let par opposition à var? 

NEEL MEHTA: Donc la question est Pourquoi utilisez-vous laisser au lieu de var? Ceci est une chose appelée ES6 ou ECMAScript 6. Il est la nouvelle version de JavaScript. Il ya un tas de raisons techniques, Mais permettez est une meilleure version de var. 

Il est comment vous déclarez des variables. Vous pouvez utiliser laisser. Vous pouvez utiliser var. Soit a un tas de techniques reasons-- vous pouvez les regarder jusqu'à later-- pour pourquoi il est préférable. Fondamentalement, ES6 possède quelques belles nouvelle syntaxe, quelques nouvelles fonctionnalités sur le dessus de la vieille JavaScript. 

Nous avons donc comme cinq minutes. Je voulais juste parler encore une chose très vite. Si vous aviez des questions, Parlons après cette. Mais juste pour que cela devient pris à la caméra, je viens vouloir parler un peu de la façon dont vous Réagir réellement utiliser dans vos applications. 

Si vous allez ici, Facebook.GitHub.IO/react, ce est la page d'accueil pour réagir et ça va vous montrer comment vous utilisez réellement Réagir dans vos pages. Fondamentalement, il est un peu essayer compliqué à installer React. Il est pas aussi facile que vous faites glisser simplement et déposer un JavaScript là. 

Vous devez avoir votre transformateur mettre en place, qui, comme il l'a fait avant, transformer votre JSX en JavaScript normale. Vous avez à la chose qui va compilez vous ES6 à la normale. JavaScript il ya beaucoup de mouvement pièces que vous avez à faire, donc il est une chose appelé Yeoman, Yeoman.io. Et cela est un outil de ligne de commande qui va vous aider échafaudage votre Réagir projets facilement. 

Ainsi, vous pouvez lire à ce sujet plus tard, mais il existe des outils que Yeoman offre. Ils vous permettent de créer un Réagir app avec tout intégré. Comme il va avoir construit dans, construite en composants. Il aurez votre transformateur intégré. Ils ont beaucoup de fraîcheur trucs construit automatiquement l'utilisation de ces choses appelées générateurs. 

Alors, lisez à ce sujet si vous le souhaitez. Il suffit d'aller sur Yeoman, Y-E-O-M-A-N, et vous pouvez trouver des générateurs de ce genre. Et avec comme générateurs ceux-ci, vous voulez juste un est jouit d'une ligne de commande de couple. Il va échafaudage sur un Réagir toute application pour vous. Il va avoir toute la tuyauterie d'emploi, et le travail de grognement fait pour vous, et ceci est la raison pour laquelle vous vous concentrez seulement sur écrivant simplement dans React. 

Donc, fondamentalement, la construction d'un Réagir application est triviale. Il est câblé tous ensemble, mais il sont des outils qui vais le faire pour vous. Donc, si vous souhaitez effectuer une Réagir application, essayer de le faire de cette façon. Si vous voulez juste tester, vous pouvez essayer d'utiliser cette CodePen parce que cela a CodePen tout le câblage réagir. Je l'ai fait tout le travail pour vous déjà. 

Donc, si vous voulez faire comme un la production de libérer Réagir application, essayer un de ces générateurs. Si vous voulez juste jouer autour, il est souvent la peine juste comme essayer de jouer autour sur CodePen ici. Bon son? Cool. 

Voilà donc tout ce que je dois. Encore une fois, tout le code et les exemples sont va être sur ce site ici. Donc, encore une fois, nous ne parlions pas à propos de beaucoup de syntaxe Réagir, mais de trouver tous ceux petits détails syntaxiques, Tout va être disponible sur ce site ici. 

Donc, je vous recommande comme prendre la première étape. Mettez-la dans votre CodePen. Essayez de travailler pour faire à la deuxième étape. Il ya une quatrième étape, et juste voir où vous obtenez à partir de cela. 

D'autres questions, vérifier sur cette page ou écrivez-moi. Voilà mon email. Mais je serais ravi de vous aider avec toute questions que vous pourriez avoir à propos de réagir. Donc, oui, voilà tout ce que je dois. Je vous remercie tous beaucoup pour regarder ou pour assister. Et je prends des questions vous pourriez avoir après cela maintenant. Donc, merci à vous tous pour regarder.