[Muziek] 

NEEL MEHTA: Hier gaat. 

Nou, iedereen, welkom op het web apps van de toekomst met React. Dit is CS50. Mijn naam is Neel. Ik ben een TA voor CS50 en een tweedejaars aan Harvard College en een zeer, zeer gepassioneerde webontwikkelaar. Dus ik ben erg spannend vandaag met je te praten, Of je nu hier of thuis bent kijken, ongeveer React, dat is, opnieuw zoals ik al zei, de toekomst van web-apps. 

Reageer dus is een web framework. En zoals ik heb verteld sommige mensen hier, een kader is gewoon een set van tools die u kunt gebruiken structureren en bouwen van uw web-app. En web apps zijn, nogmaals, websites dat zijn interactief, zoals Facebook, Twitter.com, Instagram.com, wat dan ook. 

Dus Facebook is een web framework dat werd ontwikkeld door Facebook een paar jaar back-- React is. Het is sindsdien gebruikt in Facebook op hun mobiele apps en het web app, Instagram. Khan Academy is een ander prominent early adopter van React. 

Het is echt geweest krijgen zeer populair. Als je ooit dingen zoals hoekig of gebruik Backbone, dit is van dezelfde familie, maar het heeft sindsdien ver overtreffen hun populariteit. Het is de hete nieuwe ding. Het is echt, echt enorm. 

En zo React is goed niet alleen als een web framework voor het bouwen van interfaces. Het is goed voor het bouwen van web-interfaces. Er is ook een ding genaamd Reageer Inheems die laat u interfaces te bouwen voor Android en iOS en misschien andere platformen in de toekomst met precies dezelfde JavaScript-code. Je zou exact dezelfde gebruiken JavaScript-code om websites te maken, Android apps en iOS-apps te maken. 

Het is een zeer, zeer spannende tijd. Het is echt, echt cool kans. Het is echt een universele web interface-instrument voor ontwikkeling, dus het is een zeer, zeer het belangrijk om te weten. En, zoals ik vertelde mensen voor, dit, denk ik, gaat hoe we veranderen bouwen van webapplicaties altijd. Dus het is misschien een beetje overdrijving, maar ik denk dat het een vrij goed om te weten. 

OK, dus wat is React? Reageer is een raamwerk kunt u gebruikt voor het bouwen van interfaces. Een interface is, wederom, een webpagina, toch? Dus hier is Instagram.com, toepassingen reageren. 

Reageer is gebouwd op de idee van componenten. Een component is een HTML element steroïden, dus een HTML-element is als een knop. Het is een paragraaf. Het is een header, toch? En Instagram zal gebruik maken van deze, maar het Ook onderdelen van React gebruiken. 

React componenten opgevoerde HTML-elementen dat hun eigen gedrag vervat in hen. Dus, als voorbeeld, kunnen we een tijdselement, een tijd component, die zal bevatten, zoals tijdstempel, weet je, een component profiel dat zal het profiel bevatten en de naam van de persoon. Het kan als teller, hebben die kan rekenen als het aantal stemmen voor leuk, en als je er op klikt, zal het toename van het aantal houdt. Een component is slechts een bos van HTML-code die heeft een aantal functies verpakt binnenkant van het. Dus het is als een HTML-element op steroïden, zoals ik al zei. U kunt deze componenten te nemen, en je kunt ze in elkaar gezet om nieuwe componenten te maken, in dit geval, een post-component, die bevat al deze spullen. Het zou tijd bevatten, Profile, LikeCounter, misschien is de reactie en misschien het beeld zelf. En dus web apps zijn gewoon gebouwd door het nemen van componenten en zetten ze samen. Een Instagram-feed is niets meer dan een bos van berichten een na de ander, elk bericht bevat, zoals de tijd, Profileren, LikeCounter, enzovoort. Het is een beetje als het bouwen van een huis. Je hoeft niet bouwen huis van boven naar beneden. Je neemt je components-- nemen, zoals de badkamer. U neemt de bedroom-- u ze plakken samen, en je hebt een nieuwe component. U heeft een nieuwe gedeelte van het huis. 

Reageer dus is rondom gebouwd Dit idee van componenten zijn interactief, dat declaratieve zijn. Als je gewoon zeggen wat een profiel, en maakt het. Ze zijn composable. U kunt een tijd en een profiel te nemen, zet ze samen, maak er iets beter. En ze zijn herbruikbaar, dus als je de broncode voor een post, je kan die overal insluiten. 

U kunt insluiten een Instagram ding op uw eigen website. U kunt insluiten in Facebook, bijvoorbeeld, zolang het gebruik React ook. Dus componenten zijn echt, echt, echt krachtige bouwstenen van het web dat kan overal worden gebruikt en zet samen om nieuwe bouwstenen te maken. Dat is het zeer, zeer hoog niveau overzicht. Dus nogmaals, als je vragen op elk punt over de filosofie van de reactor, de codering, om mij te stoppen, en laat me weten. 

OK, dus reageer is cool, omdat het heeft een andere manier van kijken hoe bouw je web apps. U hebt waarschijnlijk gehoord van MVC, een model dat u de controle in CS50 of wat dan ook andere indringende lessen die u gebruikt. En de meeste kaders opgebouwd rond het idee van MVC. Reageren niet. Reageer is opgebouwd rond het idee van één richting datastroom zoals gezien door deze grafiek of grafische hier. 

Kortom, je hebt een gegevensbron. En de gegevensbron zal beslissen hoe je lay-out van bepaalde onderdelen. En de componenten zal Vervolgens, wanneer zij veranderen, zullen ze vertellen het gegevensbron veranderen. 

Om de Instagram gebruiken Bijvoorbeeld, zou u een lijst van de post objecten zoals in een database of zoiets. Dat de gegevens. En dan onze post componenten zal die gegevens te nemen, en het gebruik van die gegevens te maken een ding op het scherm. Dat is wat de pijl van data component is, en diezelfde gegevens worden gebruikt om een ​​bos van componenten maken. 

Facebook Messenger voor Bijvoorbeeld, wat React, je zou een lijst hebben berichten als uw gegevensbron. En dat zou niet maken alleen de lijst met berichten maar ook de lijst van vrienden die je hebt. U hebt het aantal ongelezen. Misschien ook wel te maken van de Facebook-ding dat onderaan Facebook.com. Dezelfde gegevens is een bron van de waarheid en dat veel oorzaken componenten worden gemaakt. En als een van degenen componenten wordt veranderd, het gaat terug en wijzigt de gegevensbron. 

U een bericht verzendt, toch? Dat verandert de gegevensbron. U leest uw berichten, dus je ongelezen op 0 zetten. Dat verandert de gegevensbron. En merk op dat al deze van een arrow terug te gaan naar dezelfde gegevens bron, zodat u weet, gegeven een bepaalde data set, je precies wat het weet pagina gaat uitzien. Het deterministische. Je weet wel, aangezien bepaalde gegevens, wat de pagina gaat uitzien. U kunt voorspellen hoe het gaat gedragen en hoe het gaat te werken wanneer ze samen zijn gebracht. 

En als ik een miljoen onderdelen Hier zou het hetzelfde gedragen, toch? Je zou niet hebben raar interconnecties. Een data gerenderd miljoen componenten. Een miljoen componenten kon ga terug en de gegevens bewerken. En dus dit is erg leuk. We bouwen composable, eenvoudig schaalbaar web apps. 

U heeft één gegevensbron, de bron van de waarheid. Dat vertelt uw componenten hoe de lay-out van de pagina, en de componenten zullen handvat interactie. En als ze willen veranderen dingen, gewoon terug en vertel de gegevensbron veranderen. Zin? Reageer dus is alles over het begrijpen hoe u een component op te bouwen en hoe u uw component maken interactie met de buitenwereld. 

Het maken van de component interacteren met de buitenwereld maakt gebruik van een technologie genaamd Flux, die is een raamwerk dat is toegevoegd bovenop React. We gaan niet over praten. We gaan meer over praten, gezien data, hoe kun je een component maken? 

En zo React is echt cool, want je kan het gebruiken met elke back-end u wilt. Als je als een Python backend, als je Python kan spugen een aantal gegevens, Reageren kan maken. Als u geen JS uitgangen gegevens, maakt het React. Ruby rails met data, React maakt het. 

Reageer dus is eigenlijk een web view-- een front-end met componenten voor elke gegevensbron dan ook. En dus gaan van gegevensbron reageren componenten is vrij eenvoudig. Gaat de andere kant op is een beetje moeilijker. Die gebruik maakt van Flux zoals ik al eerder noemde. Zullen we niet krijgen in dat. We zullen meer op de focus data naar componentenzijde. Deze manier kunt u maken koele, leuke web apps. Het zal geen invloed op de buitenwereld voor nu, maar dat is een ander verhaal. 

OK, dus als je hier was voor mijn laatste seminar weet je dat alle van de code voor gesprek van vandaag gaat worden op deze URL hier, sorry, deze URL hier. En in principe gaan we om te gaan door middel van vier stappen, misschien vijf, waarschijnlijk niet vijf. We zullen door middel van vier stappen verplaatsen van het bouwen van een monster Reageer app. En zo al de broncode voor elke stap van de weg gaat om hier te zijn, dus als je volgt samen thuis, voel je vrij om deze code te lezen. Als je na hier langs, we zullen laten zien op het scherm, dus maak je geen zorgen over te maken. Maar als je thuis bent, voel vrij om deze website te bezoeken. En, ja, je moet kunnen krijgen alle code zou je hier ooit nodig. Dus het is een goede cheat sheet en voor uw toekomstige avonturen met React. Koele, dus als iedereen die hier is, en zelfs als je thuis bent, trek deze website, is.gd/cs50react, geen kapitaal, geen underscore, helemaal niets. 

Je zult een pagina die lijkt te zien een beetje zoals dit. Dit is een ding heet CodePen. CodePen is een samenwerkingsverband coderingsomgeving waarmee kan ik hier de code te schrijven, en het zal automatisch naar u worden verzonden. En op deze manier, kan ik code te schrijven. Ik kan hier de code uit te voeren. 

Voor example-- en als het reloads-- zien, Ik stel JavaScript-code op de pagina hier, en het zal automatisch maken van een webpagina met deze JavaScript-code. En dus dit is een manier voor ons om uit te proberen de code erg snel zonder te hoeven gebruiken onze ID of gebruik maken van onze lokale machine of wat dan ook. Het is een zeer snelle manier voor u om mockup en het testen van verschillende soorten code. 

Dus ik ga nemen voorbeeldcode, waardoor het hier. We gaan werken doorheen. En als je thuis bent, je kan deze omhoog te trekken ook. En ik heb al geïnstalleerd Reageer hier, dus je kunt gewoon schrijf uw eigen code hier, en probeer het als uw eigen speeltuin. 

Ja, als iedereen openstellen van deze link hier. Geef me een duim up als je eenmaal hebt hem open. Cool, cool cool. Er is hier niets voor nu, maar we zullen veranderen dat zeer binnenkort. 

OK, dus React is een JavaScript- library, en als zodanig, vereist kennis van JavaScript, dat is de web-programmeertaal. En het wordt gebruikt voor andere nu ook, maar vooral het web te ontwikkelen taal, dus als je niet bekend bent met dat, las een site genaamd JSforCats.com. Het is fantastisch. U kunt leren JavaScript binnen een halfuur. Het is ongeloofelijk. 

Dus geef het een te lezen. We is ook een stuk van HTML hier omdat we ontwerpen van webpagina's natuurlijk. Dus als je niet bekend bent met HTML, check out HTMLdog.com. Ik denk dat het leren van React is een miljoen keer makkelijker als je al weet de bouwstenen. Als u de onderdelen, het is makkelijk om een ​​grotere component te maken. Dat is React taal voor jou. 

Dus ga je gang en geef deze dingen een te lezen. Pauze deze video. Geef het een te lezen als je thuis als je niet vertrouwd zijn met HTML en JavaScript OK, dus wat we gaan doen is we gaan maken een zeer fundamentele flashcard app met React. We gaan een flashcard hebben. U kunt de kaart heen en weer te spiegelen. En we hebben ook een lijst van alle kaarten die we hebben, en als we voelen ambitieus, kunnen we misschien in staat om te schakelen tussen auto's door erop te klikken. 

Maar dit is, van je blote botten, een eenvoudige React applicatie. En dus dit is eigenlijk niet triviaal te implementeren, maar we gaan om te laten zien dat, als je dit, het is heel, heel gemakkelijk om het uit te breiden als andere mensen je te helpen met het. Dus we gaan om te gaan door middel van vier stappen vanaf nul te beginnen om dit te bouwen. 

OK, dus de vier stappen, zullen we beginnen met de eerste stap. De eerste stap zal zijn bouwen van uw eerste component. Zoals ik al eerder zei, een component in Reageer is gewoon een HTML-element op steroïden. Het specificeert de HTML en bepaald gedrag, en zal hoe mensen opgeven kan communiceren met deze hoe zou het interne toestand te hebben. Als een knop zal weten zoals hoeveel soms is geklikt bijvoorbeeld, en het zal weten hoe om zichzelf uit te leggen. 

Dus laten we gaan vooruit en bouwen ons eerste component met behulp van JavaScript. Dus als de syntax ziet er raar, dat is omdat het soort is. Dus nogmaals, we gaan een variabele genaamd maken app met behulp van het trefwoord te laten, waardoor een variabele Laat App gelijke React.createClass. 

Reageer is een bibliotheek en heeft het creëren klasse functie. En deze functie een stukje code dat je kunt gebruiken om een ​​nieuwe te creëren type React component. En zo React.createClass maakt een component, en deze component zal in staat zijn om dingen te doen. Het belangrijkste wat het kan doen is de render iets te maken als functie. 

Ook indien index niet duidelijk u, adviseer ik je op JS voor katten en check it out. Is dat ingezoomd goed genoeg? Koel. 

Dus elke component behoeften een renderen functie. Het maken functie zegt: wat moet ik af te drukken op het scherm? Maar de component nutteloos als het niet Weet wat te drukken op het scherm, zodat je nodig hebt om een ​​te maken functie. 

Dus in het maken ding, je hoeft alleen maar een aantal HTML terugkeren. En wat cool is dat er is een ding genaamd JSX, die een uitbreiding van JavaScript die wordt gebruikt reageren. Het laat je schrijft HTML binnen van uw JavaScript, die klinkt een beetje raar als u voor het eerst over nadenken, maar het maakt een veel zin daarna. Dus we kunnen dit doen. Als u bekend bent met HTML, ik weet we hebben een div met een algemeen doel container voor spullen. We kunnen een div terugkeren, en de binnenkant Dit div, kunnen we spullen. 

Dus laten we zeggen dat we willen gewoon te maken een straight-up flashkaart voor nu. De flashcard, zou ik zeggen, zal een vraag en antwoord. Dus in dit div, laten we afdrukken van een paragraaf dat zegt question-- Wat is het ultieme antwoord op het leven, het universum? En dan is het antwoord zal, natuurlijk, 42. 

Dat ging niet goed komen op alle. Ja, dus in principe kan je echt schrijf HTML in je JavaScript. En dit gaat worden afgedrukt in het scherm. Dus laten we het proberen. 

Dus hebben we onze component. We moeten vertellen Reageer op te zetten het onderdeel op het scherm zo React.render, zo merken dat we behandel app zoals elk ander element. We schrijven het zoals het was een HTML-element. Net als in plaats van te zeggen als img voor het of p voor paragraaf, je schrijft App, dus App is behandeld als een HTML-element. Zoals ik al eerder zei, het is een element op steroïden. 

Dus je maken App, en je geef het een plek om het te zetten. En dit is hoe je kunt vertellen waar deze te plaatsen. Ik heb een eenvoudig div op de gecreëerde pagina met de naam met een ID van de pagina, en dat is waar het element gaat om te gaan. 

En we gaan niet om te draaien met HTML. In principe is dit gaat krijgen zet binnenkant van deze pagina-element dat we op het scherm. Dus het loopt deze code, en het trekt dit ding op het scherm, dus hier zijn we. We hebben onze eerste Reageer component gemaakt. 

Dus net zoals een samenvatting, we voorzichtig gemaakt een nieuw type van componenten, toch? Dat is wat de React.createClass. En in die component, we vertelde hij wat het moet doen. Wanneer deze component is op het scherm worden afgedrukt het zal de div met afdrukken de twee alinea's erin. 

En wat we deden, hebben we een nieuwe app met behulp van de hoek beugel app notatie. We vertelden het aan het te zetten in de pagina-element. En dus wat ik deed, het creëerde een nieuwe app van die sjabloon. En toen vertelde ik het om het te maken. Dus het zei, OK, app, wat moet ik afdrukken? App zegt, gaan afdrukken van een div twee alinea's erin. En voila, daar is onze div met twee leden binnen van het. Zinvol nu toe? 

Dus nogmaals, het hele uitdaging React is gewoon weten hoe om componenten te maken. Hoe het te maken componenten werken samen. Nu dat we onze eerste gemaakt component, laten we terug gaan en maak componenten aanpasbaar. Zodat u weet hoe u in HTML kan je knoppen les te geven? U kunt uw ankers geven href. U kunt uw input geven een soort, nietwaar? U kunt meer op maat te geven eigenschappen om al uw elementen om het interessanter te maken. En we eigenlijk kunnen doen precies hetzelfde. 

Dus laten we zeggen dat we willen dat onze app te gaan maken elke kaart. Op dit moment dat we gerenderd een hardcoded kaart. We weten dat er maar één kaart het kan doen, dus we zijn gaan proberen en veranderen dit nu zo dat we gewoon kunnen geven enkele kaart. Het zal een afdruk van de kaart. 

Je moet proberen en maak uw componenten een zeer algemene doeleinden. Dus deze manier kon ik een e-mail dit is mijn vriend en zijn als, flashcard wat je hebt, gewoon voer het in hier, en het zal het doen door zelf. U kunt andere zetten dingen in je eigen app. 

Maar eerst, laten we breken dit in twee componenten, maar we willen de kaart te scheiden afdrukken deel van de werkelijke app deel. Dus wat we kunnen doen is dat we kan dit veranderen van App om CardView, maar een nieuwe naam voor de app, en kunnen we een nieuwe te maken component genaamd App, niet te verwarren met de oude App. We hebben de createClass, en net als in HTML, U kunt nest Reageer componenten binnenin elkaar. 

Dus in deze functie te maken, functie return CardView, en dit is precies hetzelfde. Zien waarom het is het zelfde ding? In plaats van destructie alleen de app heeft de div en koppelen binnenkant van het, de app maakt de CardView, en de CardView maakt de div en paragraaf. Dus dit is ons eerste voorbeeld van nesten elementen binnen elkaar. Slaat dat ergens op? Dus nogmaals, we hebben een CardView element. We hebben app elementen dat is groter dan. 

OK, dus we willen dat onze CardView-- als je geven een goede CardView een bepaalde kaart, het zal uit te printen voor u, nietwaar? Dus eerst moeten we een kaart te maken, dus laten we een kaart object. Dus laat mijn kaart equal-- als je allemaal bekend, dit is gewoon de notatie-making object in JavaScript. Het is als een soort van structuur in C, zodat we een kaart, en dus nu kunnen we deze kaart als voorbij een eigenschap of als een attribuut in HTML terminologie van onze app. Dus we kunnen dit doen, App card gelijk Mycard. 

U weet hoe in input, je doet input type gelijk tekst of knop klasse evenaart btn voor bootstrap ,? Hetzelfde idee, App kaart equals-- je hebt om beugel zetten hier-- App kaart evenaart Mycard, dus dit zegt dat we deze kaart object. Ik ga het doorgeven als een woning aan de app component. En deze app component zal in staat zijn om toegang te krijgen en te doen interessante dingen mee. 

Dus onze app gaat worden krijgt een kaart, dus voor nu, laten we de app geef de kaart aan de CardView zelf, omdat als de app is niet gaan om te weten wat te doen met het, dus we zullen alleen maar geef het aan de CardView. Dus zullen we het de pas dezelfde manier, kaart evenaart, en zo elke component kunnen toegang krijgen tot de dingen die is verstrekt. Ze kunnen toegang krijgen tot de eigenschappen die zijn gegeven om het het gebruik van deze syntaxis, this.props.card. 

Dus wat hier gebeurt is je hebt de Mycard object. U passeert het in de app met behulp van App-kaart gelijk Mycard. Die kaart object wordt gegeven aan uw app. De app kan toegang als this.props.card. Het is net zoiets als een afbeelding weet wat het is bron. 

Deze app weet wat het is kaart is, en het kan dingen doen. Het kan berekeningen doen. Het kan beslissingen nemen op basis van het weg te maken. 

Voor nu, ik ging voorbij this.props.card op de CardView. Zinvol nu toe? Het zal meer zin nu te maken. 

OK, dus nu zijn we bij CardView. Onze CardView, gezien de kaart, moet uitprinten zijn vraag en antwoord. Nu zijn we gewoon uitgeprint sommige hardcoded vragen en antwoorden. We moeten uitzoeken out-- we nodig hebben aan de kaart die ze ons gaven vragen wat is de vraag en antwoord, en dan print deze uit in het scherm. 

Dus we kunnen dit doen hier. In maken begin-- eerst doen gelijken. Dus wat we hier doen is dat we weten dat de kaarten worden ons gegeven aan een woning, rechts? Het is aan ons gegeven als input. Zoals het is bijna alsof argumenten aan een functie. De kaart is een argument bijna dit CardView. 

We zullen halen dat, en zet het in de variabele vraag. Zorg ervoor dat het antwoord ging de variabele antwoord. Vraagt ​​die kaart te beantwoorden. En nu dat we deze, in plaats van het afdrukken van die tekst, we gaan uit te printen wat ze gaven ons. 

Dus dit stuff-- dus we gaan Vraag Antwoord te blussen. Laten we eens zien of dit werkt. Koele, dus laten we stap doorheen nog een keer voor de zekerheid. 

Dus mijn kaart is kaart object, en we geven dat de kaart aan de app. En de app gaat naar de te nemen kaart en geef het aan de CardView. En dit CardView zegt, als je geef me elke flashcard voorwerp, Ik zal zijn vraag uitprinten en haar antwoord, toch? 

Dus wat ik kon doen is dat ik kan stuur deze code, de eerste als 10 regels van mijn code, mijn vriend. Hij kon het insluiten in zijn eigen applicatie. En zolang hij deed hetzelfde, zoals CardView kaart evenaart dit, zolang hij schiep de CardView en gaf het de juiste informatie, hij kon maken van zijn eigen kaart. En dus is deze manier, het is een echt koele manier voor u op te bouwen componenten die elkaar gebruiken, toch? Deze kaart kon ik publiceer dit CardView op het internet, en mensen zouden kunnen gebruiken. Dus eigenlijk, het is als een van de standaardfuncties in de C library. 

Het is een functie waarbij iemand heeft geschreven. Je geeft een bepaalde ingang. Het zal een bepaalde output te produceren. Je niet schelen hoe het werkt intern. Zolang je geef het de juiste input, zal het de juiste uitgang te maken. 

En een component kan zijn bedacht dezelfde manier. Dit CardView is als een functie uit de bibliotheek. Als je het wat kaart als een eigenschap, het zal afdruk van de inhoud van die kaart. Net als ik mijn kaart veranderen in plaats daarvan als wat is 5 plus 37, het zal dienovereenkomstig aan te passen. Dus gewoon door het veranderen van de input, krijgt het een bepaalde output. Dus je kunt bijna denken van de componenten als functie op deze manier, waarop kunt u samen te stellen. U krijgt input, zoals dit CardView als de input, krijg je output. In dit geval is de uitgang HTML. Zinvol nu toe? Koele, dus nogmaals, eigenschappen hoe je informatie kunt doorgeven in en uit componenten. 

OK, dus laten we dit ding interactief. Nu is het een beetje saai. Wat is [onverstaanbaar]? U kunt een aantal afdrukken, maar dat is alles wat het kan doen. 

Dus laten we gaan terug naar de oude vraag alleen voor nu. OK, dus nu deze onderdelen zijn saai, omdat alles wat ze doen, ze krijgen ingang. Ze maken uitgang, toch? Dat is een beetje saai. We willen onze hebben componenten kunnen hebben een soort van interne toestand, als herinner me iets. 

Voor een flashcard voor Bijvoorbeeld, wat voor soort staat wilt u misschien onthouden voor een flashkaart? Wat tijdelijk statuut zou je wilt onthouden voor een flashcard in een flashkaart app? Publiek: Of het is omgedraaid? NEEL MEHTA: Yeah, rechts. Dus je zou willen houden spoor van bent u naar boven of je gezicht naar beneden op de kaart. Op Facebook, bijvoorbeeld, zou je wilt onthouden waar in de nieuwsfeed bent u of wilt wie profiel ben je nu aan het doen. 

Op Messenger, als wat tekst die u Typ in het invoerveld, toch? Als u de pagina te verversen, gaat het weg. Maar je hoeft niet echt schelen. Het is maar tijdelijk. Ja? 

PUBLIEK: [onverstaanbaar] NEEL MEHTA: Als een flits card, zoals je kunt zien de vraag of zij het antwoord kant? 

Publiek: OK. 

NEEL MEHTA: Like a tweezijdig flashcard, toch? Ja, dus je wilt dit idee nu Ik heb eigenschappen, die als input, maar staat, die tijdelijk is, uh, waar je bent op de pagina, toch? Nogmaals, ik zei in Facebook Boodschapper, ik heb net als die persoon u bekijkt Facebook of wie het profiel, toch? 

Dit is slechts tijdelijk. Het is belangrijk om de gebruiker te laten zien wat er gaande is, maar Vernieuw de pagina. Het maakt eigenlijk niet uit. Dus het is een tijdelijke toestand, dus we al staat. 

Dus nogmaals, er staat en rekwisieten. Props wordt ingang gegeven van uw gegevensbron. Staat is net als defaults. Het is net als dingen die maakt het ding interactief. 

Dus in onze CardView-- laten we onze CardView-- dus het was leuk. Wat we gaan doen hier, we gaan om CardView en slechts CardView raken. En dus mijn vriend die dit, ze kregen zou geen verschil merken. Ze zouden niet moeten veranderen een van hun eigen code, maar ze zouden zien hun CardView raakte opgevoerde. Dat is een mooi deel over componenten. 

OK, dus in onze CardView, laten we proberen en bijhouden van of we geleidelijk omhoog of naar beneden. In Reageer we dit doen door eerst met vermelding van de oorspronkelijke staat. Waar komt de kaart beginnen? 

Een functie genaamd getInitialState dus functioneren, en we een object terug. Dit object bevat enkele staat, en een staat is slechts een sleutel-waarde paar. Net als in instrueren, heb je een sleutel en een waarde, je hebt zoals naam is een string. 

In dit geval, laten we zeggen dat de voorkant is waar. Dit zegt dat we een staat. Een onderdeel van de staat is een attribuut genaamd front. [Onhoorbaar], dus standaard, we zijn in de voorkant van de kaart, en we kunnen veranderen zoals we flip de kaart. Zin? 

OK, dus in het maken, op dit moment, we zijn met de vraag en het antwoord. Nu wat we moeten doen is te laten zien de vraag als we aan de voorzijde van de kaart, zodat het antwoord is voor de achterkant van de kaart. Dat is de reden waarom jullie allemaal te maken de interactieve kaart. Dus laten we proberen om dit hier. Nou, ten eerste gewoon een variabele. We kunnen nu vragen this.state.front. We toegang geven hetzelfde we toegang rekwisieten, zo this.state.front. 

Als we de voorzijde, dan tekst is this.props.card.question. Als we op de voorzijde van de kaart, gaan we proberen en pak De vraag van de kaart. Anders, als we op de rug van de kaart, wat doen we? 

Doelgroep: Het antwoord? 

NEEL MEHTA: Yep, zodat tekst evenaart this.props.card.answer. Maar als je merkt, we gebruiken de staat om een ​​beslissing te nemen omdat nu de component zal er anders uitzien gebaseerde af hoe deze interageren met het. Dus in plaats van het afdrukken van dit, we zullen gewoon uitprinten de tekst. Cool, dus nu, zoals je ziet, zien we alleen de vraag. En als ik handmatig de toestand hier aan de voorkant is vals krijgen we 42 terug. 

Dus nogmaals, deze component heeft zijn eigen staat. Zoals een knop weet of het is of niet gedrukt, dit ding weet wat er op de voorzijde of aan de achterzijde. Standaard, het is aan de voorzijde. En dan als het op de voorzijde, we printen de vraag. Als het op de rug, we print het antwoord. Dus nogmaals de informatie gegeven hetzelfde. Het ziet er gewoon anders gebaseerd op hoe je het programmeren. Dus, bijvoorbeeld, Facebook Messenger, zelfs als u dezelfde gegevens bron te krijgen, het anders zou kunnen kijken omdat de toestand anders. Je kijkt naar een bericht verschillende persoon. 

OK, dus dit is allemaal goed en goed, maar wat nu eigenlijk maken ons in staat om te veranderen, of onze kaart is voor- of achterkant. We kunnen dit doen door het toevoegen van een flip knop, een knop om de kaart die zal de kaart spiegelen als het [onverstaanbaar]. Dus laten we hier toevoegen een knop, dit knop, en deze knop flip zeggen. 

En zo goed nu, het doet niets. Het ziet er gewoon leuk. Wat we wel kunnen doen is dat we een klik toe te voegen handler, onClick gelijk this.flip, en we zullen flip later te definiëren. Maar in principe, onClick is een functie die wordt aangeroepen wanneer de gebruiker erop klikt. 

Dus de knop zal weten wanneer het is geklikt. Ging het is geklikt, het zal de kaart te draaien. Het is een beetje alsof je pizza bezorger. Je bent als, goed, wanneer iemand roept me, ik zal leveren pizza, toch? 

U registreert deze luisteraar. Je luistert voor een evenement. Je krijgt de naam, en wanneer de gebeurtenis gebeurt, moet je iets doen. U krijgt pizza. In dit geval, als je geklikt, je de kaart omdraaien. 

En dus moeten we een te definiëren functie die de kaart zal omdraaien, dus we zullen dat recht te schrijven hier, flip-functie. En wat denk je flip zal doen? Ook dit wordt genoemd als we klikt u op de flip-knop. Wat moet de functie flip doen? 

PUBLIEK: Change this.state.front van true in false, false in true. 

NEEL MEHTA: Yep, dus neem wat this.front is-- de voorkant staat is. Neem de voorkant staat, indien het is waar, maken het vals. Als het vals is, maakt het waar, toch? Dus laten we dat proberen. 

Je kunt niet toestand veranderen gewoon door te doen this.state. U kunt dit niet doen. Je kan dat niet doen. Je moet een functie te gebruiken genaamd this.setState. 

Dus je kunt zeggen this.setState voorzijde colon dit, waar, nogmaals, de uitroep punt betekent het tegenovergestelde. Ik denk dat als dit. state.front waar is, zal het blijken vals. Dus we de staat ingesteld van true in false. Als het onwaar is, zullen we instellen false in true. 

Gewoon merken dat we op en krijg iets anders, en dus laten we proberen dit. Bada Bing, kijk naar dit. De flip-knop zal nu Schakel de voorkant aan de staat terug. 

En dus hier is waar zie je een beetje van de magie van React. Zoals we nooit verteld dat hij opnieuw te maken. We hebben nooit verteld dat het iets te herschrijven. Als je dit doet zonder React, zou je to-- hebben als wanneer de flip-knop wordt geklikt, je zou hebben om het te vertellen aan handmatig opnieuw te maken, toch? 

Reageer is echt cool in dat als je geef het een bepaalde staat en eigenschappen, het zal altijd te maken precies hetzelfde. En dus toen we ooit veranderen we de staat en de eigenschappen, reageer gewoon opnieuw maakt de hele zaak. Het weet dat er een één-op-één relatie tussen staat en parameter en HTML. Dus wanneer een van deze veranderingen door via een set staat, het zal veranderen de manier waarop de pay opnieuw wordt gerenderd. En dus in principe React is als voor u klaar om te veranderen. 

Wanneer het iets verandert, het zal opnieuw maken van de hele pagina. En als het klinkt inefficiënt, het is omdat het zou zijn, maar reageren maakt gebruik van een zaak een zogenaamde Shadow DOM. In plaats van de pagina direct tekenen, is houdt de virtuele HTML boom in het geheugen. 

Je weet wel, HTML is als een boom, als een hiërarchische gegevensstructuur. Het houdt een nep-boom in het geheugen, en wanneer u de pagina bij te werken, het zal nog een nep te trekken boom, en het zal berekenen Wat verandert het nodig heeft om het te maken pagina om de twee bomen gelijk te maken. Dus eigenlijk, het vrijwel opnieuw maakt veel. En dan graag alleen verandert het pagina in kleine tweaks als nodig is, dus het is zeer, zeer, zeer efficiënt. 

Dus eigenlijk Reageer zal wanneer je iets te veranderen, het zal opnieuw maken de pagina virtueel. Het zal uitzoeken wat heb ik nodig om veranderen om de echte pagina te reflecteren de virtuele pagina, en het zal dat doen. Dat is de virtuele DOM. Het is een van de grootste gebruik van React. 

Slaat dat ergens op? Nog vragen? Ja? 

PUBLIEK: Hoe werkt nog steeds te vergelijken met de MVC dat hebben we gesproken over voordat zoals middelen. 

NEEL MEHTA: Ja, de vraag is hoe werkt het te vergelijken met MVC? Je vroeg over bronnen. Nou, laten we praten over hoe het functioneert. 

In MVC, zou je het model te werken. In dit geval zouden we een kaart model hebben. Het uitzicht zou hebben flip-knop, en de besturing zou flip functie. Dus het uitzicht zou vertellen controller flip flip. Flip zouden vertellen de model te veranderen, toch? 

En dus wanneer u een MVC, u luisteren naar het model te veranderen, en je re-maken het uitzicht dienovereenkomstig. Of je hoeft alleen te willen de controller. Wacht tot het model te veranderen, en dan kiezen een deel van als een ding veranderen. Hier hebben we een ding, maar in een grote app, je moet willen herinneren wat de wijziging in elke plaats, dus het is een beetje vervelend. En zo React is mooi omdat het een Shadow Dom. Het zich kan veroorloven om gewoon herschrijven van de hele zaak. Je hoeft niet selectief te zoals raden wat bij te werken. 

Op Facebook als je wilt krijgt een nieuw bericht, in MVC, je zou moeten onthouden, OK, veranderen de dingen aan de bovenkant van de pagina, het pictogram bericht. Pop ook een nieuw venster aan de onderkant. Maken ook een nieuw ding in dat venster. Spelen ook een geluid. 

Dat is een heleboel dingen uitgaan tegelijkertijd. En dus als je dat niet doet hebben een Shadow Dom, zou je moet dat handmatig doen, omdat je kunt niet te ontdoen van de hele pagina. U kunt zich niet veroorloven om, dus je hebt elk ding handmatig te wijzigen, dat is echt vervelend in MVC. 

Dus om te zuinig, zij selectief actualiseren van de pagina, die is efficiënt, maar ook vervelend. In React, vanwege de schaduw Dom, beide dingen krijg je gratis. Het is efficiënter omdat van de Schaduw Dom. De bottleneck is het updaten van de pagina. Het is niet te doen de boom manipulatie. U krijgt van de efficiëntie. U krijgt ook het gebruiksgemak, omdat als je gewoon de hele pagina te herschrijven, maar je weet gewoon, oke, de dingen zullen worden op de pagina ergens. Het is misschien op een andere plaats, maar het gaat om op de pagina, toch? Dus je gewoon opnieuw gerenderd het hele ding vrijwel, en u misschien een paar te maken veranderingen in de pagina zelf. 

Dus nogmaals, in MVC u zou moeten kiezen tussen gebruiksgemak en efficiency, en React, u beiden te krijgen. Dus het is beter. Zin? Solide. 

OK, dus laten we eens kijken laten we praten een beetje over stap 4, hoe we kunnen componenten insluiten. Dus hebben we nu dit recht. We hebben onze koele kleine knop. We kunnen spiegelen heen en uit, en dat is alles wat het doet. Laten we zeggen dat we willen hebben een ander component. Laten we zeggen dat onze flashcard app moet bevat een lijst van alle kaarten die je hebt, dus dat betekent dat we moet een andere component. Nou, misschien noemen het een lijstweergave. Laten we een lijstweergave dat bestaat naast de CardView, en deze lijst bekijken en CardView samen willen werken. En je kunt ze combineren om onze app voor u maken. 

Dus eerst, laten we een paar kaarten rechts. Laten we zeggen, welke kaarten? En net zo hoef ik niet te vervelen met het typen van het in, Ik ga gewoon om het te kopiëren vanaf hier. En dus ga ik niet geef het slechts een kaart. Ik ga om het te geven een reeks van kaarten. Dus eerst de apps gaat breken voor nu. Oké, dus we gaan maken dit staat om meerdere kaarten te behandelen. Dus eerst, we gaan om het te geven, niet slechts één kaart, maar een reeks van kaarten, zoals een lijst met kaarten. En in dit geval, hebben we drie van hen. 

Oké, dus zo app gaat om een ​​lijst kaarten te krijgen, en het gaat om te beslissen welke men zien aan de CardView. De CardView alleen kan maken een kaart, maar de app krijgt een lijst van alle kaarten, toch? 

Dus als je erachter één card te geven aan CardView, hoe zou je denk dat je zou kunnen om een ​​beslissing te nemen over welke kaart laten zien? Om je een hint te geven, het is tijdelijk U zult het bekijken van een bepaalde kaart. Als u de pagina te verversen, kunt u gewoon terug naar de eerste kaart te gaan. Dat is OK, want het is tijdelijk. Welke techniek kunnen we gebruiken? 

Publiek: Je kan een variabele maken dus net zoals je had front. Is dit waar, je kon hebben huidige kaart is gelijk aan 1? 

NEEL MEHTA: Ja, dus we willen de staat, toch? Je zou de staat te gebruiken in de component te achterhalen welke kaart willen we krijgen. Zoals we hebben een lijst van alle kaarten, we Gebruik staat om erachter te komen een van de eerste kaart, tweede kaart, derde kaart, enzovoort. 

Dus een app dus een app zal krijgen hebben de getInitialState functie, getInitialState functie terug. En we zullen gewoon zeggen activeIndex 0. Dus nu onze app heeft een eigen staat. 

En dus nu op te maken, om erachter te komen een kaart, laten we gewoon gaan naar de matrix en pak het ding in die index. Selecteer kaart gelijke this.props.cards this.state.activeIndex. Dus zoals je hier ziet, de rekwisieten en de staat daadwerkelijk samenwerken. Dus nu hebben we onze ActiveCard, we noemen het ActiveCard, en laten we zien of dit werkt. [ONHOORBAAR] 

Oh, dat was een tekst fout. Ah. 

Koele, yep, dus nu terug waren we naar waar we eerder waren, toch? Dezelfde oude programma, met uitzondering nu kunnen we ondersteunen een lijst van kaarten, niet alleen één kaart. En nu, nogmaals, als we veranderen de activeIndex, kunnen we 0-1, en nu die tweede kaart, en dan gingen we naar 0. Dus hier is een nieuwe opgevoerde versie van onze. 

OK, dus laten we nu hebben een lijstweergave dat toont alle kaarten in je programma, dus we zullen een nieuwe te maken component genaamd lijstweergave. Laat listview gelijk react.createClass. Dus we willen een ongeordende maken een lijst met een lijst punt voor elke kaart. En dus hebben we een bos van kaarten. We willen een item in de lijst voor elke kaart, toch? We konden doen een lus of iets om een ​​nieuw item in de lijst te maken. Maar de manier waarop je het doet in Reageert, gebruik dan een ding genaamd kaart. Kaart is een instrument of een functie die u gebruikt dat voor elk item, loopt een functie, neemt return waarde, en geeft je die terug. 

Dus als voorbeeld, hebben we de array 1, 2, 3.map function-- en dit is een afkorting voor function-- x pijl x keer x. Dit zegt, voor elk nummer in 1, 2, 3, neem het. Vierkant, en geef het terug. Dus wat denk je 1, 2, 3.map x gaat naar x keer x geeft je terug gegeven dat deze functie uitgevoerd op elk element van de matrix. 

Publiek: 1, 4, 9? 

NEEL MEHTA: Yep, 1, 4, 9 omdat je 1 keer 1. Dat geeft je een. Dat is het eerste element. 

2 keer 2 is 4. Dat is een tweede element. 3 keer 3 is 9. Dat is een derde element. Zin? Dus kaart heeft een techniek die u Gebruik in functionele programmeurs, de nieuwe stijl van programmeren om iets te doen om elk element in de lijst. En dus dit klinkt bekend. We hebben een lijst met kaarten. We willen een item in de lijst voor elke te krijgen een, dus zullen we gewoon gebruik maken van de kaart hier. We zullen zeggen, laat de lijst gelijken this.props, kaarten, kaart. 

En zo krijgt een kaart, we zijn gaan naar een item in de lijst te genereren met dat card inhoud kant ervan. Laten we zeggen dat we willen om uit te geven de kaarten vragen zo card.question. Deze lijst bevat dus een reeks van LI of Lijst Artikelen waar er een lijst punt voor elke kaart, en dat bevat kaarten vraag. Zin? 

Cool, dus laten we nu eigenlijk afgedrukt dat uit. Dus we zullen een ul terugkeren. Binnen dat ongeordende lijst, we zullen gewoon de hele lijst plakken dat ze ons gaven. Koel. 

Oké, dus nu dit lijstweergave werkt net te vinden. Heeft u vragen over de lijstweergave? Heb je een heleboel kaarten. Je maakt een item in de lijst voor elke kaart. En je zet ze in een ongeordende lijst en je het terug te geven. Dus laten we nu handelen, zodat we insluiten dit binnenkant van onze app, dus we kunnen dit doen, lijstweergave. Wat argument kunnen we overgaan naar de lijst bekijken? Welke eigenschappen geven we het? Vergeet niet, als u het een bos van kaarten, het zal de lijst te maken bekijken van die kaarten. Dus wat zouden we voorbij hier als argument? PUBLIEK: Een lijst van de kaarten? NEEL MEHTA: Ja, dus kaarten evenaart this.props.cards, toch? En dus is de enige probleem is dat je kunt alleen draaide een top-level element in te maken, dus je hebt om het te verpakken in een div. Het is raar. Dus laten we zien of dat. Werkt dat? 

Yep, daar ga je. Dus nu hebben we een lijst kaarten onderaan, en dan hebben we onze CardView zich op de top, en dat zal tussen flip de twee kanten van de kaart. Nu doet dat zinvol hoe ik dat deed? Ja, dus nogmaals, we hebben twee componenten. De eerste component prints op elke kaart in de lijst. Dat is de lijstweergave. En de tweede component drukt gewoon die kaart. Als je het een bepaalde kaart, het zal afdrukken informatie over die kaart en laat u heen en weer te spiegelen. 

Dus als we willen, kunnen we proberen en praten over het toevoegen van een aantal nieuwe functies bij. Anders kunnen we een beetje meer praten over de snelheid van reactor, of we kunnen beantwoorden vragen die u zou kunnen hebben omdat dit alle kerndelen van reageren die ik over wil praten. We kunnen gaan. We kunnen vragen te beantwoorden. Wat je maar wil. 

Publiek: Kunt u gebruik maken van JSX in normale JavaScript? Of is dat iets dat kwam met de [onhoorbaar] 

NEEL MEHTA: De vraag is kan u JSX gebruiken met een normale JavaScript? Het antwoord is ja. JSX is gewoon een manier van het neemt je JavaScript die HTML heeft binnenkant van het, en het stelt in dat JavaScript HTML hoeft niet erin. Zo merkt dat-- zo merkt hier. Dit ziet eruit als je als div en heb je spullen erin. 

Dat stelt dat JavaScript zoals genereert hetzelfde. Ik denk dat wat ik zeg is dat JSX is slechts een syntactische, zoals het is een preprocessor voor JavaScript veel zoals PHP is een preprocessor voor HTML. JSC is een preprocessor voor JavaScript waarmee je HTML binnenkant van uw JavaScript. En dus als je de juiste transformator dat is een ding genaamd [onhoorbaar] die zal transformeren. De juiste preprocessor, het zal u laten doen. 

PUBLIEK: [onverstaanbaar] NEEL MEHTA: Meestal heb je niet nodig HTML binnenkant van JavaScript zetten tenzij je doet reageren. Maar je kunt het toch te doen. Yep? 

Publiek: Ik denk dat je had beschreven Reageer als een functionele programmeertaal. We hebben geleerd C in CS50. C is ook een functionele taal? NEEL MEHTA: Dus de vraag gaat over functionele versus een ander ding heet imperatief of procedurele programmering. Er zijn twee soorten programma's populair. Een procedurele genoemd, die is alles over als het doen van opdrachten, en één functioneel, waarbij alles over het hebben van functies en met input en output van deze. React is een functionele paradigma. C is een procedure paradigma. 

En als een voorbeeld, C bijvoorbeeld, je dit niet declaratieve manier te doen van het maken van het programma, toch? Je te zeggen hebt, afdrukken. Wijzig deze datastructuur. Print dit. Het draait allemaal om commando's. 

In React, is er niet dat veel opdrachten. Het draait allemaal om het hebben onderdelen die u samen te stellen. Ze zijn als functies. Je hebt als een functie genaamd CardView, dat een functie dat heeft input, output, en zo React is alles over deze filosofie ons van having-- je gegevens. U passeert het door deze algoritme, en het zal uitgang HTML dat u gewoon gedrukte pagina, en dus je moet bouwen stuk voor stuk. 

Dus om een ​​metafoor te tekenen wat Ik al eerder zei, je weet hoe op Facebook als je een bericht krijgt, en u kiezen welke onderdelen bij te werken, dat is de procedure. Het is noodzakelijk, toch? OK, ik heb een boodschap. Laten we veranderen daar rekening. 

Laten we pop een raam hier. Laten we veranderen daar rekening. Laten we trekken deze hier. Dat is een procedurele aanpak. 

Dat is wat dingen zoals hoekig, Boost, Backbone, andere frameworks te gebruiken. React is functioneel. Het is een heel andere manier van denken over dingen. Het duurt dit idee van laten we eens functies of algoritmen die zal u geef het data. Het zal spugen wat het moet zijn en de computer zal zorg dragen voor het wegen uit. Je hoeft het niet aan jezelf. Maakt dat een klein beetje verstand? Ja? 

PUBLIEK: In een functionele taal, alles gebeurt in een keer? 

NEEL MEHTA: Nee, dingen gebeuren in orde. Zoals hier is er nog bestellen, maar het doet niet gebeuren om van soortgelijke beveel, commando, commando. Het gebeurt in de volgorde van functie geeft je de uitgang. Zet dat in een andere functie. Zet dat in een andere functie, andere functie. 

Als je dat doet CS51, zult u leren functionele programma's een beetje buiten de werkingssfeer van deze. Maar in principe, wat maakt Reageer cool is niet alleen de one-way datastroom en de virtuele Dom, maar ook dit idee functioneel programmeren. En functioneel programmeren is zeer eenvoudig componeren en maak coole dingen uit, en het is heel gemakkelijk om te denken over en reden over. Dus het is een goede loting van React. Nog meer vragen? Ja? 

PUBLIEK: Um, waarom zou je gebruik laat in tegenstelling tot var? 

NEEL MEHTA: Dus de vraag is Waarom gebruiken jullie laten in plaats van var? Dit is een ding heet ES6 of ECMAScript 6. Het is de nieuwe versie van JavaScript. Er is een heleboel technische redenen, maar let is een betere versie van var. 

Het is hoe verklaart u variabelen. U kunt laten. U kunt gebruik maken var. Laten heeft een heleboel technische reasons-- je ze kunt kijken up later-- waarom het beter is. Kortom, ES6 heeft een aantal leuke nieuwe syntaxis, een aantal nieuwe functies op de top van de oude JavaScript. 

Dus we hebben net vijf minuten. Ik wilde alleen maar om te praten over één ding echt snel. Mocht u nog vragen hebben, laten we praten over het na dit. Maar dus dit krijgt gevangen op de camera, ik heb net wil een beetje over hoe je praat daadwerkelijk gebruik maken van React in uw apps. 

Als je hier te gaan, Facebook.GitHub.IO/react, Dit is de startpagina voor React, en het zal je laten zien hoe je daadwerkelijk gebruik Reageren op uw pagina's. Kortom, het is een beetje ingewikkelde probeert te installeren React. Het is niet zo makkelijk als je gewoon slepen en drop een JavaScript in. 

Je moet je transformator opgericht, die zal, zoals voorheen, zet je JSX in de normale JavaScript. Je moet wat zult compileren u ES6 normaal. Javascript is er veel van het verplaatsen onderdelen die u hoeft te doen, dus er is een ding riep Yeoman, Yeoman.io. En dit is een command-line tool dat zal u helpen steiger uw Reageer projecten gemakkelijk. 

Dus je kunt lezen over deze later, maar er zijn enkele gereedschappen dat Yeoman biedt. Ze zullen u laten maken een Reageer app met alles ingebouwd. Zoals het zal hebben gebouwd in, componenten ingebouwd. Het zal uw transformator ingebouwd. Ze hebben veel coole stuff ingebouwde automatisch met behulp van deze dingen genoemd generatoren. 

Dus lees over dit als je wilt. Ga gewoon op Yeoman, Y-E-O-M-A-N, en u kunt generatoren als deze te vinden. En met generatoren als deze, je net als een is een paar command line opdrachten. Het zal uit een steiger Reageer gehele app voor je. Het zal allemaal de handleiding leidingen te krijgen, en het zware werk voor u gedaan, en dit is waarom je alleen richten op slechts schrijven in React. 

Dus in principe de bouw van een Reageer app is triviaal. Het is allemaal samen bedraad, maar er zijn tools die het voor je doen. Dus als je wilt om een ​​Reageer app, probeer het zo te doen. Als je gewoon wilt om te experimenteren, kunt u proberen met behulp van deze CodePen want dit heeft CodePen alle reageren bedrading. Ik heb al het werk voor u al. 

Dus als je wilt maken als een productie vrij te geven Reageer app, probeer dan een van deze generatoren. Als je gewoon wilt spelen rond, het is vaak de moeite waard gewoon zoals proberen te spelen rond op CodePen hier. Klinkt goed? Koel. 

Dus dat is alles wat ik heb. Nogmaals, alle code en voorbeelden gaat worden op deze website hier. Dus nogmaals, we niet praten over veel syntax van React, maar om al die vinden weinig syntactische details het is allemaal beschikbaar zijn op deze website hier. 

Dus ik zou aanraden als neem de eerste stap. Zet het in je CodePen. Probeer werken aan het maken het aan de tweede stap. Er is een vierde stap, en net zien waar je van dat. 

Nog meer vragen, check dat pagina of e-mail me. Dat is mijn e-mail. Maar ik zou graag om u te helpen met eventuele vragen die u zou kunnen hebben over reageren. Dus, yep, dat is alles wat ik heb. Ik dank u allen hartelijk voor kijken of voor het bijwonen. En ik zal vragen te nemen je zou nu na deze te hebben. Dus dank u allen voor het kijken.