[მუსიკის დაკვრა] 

NEEL Mehta: აქ მიდის. 

ისე, ყველას, კეთილი apps მომავალს რეაგირებას. ეს არის CS50. ჩემი სახელი არის Neel. მე TA for CS50 და მეორე ჰარვარდის კოლეჯი და ძალიან, ძალიან ვნებიანი ვებ დეველოპერი. ასე რომ, მე ძალიან საინტერესო უნდა საუბარი დღეს, თუ თქვენ აქ ან სახლში ყურება, დაახლოებით რეაგირებას, რომელიც, კიდევ ერთხელ როგორც ვთქვი, მომავალი ვებ apps. 

ასე რომ, რეაგირებას არის ვებ ფარგლებში. და როგორც მე ვეუბნებოდი ზოგიერთი ადამიანი აქ, ჩარჩო არის მხოლოდ კომპლექტი ინსტრუმენტები შეგიძლიათ გამოიყენოთ სტრუქტურა და ავაშენოთ თქვენი ვებ app. და ვებ apps არიან, კიდევ ერთხელ, საიტები რომ არის ინტერაქტიული, როგორიცაა Facebook, Twitter.com, Instagram.com, რასაც. 

ასე რომ, Facebook არის ვებ ფარგლებში რომელიც შეიქმნა Facebook რამდენიმე წლის back-- რეაგირებას არის. ეს მას შემდეგ, რაც გამოყენებულ იქნა Facebook- ის მობილური პროგრამები და web app, Instagram. ხანის აკადემია სხვა ცნობილი ადრეული adopter რეაგირებას. 

ეს მართლაც მიღების ძალიან პოპულარულია. თუ თქვენ ოდესმე გამოიყენოთ რამ, როგორიცაა კუთხოვანი ან ხერხემალი, ეს არის ერთი ოჯახის, მაგრამ ეს მას შემდეგ, რაც დღემდე გაუსწროს მათი პოპულარობა. ეს არის ცხელი ახალი რამ. მართლაც, ძალიან დიდი. 

ასე რომ, რეაგირებას კარგია არა მხოლოდ როგორც ვებ ფარგლებში სამშენებლო ინტერფეისი. კარგია, მშენებლობის ვებ ინტერფეისი. არსებობს ასევე რამ მოუწოდა რეაგირებას მშობლიური რომელიც საშუალებას გაძლევთ შექმნათ ინტერფეისი for Android და iOS და შესაძლოა სხვა პლატფორმების მომავალი გამოყენებით მხოლოდ იგივე JavaScript კოდი. თქვენ შეგიძლიათ გამოიყენოთ ზუსტად იგივე JavaScript კოდი გაწევა საიტებზე, უნდა გაუწიოს Android apps და iOS apps. 

ეს არის ძალიან, ძალიან საინტერესო დროს. ეს მართლაც, მართლაც მაგარი შესაძლებლობა. ეს მართლაც უნივერსალური ვებ ინტერფეისი განვითარების ინსტრუმენტი, ასე რომ, ეს ძალიან, ძალიან მთავარია იცოდეთ. და, როგორც მე ვეუბნებოდი ხალხს ადრე, ეს, ვფიქრობ, შეიცვლება, თუ როგორ ავაშენოთ ვებ apps სამუდამოდ. ასე რომ, ეს შეიძლება ცოტა hyperbole, მაგრამ მე ვფიქრობ, რომ ეს არის საკმაოდ კარგი რამ ვიცი. 

OK, ასე რომ, რა არის რეაგირებას? რეაგირებას არის ჩარჩო შეგიძლიათ გამოყენება მშენებლობის ინტერფეისი. ინტერფეისი არის, კიდევ ერთხელ, ვებ გვერდი, არა? ასე რომ, აქ Instagram.com, გამოყენების ფაქტზე რეაგირებას. 

რეაგირებას აგებული იდეა კომპონენტები. კომპონენტი არის HTML ელემენტის შესახებ სტეროიდების, ასე ელემენტი ჰგავს ღილაკს. ეს პუნქტი. ეს არის header, არა? და Instagram გამოიყენებს ამ, მაგრამ ეს ასევე გამოიყენოთ კომპონენტების რეაგირებას. 

რეაგირებას კომპონენტები souped-up HTML ელემენტები რომ აქვს საკუთარი ქცევის შეიცავს მათ. ასე რომ, როგორც, მაგალითად, ჩვენ შეგვეძლო დროის ელემენტს, დრო კომპონენტი, რომელიც შეიცავს, როგორებიცაა დროის შტამპი, თქვენ იცით, ნახვა კომპონენტი, რომელიც შეიცავს ნახვა სურათი და იმ პირის დასახელება. მას შეუძლია, როგორც counter, რომელიც შეგიძლიათ იმედი, როგორც რაოდენობის მოსწონს, და თუ თქვენ დააჭირეთ მასზე, იგი ყველაფერს რაოდენობის გაზრდა მოსწონს. კომპონენტი არის მხოლოდ bunch of HTML კოდი, რომელიც აქვს რამდენიმე ფუნქცია გახვეული შიგნით მას. ასე რომ, როგორც ელემენტი სტეროიდებზე, როგორც ვთქვი. თქვენ შეუძლია ამ კომპონენტს, და თქვენ შეგიძლიათ განათავსოთ მათ ერთად რათა ახალი კომპონენტები, ამ შემთხვევაში, პოსტ კომპონენტი, რომელიც შეიცავს ყველა ამ პერსონალის. ეს იქნებოდა შეიცავდეს დრო, პროფილი, LikeCounter, იქნებ კომენტარის დამატება და შესაძლოა იმიჯი თავად. ასე რომ, ვებ apps უბრალოდ აშენებული აღების კომპონენტები და აყენებს მათ ერთად. Instagram feed, მეტი არაფერი რამოდენიმე ფორუმზე ერთმანეთის მიყოლებით, ყოველი ჩანაწერი შეიცავს, როგორიცაა დრო, პროფილი, LikeCounter, და ასე შემდეგ. ეს არის სახის როგორც მშენებლობის სახლში. თქვენ არ აშენება სახლი ზემოდან ქვემოთ. თქვენ მიიღოს კომპონენტები თქვენ მიიღოს, როგორც აბაზანა. თქვენ მიიღოს bedroom-- თქვენ გამყარებაში მათი ერთად, და თქვენ გაქვთ ახალი კომპონენტი. თქვენ გაქვთ ახალი ნაწილი სახლში. 

ასე რომ რეაგირება ყველაფერი აგებულია გარშემო ამ იდეის კომპონენტები, არის ინტერაქტიული, რომ დეკლარაციული. ისევე როგორც თქვენ, უბრალოდ, ვამბობთ, რა ნახვა, და ეს უწევს მას. ისინი composable. თქვენ შეგიძლიათ მიიღოს დრო და ნახვა, დააყენა მათ ერთად, რათა რაღაც უკეთესი. და ისინი reusable, ასე რომ, თუ თქვენ კოდის პოსტი, თქვენ შეიძლება embed რომ არსად. 

შეგიძლიათ ხმა Instagram რამ თქვენს საკუთარ საიტზე. თქვენ შეგიძლიათ ხმა Facebook, მაგალითად, რადგან იგი იყენებს რეაგირებას ისევე. ასე რომ, კომპონენტები ნამდვილად, ნამდვილად, ნამდვილად ძლიერი სამშენებლო ბლოკები ვებ რომელიც შეიძლება გამოყენებულ იქნას ნებისმიერ წერტილში და ერთად, რათა ახალი შენობა ბლოკად. ეს არის ძალიან, ძალიან მაღალი დონის მიმოხილვა. ასე რომ, კიდევ ერთხელ, თუ თქვენ გაქვთ ნებისმიერი კითხვები ნებისმიერ წერტილში ფილოსოფია რეაქტორი, რომ კოდირება, შეწყვიტოს ჩემთვის, და ნება მომეცით ვიცი. 

OK, ასე რომ რეაგირება არის მაგარი, რადგან ეს აქვს სხვადასხვა გზას ეძებს განთავსებულია როგორ უნდა შექმნათ ვებ apps. თქვენ ალბათ მსმენია MVC, რომელიც მოდელი თქვენ კონტროლი CS50 ან რასაც სხვა საცდელი კლასი გამოიყენოთ. და ყველაზე ჩარჩოები აგებულია იდეა MVC. რეაგირებას არ არის. რეაგირება აგებულია იდეა საქართველოს ერთფუძიანი მონაცემების ნაკადი როგორც ჩანს ეს სქემა ან გრაფიკული აქ. 

ძირითადად, თქვენ გაქვთ მონაცემთა წყარო. და მონაცემთა წყარო გადაწყვეტს, როგორ ჩაუყარა out გარკვეული კომპონენტები. და კომპონენტები მაშინ, როდესაც ისინი ცვლიან, ისინი გეტყვით მონაცემთა წყარო შეიცვალოს. 

იმისათვის, რომ გამოიყენოთ Instagram მაგალითად, თქვენ შეიძლება ჰქონდეს სია პოსტი ობიექტების, როგორიცაა მონაცემთა ბაზაში ან რამე. ეს მონაცემები. და მაშინ ჩვენი პოსტ კომპონენტები მიიღებს, რომ მონაცემები, და გამოიყენოს, რომ მონაცემები გაწევა რამ ეკრანზე. ეს არის ის, რაც arrow საწყისი მონაცემების კომპონენტი, და მერე რომ იგივე მონაცემები გამოიყენება გამოიტანოს bunch of კომპონენტები. 

In Facebook Messenger, for მაგალითად, რომელიც რეაგირებას, ალბათ სია შეტყობინებები როგორც თქვენი მონაცემთა წყარო. და რომ გაუწიოს არა მხოლოდ სიაში შეტყობინებები არამედ მეგობრების სიაში გაქვთ. თქვენ გაქვთ წაუკითხავი რაოდენობა. შესაძლოა ასევე გაუწიოს Facebook რამ რომ არის ბოლოში Facebook.com. იგივე მონაცემები არის ერთი წყარო სიმართლე და რომელიც იწვევს ბევრი კომპონენტები გასაწევი. და როდესაც ერთ-ერთი იმ კომპონენტები იცვლება, იგი მიდის უკან და ცვლის მონაცემთა წყარო. 

თქვენ გაგზავნა, უფლება? რომელიც ცვლის მონაცემთა წყარო. თქვენ წავიკითხე თქვენი შეტყობინებები, ასე რომ თქვენ მითითებული წაუკითხავ 0. რომელიც ცვლის მონაცემთა წყარო. და შენიშნავს, რომ ყველა ეს ერთ-ერთი arrow ბრუნდება იგივე მონაცემები წყარო, ასე რომ თქვენ იცით, მოცემული გარკვეული მონაცემები კომპლექტი, თქვენ იცით ზუსტად რა გვერდზე აპირებს გამოიყურებოდეს. ეს დეტერმინისტული. თქვენ იცით, რომ მოცემული გარკვეული მონაცემები, რასაც გვერდის აპირებს გამოიყურებოდეს. თქვენ შეგიძლიათ პროგნოზირება, თუ როგორ აპირებს მოიქცეს და როგორ ვაპირებთ მუშაობა, როდესაც ისინი ერთად. 

და თუ მე მქონდა მილიონი კომპონენტები აქ, ეს იქნებოდა მოიქცევა იგივე, არა? თქვენ არ გაქვთ რაიმე უცნაური კავშირები. ერთი მონაცემების გაწეული მილიონი კომპონენტები. მილიონი კომპონენტები შეიძლება უკან და შეცვალონ მონაცემები. ასე რომ, ეს არის ძალიან ლამაზი. ჩვენ ვაშენებთ composable, ადვილად scalable ვებ apps. 

თქვენ გაქვთ ერთი მონაცემთა წყარო, წყარო სიმართლე. ეუბნება, რომ თქვენი კომპონენტები როგორ ჩაუყარა out გვერდზე, და კომპონენტები გაუმკლავდეს ურთიერთქმედება. და თუ მათ სურთ, რომ შეიცვალოს რამ, უბრალოდ დაბრუნდეს და ვუთხრა მონაცემთა წყარო შეიცვალოს. აზრი? ასე რომ, რეაგირებას არის ყველაფერი გაგება როგორ უნდა ავაშენოთ კომპონენტი და როგორ უნდა გააკეთოს თქვენი კომპონენტი ურთიერთქმედება გარე სამყაროსთან. 

მიღების კომპონენტის ურთიერთქმედება გარე სამყაროსთან იყენებს სხვა ტექნიკა მოუწოდა Flux, რომელიც არის ჩარჩო, რომელიც დამატებული თავზე რეაგირებას. ჩვენ არ ვაპირებთ ვისაუბროთ. ჩვენ ვაპირებთ, რომ გაიგო უფრო მეტი, იმის გათვალისწინებით, მონაცემები, თუ როგორ შეგიძლიათ გაწევა კომპონენტი? 

ასე რომ, რეაგირებას მართლაც მაგარი იმიტომ, რომ თქვენ შეგიძლიათ გამოიყენოთ იგი ნებისმიერი უკან ბოლომდე გსურთ. თუ თქვენ გაქვთ, როგორიცაა Python უკან ბოლოს, თუ თქვენი Python შეგიძლიათ შამფურზე ზოგიერთი მონაცემებით, რეაგირებას შეუძლია გაუწიოს მას. თუ თქვენ არ JS შედეგები მონაცემები, რეაგირებას უწევს მას. Ruby ლიანდაგზე ერთად მონაცემები, რეაგირებას უწევს მას. 

ასე რომ, რეაგირებას ძირითადად ვებ view-- წინა ბოლომდე კომპონენტები ნებისმიერი მონაცემთა წყარო განაწილებაზე. ასე რომ აპირებს მონაცემთა წყარო რეაგირება კომპონენტები საკმაოდ მარტივია. მიდიოდა სხვა გზა არის ცოტა რთული. რომელიც იყენებს Flux როგორც ვთქვი ადრე. ჩვენ არ მოხვდება, რომ. ჩვენ ფოკუსირება უფრო მონაცემთა to-კომპონენტი მხარეს. ამ გზით თქვენ შეგიძლიათ, რათა cool, fun ვებ apps. ეს გავლენას არ მოახდენს გარე სამყაროსთან ახლა, მაგრამ ეს კიდევ ერთი ამბავი. 

OK, ასე რომ, თუ თქვენ აქ ჩემი ბოლო სემინარი თქვენ იცით, რომ ყველა კოდი დღევანდელი განხილვა იქნება ამ URL- აქ, ვწუხვარ, რომ ეს URL აქ. და ძირითადად ჩვენ ვაპირებთ წასვლა ოთხი ნაბიჯი, შესაძლოა, ხუთ, ალბათ, არ ხუთ. ჩვენ გადაადგილება მეშვეობით ოთხი ნაბიჯები მშენებლობის ნიმუში რეაგირებას app. ასე რომ, ყველა კოდის ყოველ ნაბიჯზე გზა იქნება აქ, ასე რომ, თუ თქვენ შემდეგ გასწვრივ სახლში, მოგერიდებათ peruse ეს კოდი. თუ თქვენ შემდეგ გასწვრივ აქ, ჩვენ უნდა გვიჩვენებს, რომ ეკრანზე, ასე რომ არ ინერვიულოთ შესახებ. მაგრამ თუ თქვენ სახლში, ვგრძნობ უფასო ეწვევა ამ ნახვა. და ჰო, თქვენ უნდა შეეძლოს მიიღოს ყველა კოდი ნეტავ ოდესმე უნდა აქ. ასე რომ, ეს არის კარგი cheat ფურცელი, ისევე თქვენი მომავალი თავგადასავლები რეაგირებას. ზემოთ, ასე რომ, თუ ყველას, ვინც აქ, და მაშინაც კი, თუ თქვენ სახლში, დახევის up ამ ნახვა, is.gd/cs50react, კაპიტალის, არ ხაზგასმა, არც არაფერი. 

თქვენ ნახავთ, გვერდი, რომელიც გამოიყურება ცოტა მოსწონს ეს. ეს არის რამ მოუწოდა CodePen. CodePen არის ერთობლივი კოდების გარემოში რომელიც მე შეგიძლიათ დაწეროთ კოდი აქ, და ეს იქნება ავტომატურად გაიგზავნება თქვენ. და ამ გზით, შემიძლია წერა კოდი. შემიძლია აწარმოებს კოდი აქ. 

იყიდება მაგალითად და თუ ეს reloads-- ვხედავ, მე გაშვებული JavaScript კოდი გვერდზე სწორედ აქ, და იგი ყველაფერს ავტომატურად გაწევა ვებ გვერდზე ამ JavaScript კოდი. ასე რომ, ეს არის გზა ჩვენთვის ვცდილობთ out კოდი მართლაც სწრაფი გარეშე გამოყენება ჩვენი ID ან გამოიყენოთ ჩვენი ადგილობრივი მანქანა ან რასაც. ეს არის ძალიან სწრაფი გზა, რომ თქვენ mockup და შეამოწმოთ სხვადასხვა სახის კოდი. 

ამიტომ, მე ვაპირებ, აღების მაგალითად კოდი, აყენებს მას აქ. ჩვენ ვაპირებთ, რომ სამუშაო მეშვეობით. და თუ თქვენ სახლში, შეგიძლიათ დახევის ეს ასევე. და მე უკვე დაყენებული რეაგირებას აქ, ასე რომ თქვენ მხოლოდ დაწეროთ თქვენი კოდი აქ, და თავიდან, როგორც საკუთარი სპორტული მოედანი. 

ჰო, თუ ყველას გახსენით ეს ბმული აქ. გთხოვთ მაძლევს ოქტომბერი კიდევ გაქვთ ის გახსნა. Cool, მაგარი მაგარი. არაფერია აქ ახლა, მაგრამ ჩვენ შეიცვლება, რომ ძალიან მალე. 

OK, ასე რომ რეაგირებას არის JavaScript ბიბლიოთეკა, და როგორც ასეთი, მოითხოვს ცოდნა JavaScript, რომელიც არის ვებ პროგრამირების ენაზე. და ის გამოიყენება სხვა რამ ახლა ძალიან, მაგრამ, პირველ რიგში, ვებ განვითარება ენა, ასე რომ, თუ თქვენ ხართ უცხო ერთად , წაიკითხეთ საიტი მოუწოდა JSforCats.com. შესანიშნავია. შეგიძლიათ გაიგოთ JavaScript ნახევარ საათში. ეს არის წარმოუდგენელი. 

ასე რომ ეს წაიკითხა. ჩვენ ასევე არის ბევრი HTML აქ იმიტომ, ჩვენ დიზაინისა ვებ გვერდები, რა თქმა უნდა. ასე რომ, თუ თქვენ იციან HTML, შეამოწმეთ HTMLdog.com. მე ვფიქრობ, რომ სწავლის რეაგირებას არის მილიონი ჯერ ადვილი, თუ თქვენ უკვე ვიცი შენობა ბლოკად. თუ თქვენ გაქვთ კომპონენტები, ის ადვილი, რათა დიდი კომპონენტი. სწორედ რეაგირებას ენის თქვენთვის. 

ასე რომ, წავიდეთ წინ და მისცეს ეს ყველაფერი წაკითხული. პაუზა ამ ვიდეო. მიეცით მას წაკითხული თუ თქვენ ხართ სახლში თუ თქვენ არ ხართ იცნობს HTML და JavaScript OK, ასე რომ, ჩვენ ვაპირებთ არის ჩვენ ვაპირებთ, რათა ძალიან ძირითადი flashcard app გამოყენებით რეაგირებას. ჩვენ ვაპირებთ, რომ აქვს flashcard. თქვენ შეგიძლიათ Flip ბარათი და უკან. და ჩვენ ასევე გვაქვს ჩამონათვალი ყველა ბარათი, რომელიც ჩვენ გვაქვს, და თუ ჩვენ შეგრძნება ამბიციური, ჩვენ შეიძლება შეუძლია გადაერთოთ მანქანა დაწკაპვით მათ. 

მაგრამ ეს არ არის, თქვენი შიშველი ძვლები, ძალიან მარტივი რეაგირებას app. ასე რომ, ეს არის რეალურად არ არის ტრივიალური განხორციელება, მაგრამ ჩვენ ვაპირებთ, რომ, თუ თქვენ , ეს ძალიან, ძალიან ადვილად ვრცელდება ეს თუ სხვა ხალხი დაგეხმაროთ იგი. ამიტომ, ჩვენ ვაპირებთ გავლა ოთხი ნაბიჯები დაწყებული ნულიდან აშენება. 

OK, ასე რომ ოთხი ნაბიჯები, ჩვენ დაიწყოს off ერთად პირველი ნაბიჯი. პირველი ნაბიჯი იქნება მშენებლობის თქვენი პირველი კომპონენტი. როგორც ვთქვი, შემადგენელ რეაგირებას მხოლოდ ელემენტი შესახებ სტეროიდების. ეს განსაზღვრავს HTML და ზოგიერთი საქციელი, და ეს დააკონკრეტა, თუ როგორ ხალხი შეგიძლიათ ურთიერთქმედება ის, თუ როგორ ეს იქნებოდა შიდა სახელმწიფო. Like ღილაკი იციან, რამდენი ჯერ ეს უკვე აირჩიეთ მაგალითად, და ის, თუ როგორ უნდა ქმნის თავად. 

ასე რომ, მოდით წავიდეთ წინ და ავაშენოთ ჩვენი პირველი კომპონენტის გამოყენებით JavaScript. ასე რომ, თუ სინტაქსი გამოიყურება უცნაური, იმიტომ, რომ ეს სახის არის. ასე რომ, კიდევ ერთხელ, ჩვენ ვაპირებთ რათა ცვლადში app გამოყენებით სიტყვით ნება, რაც ცვლადი, მიადევნე App თანაბარი React.createClass. 

რეაგირებას არის ბიბლიოთეკაში და აქვს შექმნა კლასის ფუნქცია. და ეს ფუნქცია ცოტა კოდი, რომ თქვენ შეგიძლიათ შექმნათ ახალი ტიპის რეაგირებას კომპონენტი. ასე რომ, React.createClass რაც კომპონენტი, და ეს კომპონენტი რისი გაკეთება უნდა შეეძლოს პერსონალი. მთავარია, მას შეუძლია გააკეთოს არის გაუწიოს რაღაც, გაწევა როგორც ფუნქცია. 

კიდევ ერთხელ, თუ ეს მაჩვენებელი არ არის აშკარა თქვენ, მე გირჩევთ წასვლა JS კატები და შეამოწმეთ იგი out. ის არის, რომ დაშორება კარგად არის საკმარისი? ზემოთ. 

ასე რომ, ყოველი კომპონენტის საჭიროებების აქვს გამოიტანოს ფუნქცია. გაუწიოს ფუნქცია ამბობს, რა შემიძლია ბეჭდვა ეკრანზე? მაგრამ კომპონენტი აზრი არ აქვს, თუ ის არ იცით, რა უნდა ბეჭდვა ეკრანზე, ისე, თქვენ უნდა გამოიტანოს ფუნქცია. 

ასე რომ, გაწევა რამ, უბრალოდ უნდა დაბრუნდეს HTML. და რა მაგარი ის არის, რომ არსებობს რამ მოუწოდა JSX, რომელიც გაგრძელების JavaScript, რომელიც გამოიყენება რეაგირება. ის მოდით წერთ HTML შიგნით თქვენი JavaScript, რომელიც ხმები უცნაური, როდესაც თქვენ ვიფიქროთ, მაგრამ ის, რაც ბევრი გაგებით შემდეგ. ასე რომ, ჩვენ შეგვიძლია ამის გაკეთება. თუ თქვენ იცნობს HTML, მე ვიცი, ჩვენ გვაქვს div ზოგადი მიზნით კონტეინერი პერსონალი. ჩვენ შეგვიძლია დაბრუნების div და შიგნით ამ div, ჩვენ შეგვიძლია პერსონალი. 

ასე ვთქვათ, ჩვენ გვინდა, რომ გაწევა მხოლოდ სწორი up flashcard ახლა. Flashcard, მე ვიტყოდი, ექნება კითხვა და პასუხი. ასე რომ შიგნით ამ div, მოდით ამობეჭდოთ მუხლის მე რომელიც ამბობს, კითხვა რა არის საბოლოო პასუხი ცხოვრების, სამყაროს? და მაშინ პასუხი იქნება, რა თქმა უნდა, 42. 

ეს არ ამუშავება კარგად ყველა. ჰო, ასე რომ, ძირითადად, თქვენ ნამდვილად წერენ HTML თქვენს JavaScript. და ეს იქნება ბეჭდვითი out შევიდა ეკრანზე. მოდით ცდილობენ მას. 

ასე რომ, ჩვენ გვაქვს ჩვენი კომპონენტი. ჩვენ უნდა ვუთხრათ ეხმაურებიან დააყენა კომპონენტის ეკრანზე ასე React.render, ასე რომ, ჩვენ მკურნალობა app, როგორც ნებისმიერი სხვა ელემენტს. ჩვენ წერენ, როგორც ეს იყო ელემენტი. Like ნაცვლად ამბობს, როგორიცაა img სურათის ან p პუნქტის, წერთ ოთახი, ასე რომ აპლიკაცია არ არის მკურნალობა, როგორც HTML ელემენტს. როგორც ვთქვი, ეს ელემენტს შესახებ სტეროიდების. 

ასე, რომ თქვენ გაწევა ოთახი, და თქვენ მისთვის ადგილი დააყენოს იგი. და ეს არის, თუ როგორ შეგიძლიათ გეტყვით, რომ ეს სად უნდა დააყენოს იგი. მე შევქმენით მარტივი div შესახებ გვერდი სახელწოდებით პირადობის გვერდზე, და რომ ის, სადაც ელემენტს აპირებს. 

და ჩვენ არ ვაპირებთ აწარმოებს HTML. ძირითადად ეს აპირებს ჩასვამ ამ გვერდზე ელემენტს რომ ჩვენ გვაქვს ეკრანზე. ასე რომ ის მუშაობს ეს კოდი და იგი ამახვილებს ამ რამ ეკრანზე, ასე რომ აქ ვართ. ჩვენ მივიღეთ ჩვენი პირველი რეაგირებას კომპონენტი. 

ამიტომ ისევე როგორც Recap, ჩვენ ნაზად გააკეთა ახალი ტიპის კომპონენტი, არა? ეს არის ის, რაც React.createClass. და ამ კომპონენტს, ჩვენ განუცხადა, რომ ის, რაც უნდა გააკეთოს. როდესაც ეს კომპონენტი იყოს დაბეჭდილი გადატანა ეკრანზე, ეს იქნება ამობეჭდოთ div ერთად ორი პუნქტები შიგნით მას. 

და, რაც ჩვენ გავაკეთეთ, ჩვენ მივიღეთ ახალი app გამოყენებით კუთხური ფრჩხილი app ნოტაცია. ჩვენ ვუთხარით, რომ იმისათვის, რომ ეს შიგნით გვერდი ელემენტს. ასე რომ, რა გავაკეთე, რომ ის ახალი აპლიკაცია, რომ თარგი. და მაშინ მე ვუთხარი მას, გაუწიოს მას. ასე რომ, ეს ვუთხარი, app, რა უნდა ამობეჭდოთ? App ამბობს, წასვლა ამობეჭდოთ div ორი პუნქტები შიგნით მას. და voila, იქ ჩვენი div ერთად ორი პუნქტის შიგნით მას. აზრი აქამდე? 

ასე რომ, კიდევ ერთხელ, მთელი გამოწვევა რეაგირებას მხოლოდ იცის, თუ როგორ, რათა კომპონენტები. როგორ განვახორციელოთ კომპონენტები მუშაობა. ახლა, რომ ჩვენ გავაკეთეთ ჩვენი პირველი კომპონენტი, მოდით დავუბრუნდეთ და კომპონენტები დააკონფიგურიროთ. ასე რომ თქვენ იცით, თუ როგორ HTML თქვენ შეუძლია თქვენი ღილაკები კლასი? თქვენ შეუძლია თქვენი წამყვანები href. თქვენ შეუძლია თქვენი საშუალებებით ტიპის, არა? თქვენ შეუძლია უფრო საბაჟო თვისებები ყველა თქვენი ელემენტები რათა ის უფრო საინტერესო. ჩვენ რეალურად შეგვიძლია ამის ზუსტად იგივე რამ. 

ასე ვთქვათ, ჩვენ გვინდა, რომ ჩვენი app წასვლა გამოიტანოს ნებისმიერი ბარათი. ახლა ჩვენ მხოლოდ გაწეული hardcoded ბარათი. ჩვენ ვიცით, რომ არსებობს მხოლოდ ერთი ანკეტა შეუძლია, ამიტომ ჩვენ ვაპირებ ცდილობენ და შეცვალოს ეს ახლა ასე რომ ჩვენ შეგვიძლია მხოლოდ მისცეს მას რამდენიმე ბარათი. ეს თქვენ ამობეჭდოთ ბარათი. 

თქვენ უნდა ვეცადოთ და თქვენი კომპონენტები ძალიან ზოგადი მიზნით. ასე რომ, ეს გზა მე ვერ ელ ეს ჩემი მეგობარი და იყოს, რასაც flashcard გაქვთ, უბრალოდ შესანახი იგი აქ, და ეს ამას თავისთავად. თქვენ შეგიძლიათ განათავსოთ სხვა რამ საკუთარი app. 

მაგრამ პირველი, მოდით დაარღვიოს ეს დაყოფილია ორ კომპონენტს, მაგრამ ჩვენ გვინდა, რომ გამოყოფა განყოფილებიდან ბეჭდვის ნაწილი ფაქტობრივი app ნაწილი. რა შეგვიძლია გავაკეთოთ არის შეგიძლიათ შეცვალოთ ეს აპლიკაცია რომ CardView, უბრალოდ ახალი სახელი app, და ჩვენ შეგვიძლია ახალი კომპონენტი მოუწოდა ოთახი, არ უნდა აგვერიოს ძველი ოთახი. ჩვენ მივიღეთ createClass, და, როგორც HTML, თქვენ შეგიძლიათ ბუდე რეაგირებას კომპონენტები შიგნით ერთმანეთს. 

ასე რომ, ამ გაწევა ფუნქცია, ფუნქციის დაბრუნების CardView, და ეს არის ზუსტად იგივე რამ. იხილეთ, თუ რატომ არის იგივე? იმის ნაცვლად, რომ გაწევის უბრალოდ app რომ აქვს div და დაწყვილების შიგნით, ოთახი უწევს CardView და CardView უწევს div და მე. ასე რომ, ეს არის ჩვენი პირველი მაგალითი მობუდარი ელემენტების შიგნით ერთმანეთს. ამას რამე აზრი აქვს? ასე რომ, კიდევ ერთხელ, ჩვენ გვაქვს CardView ელემენტს. ჩვენ გვყავს app ელემენტების რომ ეს არის უფრო დიდი, ვიდრე. 

OK, ასე რომ, ჩვენ გვინდა, რომ ჩვენი CardView-- თუ მისცეს კარგი CardView გარკვეული ბარათი, ეს ამობეჭდოთ თქვენთვის, არა? ასე რომ, პირველ რიგში, ჩვენ უნდა მიიღოს ბარათი, მოდით ბარათი ობიექტი. ასე რომ, მოდით ჩემი ბარათი გაუტოლდება თუ თქვენ ყველა იცნობს, ეს არის მხოლოდ notation მიღების ობიექტის JavaScript. ეს არის სახის მოსწონს struct C, ამიტომ ჩვენ მივიღეთ ბარათი, და ასე რომ, ახლა ჩვენ შეგვიძლია გაივლის ამ ბარათს ქონების ან როგორც ატრიბუტის HTML დღეს ჩვენი app. ასე რომ, ჩვენ შეგვიძლია ამის გაკეთება, App ანკეტა ტოლია myCard. 

თქვენ იცით, როგორ შეყვანის, თქვენ შეყვანის ტიპის შეადგენს ტექსტი ან ღილაკს კლასი შეადგენს btn for ჩატვირთვის ,? იგივე იდეა, App განყოფილებიდან equals-- თქვენ მოხვდით ბოლო braces აქ App ბარათი ტოლია myCard, ასე რომ ეს ამბობს, რომ ჩვენ გვაქვს ამ ბარათის ობიექტი. მე ვაპირებ გაკეთებას, როგორც ქონების ოთახი კომპონენტი. ეს app კომპონენტი ვერ შეძლონ და ამის საინტერესო პერსონალის იგი. 

ასე რომ, ჩვენი app იქნება მოცემული ბარათი, ასე რომ ახლა, მოდით აქვს app უბრალოდ მისცეს ბარათის CardView თავად, რადგან, როგორც აპლიკაცია არ არის აპირებს, თუ რა უნდა გააკეთოს, ასე რომ, ჩვენ მხოლოდ მისცეს მას CardView. ასე რომ, ჩვენ გაიაროს ეს ანალოგიურად, ბარათი ტოლია, და ასე ყოველ კომპონენტს შეუძლია რამ, რაც უკვე გადაეცა იგი. მათ შეუძლიათ თვისებები რომ არ მიეცა მას გამოყენებით ამ სინტაქსი, this.props.card. 

რა ხდება აქ თქვენ გაქვთ myCard ობიექტი. თქვენ გაივლის მას app გამოყენებით App ბარათი ტოლია myCard. ეს ბარათი ობიექტი ენიჭება თქვენი app. ოთახი შეგიძლიათ თქვათ, რომ როგორც this.props.card. ეს არის ერთგვარი მოსწონს გამოსახულება იცის, რა წყარო არის. 

ეს აპლიკაცია იცის, რა არის განყოფილებიდან არის, და ეს შეიძლება გავაკეთოთ პერსონალის იგი. მას შეუძლია გააკეთოს გაანგარიშებები. მას შეუძლია მიიღოს გადაწყვეტილება გამორთვა იგი. 

ახლა, მივდიოდი გაივლის this.props.card გადატანა CardView. აზრი აქამდე? ეს კიდე უფრო გრძნობა, ახლა. 

OK, ასე რომ, ახლა ჩვენ ვართ CardView. ჩვენი CardView, იმის გათვალისწინებით, ბარათი, უნდა ამობეჭდოთ მისი კითხვა და პასუხი. ახლა ჩვენ მხოლოდ დაბეჭდილი ზოგიერთი hardcoded კითხვები და პასუხები. ჩვენ უნდა გაერკვნენ out-- ჩვენ გვჭირდება ვთხოვო ბარათი, რომელიც მათ მოგვცა რა არის კითხვა და პასუხი, და მაშინ ბეჭდვა ეს out შევიდა ეკრანზე. 

ასე რომ, ჩვენ შეგვიძლია ამის გაკეთება აქ. In გაწევა begin-- გავაკეთოთ შეადგენს. ასე რომ, რასაც ჩვენ ვაკეთებთ აქ ჩვენ ვიცით, რომ ბარათები მოგვცა ქონება, არა? ეს მოცემულია ჩვენთვის, როგორც შეყვანა. ისევე, როგორც ეს თითქმის ისევე, არგუმენტები ფუნქცია. ბარათის არგუმენტი თითქმის ეს CardView. 

ჩვენ ამონაწერი, რომ, და ამით ეს ცვლადი კითხვა. დარწმუნდით, რომ პასუხი წავიდა ცვლადი პასუხი. მოთხოვნა, რომ ანკეტა უპასუხოს. და ახლა რომ ჩვენ გვაქვს ეს, ნაცვლად დაბეჭდვის, რომ ტექსტი, ჩვენ ვაპირებთ, რომ ამობეჭდოთ რასაც ისინი მოგვცა. 

ასე რომ, ამ პერსონალის ამიტომ ჩვენ ვაპირებთ დააყენა კითხვა პასუხი. მოდით ვნახოთ, თუ ეს სამუშაოები. Cool, მოდით დაიხევს მეშვეობით იგი კიდევ ერთხელ უბრალოდ დარწმუნებული უნდა იყოს. 

ასე რომ, ჩემი ბარათი ბარათი ობიექტი, და ჩვენ ვაძლევთ, რომ ბარათის app. და app აპირებს მიიღოს ბარათი და მისცეს მას CardView. ეს CardView თქმით, იმ შემთხვევაში, თუ მომეცი ნებისმიერი flashcard ობიექტი, მე ამობეჭდოთ მისი კითხვა და მისი პასუხი, არა? 

ასე რომ, რა შეიძლება გავაკეთოთ არის შემიძლია გაუგზავნე ეს კოდი, პირველი მოსწონს 10 ხაზი, ჩემი კოდი, ჩემი მეგობარი. მან შეიძლება embed მას საკუთარი განცხადების საფუძველზე. და რადგან მან იგივე, ისევე როგორც CardView განყოფილებიდან უდრის, რადგან მან შექმნა CardView და მისცა მას სწორი ინფორმაცია, მან შეიძლება გაწევა საკუთარი ბარათი. ასე რომ, ამ გზით, ეს მართლაც მაგარი გზა თქვენ უნდა ავაშენოთ კომპონენტების გამოყენებით ერთმანეთს, არა? ეს ბარათი, მე ვერ აქვეყნებს ამ CardView ინტერნეტში, და ადამიანი შეძლებს გამოიყენოს იგი. ასე რომ, ძირითადად, ეს, როგორც ერთი სტანდარტული ფუნქციების C ბიბლიოთეკა. 

ეს არის ფუნქცია, სადაც ვიღაცამ წერია ეს. თქვენ გარკვეული შეყვანა. ეს თქვენ აწარმოოს გარკვეული გამომავალი. თქვენ არ აინტერესებს, თუ როგორ მუშაობს იძულებით. რადგან თქვენ მისცეს მას სწორი შეყვანის, ის ყველაფერს იმისათვის, რომ სწორი გამომავალი. 

და კომპონენტი შეიძლება იყოს ეგონა, რომ იგივე გზით. ეს CardView ჰგავს ბიბლიოთეკა ფუნქცია. თუ თქვენ მისცეს მას გარკვეული განყოფილებიდან როგორც საკუთრება, იგი ყველაფერს ამობეჭდოთ შინაარსი რომ ბარათი. Like თუ შევცვალო ჩემი ბარათი ნაცვლად, რა არის 5 პლუს 37, იგი განაახლებს შესაბამისად. ასე რომ, უბრალოდ შეცვლით input, იგი იღებს გარკვეული გამომავალი. ასე რომ, შეგიძლიათ წარმოიდგინოთ, კომპონენტების თითქმის ფუნქციები ამ გზით, რომელიც თქვენ შეგიძლიათ ერთად. თქვენ მიიღოს შეყვანის, როგორც ეს CardView როგორც შეყვანის, თქვენ გამომუშავება. ამ შემთხვევაში, გამომავალი არის HTML. აზრი აქამდე? ზემოთ, კიდევ ერთხელ, თვისებები როგორ შეგიძლიათ გაივლის ინფორმაცია შევიდა და გარეთ კომპონენტები. 

OK, ასე რომ მოდით ეს რამ ინტერაქტიული. ახლა ეს სახის მოსაწყენი. რა არის [INAUDIBLE]? თქვენ შეგიძლიათ ამობეჭდოთ რაღაც out, მაგრამ ეს ყველაფერი მას შეუძლია გააკეთოს. 

მოდით წავიდეთ უკან წლის კითხვა მხოლოდ ახლა. OK, ასე რომ ახლა ეს კომპონენტები მოსაწყენი, რადგან ყველა ისინი, ისინი კიდევ შეყვანა. ისინი გამომავალი, არა? სწორედ ასეთი მოსაწყენი. ჩვენ გვინდა, რომ ჩვენი კომპონენტების შეძლებს აქვს გარკვეული სახის შიდა სახელმწიფოებრივი ისევე როგორც მახსოვს რაღაც. 

იყიდება flashcard, ამისთვის მაგალითად, რა ტიპის სახელმწიფო შეიძლება გსურთ გახსოვთ flashcard? რა დროებითი სტატუსი შესაძლოა, თქვენ უნდა გვახსოვდეს, ამისთვის flashcard ერთი flashcard app? აუდიტორია: მიუხედავად იმისა, რომ უკვე სავალი? NEEL Mehta: ჰო, მარჯვნივ. ამიტომ დაგვჭირდება შენარჩუნება სიმღერა ხარ გავუსწოროთ ან თქვენ წინაშე ქვევით ბარათზე. On Facebook, მაგალითად, თქვენ აკეთებთ უნდა გვახსოვდეს, სადაც საინფორმაციო feed ხარ და მინდა, ვინ არის ნახვა აკეთებ ახლა. 

On Messenger, როგორიცაა რა ტექსტი თქვენ ჩაწერეთ შეტანის ყუთი, უფლება? თუ თქვენ ამოცნობა გვერდზე, იგი მიდის. მაგრამ თქვენ ნამდვილად არ მაინტერესებს. ეს მხოლოდ დროებითია. ჰო? 

აუდიტორია: [INAUDIBLE] NEEL Mehta: Like ფლეშ ბარათი, როგორც თქვენ შეიძლება ვხედავთ კითხვა მხარეს ან პასუხი მხარეს? 

აუდიტორია: OK. 

NEEL Mehta: Like ორმხრივი flashcard, არა? ჰო, ასე რომ თქვენ გსურთ ამ იდეის ახლა მაქვს თვისებები, რომელიც, როგორც საშუალებებით, მაგრამ სახელმწიფო, რომელიც არის დროებითი, uh, სადაც თქვენ ხართ გვერდზე, უფლება? ისევ და ისევ, მე ვთქვი Facebook Messenger, მე მაქვს, როგორიცაა რომელიც პირს თქვენ ათვალიერებენ Facebook ან ვინ არის ნახვა, არა? 

ეს არის მხოლოდ დროებითი. მნიშვნელოვანია, რომ დავანახოთ შესახებ რა ხდება, მაგრამ ამოცნობა გვერდზე. ეს ნამდვილად არ აქვს. ასე რომ, ეს დროებითი სახელმწიფო, ასე რომ, ჩვენ ყველა ეს სახელმწიფო. 

ასე რომ, კიდევ ერთხელ, იქ სახელმწიფო და props. რეკვიზიტები არის input მოცემული თქვენი მონაცემთა წყარო. სახელმწიფო არის, ისევე, დეფოლტის. ეს, ისევე, პერსონალი, რომ ხდის რამ ინტერაქტიული. 

ასე რომ, ჩვენი CardView-- მოდით ჩვენი CardView-- ასე ლამაზი. ის, რასაც ჩვენ ვაპირებთ, რომ აქ, ჩვენ ვაპირებთ შეეხოთ CardView და მხოლოდ CardView. ასე რომ, ჩემი მეგობარი, რომელიც მივიღე ეს, ისინი არ შეამჩნევთ რაიმე განსხვავება. ისინი არ უნდა შეიცვალოს რომელიმე საკუთარი კოდი მაგრამ ისინი მინდა, რომ მათი CardView მიიღო souped up. ეს არის ლამაზი ნაწილი კომპონენტები. 

OK, ასე, რომ ჩვენს CardView, მოდით, ვცადოთ და ტრეკზე თუ არა ჩვენ ფაზა up ან წინაშე ქვემოთ. In რეაგირებას ჩვენ ამისათვის პირველი სასურველი საწყის მდგომარეობას. სად განყოფილებიდან დაიწყოს? 

ასე რომ, რა ფუნქცია მოუწოდა getInitialState ფუნქციონირებს და ჩვენ დაუბრუნოს ობიექტი. ეს ობიექტი შეიცავს რამდენიმე სახელმწიფო და სახელმწიფო მხოლოდ ძირითადი ღირებულების წყვილი. ისევე დაავალებს, თქვენ გაქვთ გასაღები და ღირებულება, თქვენ გაქვთ, როგორიცაა სახელი სიმებიანი. 

ამ შემთხვევაში, ასე ვთქვათ წინა მართალია. ეს ამბობს, რომ ჩვენ სახელმწიფო გვაქვს. ერთი კომპონენტი სახელმწიფო ატრიბუტი მოუწოდა წინაშე. [INAUDIBLE], ასე იყოს, ჩვენ თვალწინ ბარათი, და ჩვენ შეგვიძლია შევცვალოთ ეს როგორც ჩვენ Flip ბარათი. აზრი? 

OK, ასე რომ გამოიტანოს, ახლა, ჩვენ ნაჩვენებია კითხვა და პასუხი. ახლა, რა უნდა გავაკეთოთ შოუ კითხვა თუ ჩვენ თვალწინ ბარათი ისე, პასუხი არის, რომ უკან ბარათზე. ამიტომ, თქვენ ყველა გააკეთოს ბარათის ინტერაქტიული. მოდით ცდილობენ და ეს აქ. ისე, პირველი, უბრალოდ, რომ ცვლადი. ჩვენ შეგვიძლია ვკითხოთ ახლა this.state.front. ჩვენ შედიხართ იგივეს ჩვენ ხელმისაწვდომობა props, ასე this.state.front. 

თუ ჩვენ წინაშე, მაშინ ტექსტი არის this.props.card.question. თუ ჩვენ შესახებ თვალწინ ბარათი, ჩვენ ვაპირებთ, რომ ცდილობენ და დაიბრუნოს კითხვა ბარათი. წინააღმდეგ შემთხვევაში, თუ ჩვენ უკან ბარათი, რა ვქნათ? 

აუდიტორია: პასუხი? 

NEEL Mehta: Yep, ასე ტექსტი უდრის this.props.card.answer. მაგრამ თუ თქვენ შეამჩნევთ, ჩვენ გამოყენებით სახელმწიფო უნდა მიიღოს გადაწყვეტილება რადგან ახლა კომპონენტი გამოიყურება სხვადასხვა ეფუძნება off, თუ როგორ ეს ურთიერთქმედება იგი. ასე რომ, ნაცვლად დაბეჭდვისას ამ, ჩვენ უბრალოდ ამობეჭდოთ ტექსტი. ზემოთ, ასე რომ, ახლა, როგორც ხედავთ, ჩვენ ვხედავთ მხოლოდ კითხვა. და თუ მე შეცვლის სახელმწიფო აქ ხელით წინა არის ცრუ მივიღებთ 42 უკან. 

ასე რომ, კიდევ ერთხელ, ეს კომპონენტი აქვს საკუთარი სახელმწიფო. Like ღილაკს იცის, თუ არა ეს უკვე დაპრესილი თუ არა, ეს რამ იცის, რა არის წინ ან უკან. ჩვეულებრივ, ეს არის წლის წინ. და მაშინ, თუ ის წინ, ჩვენ ამობეჭდოთ კითხვაზე. თუ ეს უკან, ჩვენ გამოგიგზავნით ბეჭდვა პასუხი. ასე რომ, კიდევ ერთხელ, ინფორმაცია მოცემული არის იგივე. უბრალოდ გამოიყურება სხვადასხვა საფუძველზე, თუ როგორ პროგრამის. ასე, მაგალითად, Facebook Messenger, მაშინაც კი, თუ თქვენ იგივე მონაცემთა წყარო, ეს შეიძლება სხვადასხვა იმის გამო, რომ სახელმწიფო არის სხვადასხვა. თქვენ ეძებს სხვადასხვა პირის გაგზავნა. 

OK, ასე რომ, ეს არის ყველა კარგად და კარგი, მაგრამ ახლა, რა არის რეალურად გვაიძულებს შეუძლია შეცვალოს, თუ არა ჩვენი ბარათი წინ ან უკან. ჩვენ შეგვიძლია ამის გაკეთება დასძინა flip ღილაკს, ღილაკს ბარათი, რომელიც იქნება Flip ბარათი, თუ ის [INAUDIBLE]. მოდით დავამატოთ ღილაკს აქ, ამ ღილაკს, და ამ ღილაკს იტყვის flip. 

ასე რომ, ახლა, არაფერს არ აკეთებს. უბრალოდ გამოიყურება ლამაზი. რა შეგვიძლია გავაკეთოთ არის ჩვენ შეგვიძლია დავამატოთ click კურატორმა, onClick ტოლია this.flip, და ჩვენ განსაზღვრავს flip შემდეგ. მაგრამ, ძირითადად, onClick არის ფუნქცია, რომელიც იღებს მოუწოდა, როდესაც მომხმარებელი იმოქმედებს ეს. 

ასე ღილაკს ეცოდინებათ როდესაც ის უკვე დააწკაპებთ. წავიდა ის უკვე აირჩიეთ ეს იქნება Flip ბარათი. ეს არის ერთგვარი, როგორც თქვენი პიცა მიწოდების ბიჭი. თქვენ, როგორც, ყველა უფლება, როდესაც ვინმე მეძახის, მე სიტყვით პიცა, არა? 

თქვენ დარეგისტრირების მსმენელს. თქვენ მოვუსმინოთ ღონისძიება. თქვენ მიიღებთ მოუწოდა, და როცა მოვლენა ხდება, რაღაც. თქვენ მიიღებთ პიცა. ამ შემთხვევაში, როდესაც თქვენ აირჩიეთ, Flip ბარათი. 

ასე რომ, ჩვენ უნდა განსაზღვროს ფუნქცია, რომელიც Flip ბარათი, ასე რომ, ჩვენ წერენ, რომ უფლება აქ, Flip ფუნქცია. ასე რომ, რას ფიქრობთ flip გააკეთებს? ისევ ეს იღებს მოუწოდა, როდესაც ჩვენ დააწკაპუნეთ flip ღილაკს. რა უნდა ფუნქცია flip გავაკეთოთ? 

აუდიტორია: შეცვლა this.state.front ჭეშმარიტი ცრუ, ყალბი ჭეშმარიტი. 

NEEL Mehta: Yep, ასე რომ, რაც არ უნდა this.front is-- წინა სახელმწიფო. მიიღეთ წინაშე სახელმწიფო, თუ ეს სიმართლეა, რომ ეს სიმართლეს არ შეესაბამება. თუ ეს ყალბი, მართალია, არა? მოდით ვეცადოთ, რომ. 

თქვენ ვერ შეცვლის სახელმწიფო მხოლოდ ამით this.state. თქვენ არ შეგიძლიათ ამის გაკეთება. თქვენ არ შეგიძლიათ ამის გაკეთება. თქვენ უნდა გამოიყენოთ ფუნქცია მოუწოდა this.setState. 

ასე რომ, შეიძლება ითქვას, this.setState წინა მსხვილი ნაწლავის ამ, სადაც, კიდევ ერთხელ, ძახილის წერტილი ნიშნავს, პირიქით. ვფიქრობ, თუ ამ. state.front მართალია, იგი იქცევა ყალბი. ამიტომ ჩვენ ვაყენებთ სახელმწიფო ჭეშმარიტი ყალბი. თუ ეს ყალბი, ჩვენ მითითებული ეს ცრუ ჭეშმარიტი. 

უბრალოდ შეამჩნია, რომ ჩვენ კომპლექტი და კიდევ ოდნავ სხვაგვარად, და მოდით ცდილობენ ამ. Bada bing, შევხედოთ ამ. საქართველოს Flip ღილაკს ახლა გადართოთ წინა უკან სახელმწიფო. 

ასე რომ, აქ, სადაც ხედავთ ცოტა ჯადოსნური რეაგირებას. ისევე, როგორც ჩვენ არ უთხრა, რომ ის ხელახლა გაწევა. ჩვენ არ უთხრა მას შეეცვალა არაფერი. თუ თქვენ აკეთებთ ეს გარეშე რეაგირებას, ნეტავ არ რომელთა მიზანია მოსწონს, როცა flip ღილაკი დაწკაპავთ, ნეტავ უნდა გითხრათ, რომ ეს ხელით ხელახლა გაწევა, არა? 

რეაგირებას ნამდვილად გაგრილებას, რომ თუ მისცეს მას გარკვეული სახელმწიფო და თვისებები, ის ყოველთვის გაწევა ზუსტად იგივე რამ. ამიტომ, როდესაც ჩვენ ოდესმე შევცვლით სახელმწიფო და თვისებები, რეაგირება უბრალოდ ხელახლა უწევს მთელი რამ. იგი დარწმუნებულია, რომ იქ ერთ-ერთი კორესპონდენცია სახელმწიფო და პარამეტრი და HTML. ასე რომ, როდესაც არც ერთი იმ ცვლილებების მეშვეობით კომპლექტი სახელმწიფო, ეს შეიცვლება, თუ როგორ ანაზღაურება ხელახლა გაწეული. ასე რომ, ძირითადად რეაგირებას ჰგავს გელოდებათ შეიცვალოს. 

როდესაც იგი შეიცვლის რაღაც, ის ხელახლა გაწევა მთელი გვერდი. და თუ ეს ხმები არაეფექტური, ეს იმიტომ, რომ ეს იქნება, მაგრამ რეაგირება იყენებს რამ ე.წ. Shadow DOM. იმის ნაცვლად, რომ ხატვის გვერდი პირდაპირ, ინარჩუნებს ვირტუალური HTML ხე მეხსიერებაში. 

თქვენ იცით, HTML, როგორიცაა ხე, ისევე როგორც იერარქიული მონაცემთა სტრუქტურას. იგი ინარჩუნებს ყალბი ხე მეხსიერება, და როდესაც თქვენ განაახლოთ გვერდზე, ეს დავხაზავ სხვა ყალბი ხე, და ეს თქვენ გამოთვლა რა შეიცვლება მას სჭირდება, რათა გვერდი რათა ორი ხე თანაბარი. ასე რომ, ძირითადად, ის პრაქტიკულად ხელახლა უწევს ბევრი. და მაშინ იგი მხოლოდ მინდა ცვლის გვერდი პატარა შესწორებები, როგორც საჭიროა, ასე რომ, ეს ძალიან, ძალიან, ძალიან ეფექტური. 

ასე რომ, ძირითადად რეაგირებას იქნება როდესაც თქვენ შეცვალოს რაღაც, ის ხელახლა გაწევა გვერდი პრაქტიკულად. ეს გაერკვნენ, თუ რა მჭირდება შეცვლა, რათა რეალური გვერდი ასახავს ვირტუალური გვერდი, და ეს ყველაფერს გავაკეთებთ, რომ. ეს არის ვირტუალური DOM. ეს არის ერთ ერთი ყველაზე დიდი თვისებები რეაგირებას. 

ამას რამე აზრი აქვს? ნებისმიერი კითხვები? ჰო? 

აუდიტორია: როგორ აკეთებს შედარება მაინც რომ MVC რომ ჩვენ ვისაუბრეთ ადრე როგორიცაა რესურსები. 

NEEL Mehta: ჰო, კითხვა არის როგორ შევადარებთ MVC? თქვენ სთხოვა რესურსების შესახებ. ისე, მოდით ვისაუბროთ, როგორ იმუშავებს. 

In MVC, ნეტავ განახლება მოდელი. ამ შემთხვევაში ჩვენ გვექნება განყოფილებიდან მოდელი. ხედი ექნება flip ღილაკს და კონტროლი ექნება flip ფუნქცია. ასე რომ, ხედი ვეტყოდი კონტროლერი Flip Flip. დაფის ვეტყოდი მოდელი უნდა შეიცვალოს, არა? 

ასე რომ, როდესაც თქვენ ამის გაკეთება MVC, თქვენ მოუსმინოს მოდელი უნდა შეიცვალოს, და თქვენ ხელახლა გაწევა კალენდარი შესაბამისად. ან თქვენ უბრალოდ უნდა მომწონს აქვს კონტროლერი. დაელოდეთ მოდელი უნდა შეიცვალოს, და მაშინ აირჩიოთ და ნაწილი, როგორც რამ შეცვლა. აქ ჩვენ გვაქვს ერთი რამ, მაგრამ დიდი ოთახი, თქვენ უნდა მიყვარს გვახსოვდეს, თუ რა ცვლილება თითოეული ადგილი, ასე რომ, ეს ცოტა შემაშფოთებელი. ასე რომ, რეაგირებას ლამაზი იმიტომ, რომ მას აქვს Shadow Dom. ეს ვერ ახერხებს მხოლოდ გადაწერა მთელი რამ. თქვენ არ გაქვთ შერჩევით ისევე როგორც ვხვდები, რა უნდა განახლდეს. 

On Facebook თუ გნებავთ მიიღოს ახალი ეპისტოლე, MVC, ნეტავ უნდა გვახსოვდეს, OK, შეცვალოს რამ განთავსებულია ზევით გვერდი, გაგზავნა ხატი. ასევე პოპ new window ბოლოში. ასევე, რათა ახალი რამ, რომ ფანჯარა. ასევე ითამაშოს ხმა. 

ეს არის ის, ბევრი პერსონალი აპირებს out ამავე დროს. ასე რომ, თუ თქვენ არ აქვს Shadow Dom, ნეტავ უნდა გავაკეთოთ, რომ ხელით, რადგან თქვენ ვერ დაეღწია მთელ გვერდზე. თქვენ არ შეუძლია, ასე რომ თქვენ უნდა შეცვლა თითოეული რამ ხელით, რომელიც მართლაც შემაშფოთებელი MVC. 

ასე რომ, იმისათვის, რომ ხელმომჭირნე, ისინი შერჩევით განაახლოთ გვერდზე, რომელიც ეფექტური, არამედ შემაშფოთებელი. In რეაგირებას, რადგან Shadow Dom, თქვენ ორივე რამ უფასოდ. ეს არის ეფექტური, რადგან ჩრდილოვანი Dom. სუსტი განახლებას გვერდზე. ეს არ აკეთებს ხე მანიპულირება. თქვენ მიიღებთ ეფექტურობა. თქვენ ასევე მარტივად გამოყენების გამო თუ უბრალოდ გადაწერა მთელი გვერდი, მაგრამ თქვენ იცით, ყველა უფლება, რამ ვაპირებთ, რომ გვერდზე სადღაც. ეს შეიძლება იყოს სხვადასხვა ადგილას, მაგრამ ეს იქნება გვერდზე, უფლება? ასე, რომ თქვენ უბრალოდ ხელახლა გაწეული მთელი რამ პრაქტიკულად, და თქვენ შესაძლოა რამდენიმე ცვლილებები გვერდზე თავად. 

ასე რომ, კიდევ ერთხელ, MVC თქვენ უნდა აირჩიოს შორის განმუხტვის გამოყენების და ეფექტურობის, და რეაგირებას, თქვენ ორივე. ასე რომ, სჯობს. აზრი? მყარი. 

OK, ასე რომ ვნახოთ მოდით ვისაუბროთ ცოტა შესახებ ნაბიჯი 4, როგორ შეგვიძლია იგივე კომპონენტები. ასე რომ, ჩვენ ამ წუთას. ჩვენ გვაქვს ჩვენი მაგარი პატარა ღილაკს. ჩვენ შეგვიძლია Flip უკან და მეოთხე და რომ ყველა ის აკეთებს. მოდით ვთქვათ, ჩვენ გვინდა გვაქვს კიდევ ერთი კომპონენტი. ვთქვათ ჩვენი flashcard app უნდა შეიცავს სიაში ყველა ბარათები რომ თქვენ გაქვთ ისე, რომ ნიშნავს, რომ ჩვენ უნდა ჰქონდეს ერთი კომპონენტი. ისე, იქნებ ეძახით სია. გადავდგათ სია, რომელიც პარალელურად ერთად CardView, და ეს სია და CardView მოეწონება მუშაობა. თქვენ შეგიძლიათ დააკავშიროთ მათ იმისათვის, რომ ჩვენი ოთახი თქვენთვის. 

ასე რომ, პირველ რიგში, მოდით მიიღოს რამდენიმე ბარათები უფლება. ვთქვათ, თუ რა ბარათები? და მხოლოდ ასე არ უნდა ჭაბურღილის თქვენ აკრეფით ის, მე უბრალოდ აპირებს კოპირება აქ. ასე რომ, მე ვაპირებ არა მისთვის მხოლოდ ერთი ბარათი. მე ვაპირებ, რათა ეს მასივი ბარათები. ასე რომ, პირველი ნაკადი აპირებს დაარღვიოს ახლა. ყველა უფლება, ასე რომ, ჩვენ ვაპირებთ, რათა ეს შეუძლია გაუმკლავდეს მრავალჯერადი ბარათები. ასე რომ, პირველი, ჩვენ ვაპირებთ, რათა ის, რომ არ მხოლოდ ერთი ბარათი მაგრამ მასივი ბარათები, როგორც სიაში ბარათები. და ამ შემთხვევაში, ჩვენ გვაქვს სამი მათგანი. 

ყველა უფლება, ასე app არის აპირებს მიიღოს სია ბარათები, და ის აპირებს, გადაწყვიტოს, რომელი ერთ-ერთი, რათა აჩვენოს CardView. CardView მხოლოდ გაწევა ერთი ბარათი, მაგრამ app იღებს სიაში ყველა ბარათები, არა? 

ასე რომ, როდესაც თქვენ გაერკვნენ ერთი ანკეტა მისცეს CardView, როგორ ფიქრობთ, ვხვდები, თქვენ შესაძლოა უნდა მიიღოს გადაწყვეტილება, რომელიც განყოფილებიდან ჩვენება? იმისათვის, რომ გიპასუხოთ, ეს დროებით თქვენ ათვალიერებენ გარკვეული ბარათი. თუ თქვენ განაახლეთ გვერდი, თქვენ უბრალოდ დაბრუნდეს პირველი ბარათი. ეს არის ის, OK იმიტომ, რომ ეს დროებითია. რა ტექნიკით შეიძლება გამოვიყენოთ? 

აუდიტორია: თქვენ შეიძლება მიიღოს ცვლადი ასე რომ, ისევე, როგორც თქვენ ჰქონდა წინ. ეს ასეა, თქვენ შეიძლება მიმდინარე ანკეტა უდრის 1? 

NEEL Mehta: ჰო, ამიტომ ჩვენ გვინდა, რომ გვქონდეს სახელმწიფო, უფლება? თქვენ იყენებთ სახელმწიფო ამ კომპონენტი გაერკვნენ რომელიც ბარათი ჩვენ გვინდა, რომ მიიღოს. ისევე, როგორც ჩვენ გვაქვს სია ყველა ბარათი, ჩვენ გამოგიგზავნით გამოიყენოს სახელმწიფო, რათა გაერკვნენ ერთ-ერთი პირველი ბარათი, მეორე ბარათი, მესამე ბარათი, და ასე შემდეგ. 

ასე რომ app ისე ოთახი მიიღებს აქვს getInitialState ფუნქცია, getInitialState ფუნქციის სანაცვლოდ. და ჩვენ, უბრალოდ, ვამბობთ activeIndex 0. ასე რომ, ახლა ჩვენი app აქვს საკუთარი სახელმწიფო. 

ასე რომ, ახლა გაწევა, გაერკვნენ ბარათი, მოდით უბრალოდ წასვლა მასივი და დაიბრუნოს რამ, რომ ინდექსი. აირჩიეთ ბარათი თანაბარი this.props.cards this.state.activeIndex. ასე რომ, როგორც ხედავთ აქ, რეკვიზიტებს და სახელმწიფო რეალურად მუშაობა. ასე რომ, ახლა რომ ჩვენ გვაქვს ჩვენი activeCard, ჩვენ მოვუწოდებთ მას activeCard, და ვნახოთ, თუ ეს სამუშაოები. [INAUDIBLE] 

ოჰ, რომ ტექსტი შეცდომა. Ah. 

Cool, yep, ასე რომ, ახლა ჩვენ უკან სად ვიყავით ადრე, არა? იმავე წლის პროგრამის გარდა ახლა ჩვენ შეგვიძლია სია ბარათები, არა მხოლოდ ერთი ბარათი. და ახლა, კიდევ ერთხელ, თუ შევცვლით activeIndex, ჩვენ შეგვიძლია წავიდეთ 0-დან 1, და ახლა, რომ მეორე ბარათი, და მერე წავედით 0. ასე რომ, აქ არის ახალი souped-up ვერსია ჩვენი. 

OK, ასე რომ, ახლა მოდით აქვს სია, რომელიც აჩვენებს ყველა კარტს თქვენს პროგრამაში, ასე რომ, ჩვენ, რათა ახალი კომპონენტი მოუწოდა listview. მოდით listview ტოლია react.createClass. ასე რომ, ჩვენ გვინდა, რომ გაუწიოს უწესრიგო სიაში სიის ელემენტი ყველა ბარათი. ასე რომ, ჩვენ გვაქვს რამოდენიმე ბარათები. ჩვენ გვინდა, რომ ერთ-ერთი ხაზი ყველა ბარათი, უფლება? ჩვენ შეგვიძლია გავაკეთოთ ამისთვის მარყუჟის ან რაღაც, რათა ახალ სიას ერთეულზე. მაგრამ გზა თქვენ ამას რეაგირებას, გამოიყენოთ რამ მოუწოდა რუკაზე. რუკა არის ინსტრუმენტი ან ფუნქცია თქვენ იყენებთ რომ ყოველი ნივთი, გადის რამდენიმე ფუნქცია, იღებს დაბრუნების ღირებულება, და გაძლევთ, რომ უკან. 

ასე რომ, როგორც მაგალითად, ჩვენ გვაქვს მასივი 1, 2, 3.map ფუნქცია და ეს არის სტენოგრამის ამისთვის ფუნქცია x arrow x * x. ეს ამბობს, ყველა ნომერი 1, 2, 3, მას. მოედანზე, და მისცეს მას უკან. ასე რომ, რას ფიქრობთ, 1, 2, 3.map x მიდის x-ჯერ x გაძლევთ უკან მოცემული რომ ეს ფუნქცია აწარმოებს ყველა ელემენტს რომ მასივი. 

აუდიტორია: 1, 4 9? 

NEEL Mehta: Yep, 1, 4, 9 იმიტომ, რომ თქვენ 1 ჯერ 1. ეს გაძლევთ ერთი. ეს არის პირველი ელემენტს. 

2 ჯერ 2 4. ეს არის მეორე ელემენტს. 3-ჯერ 3 არის 9. ეს არის მესამე ელემენტს. აზრი? ასე რომ რუკა აქვს ტექნიკით თქვენ გამოყენება ფუნქციური პროგრამისტების, ახალი სტილი პროგრამირების, რომ რამე ყველა ელემენტს თქვენს სიაში. ასე რომ, ეს ნაცნობია. გვაქვს სია ბარათები. ჩვენ გვინდა ხაზი ყველა ერთ-ერთი, ასე რომ ჩვენ უბრალოდ გამოიყენოთ რუკა აქ. ჩვენ ვამბობთ, მოდით სია ტოლობის this.props, ბარათები, რუკაზე. 

ასე რომ, მოცემულ ბარათი, ჩვენ აპირებს გენერირება სიაში საქონელი რომ ბარათის შინაარსი მხარეს. მოდით უბრალოდ, ვამბობთ ჩვენ გვინდა, რომ გარეთ ბარათები ეჭვქვეშ ასე card.question. ასე რომ, ეს სია შეიცავს მასივი LI ან სია საკითხი იქ, სადაც ერთ-ერთი სია ნივთი ყველა ბარათი, და რომელიც შეიცავს ბარათები კითხვა. აზრი? 

Cool, ახლა მოდით რეალურად ბეჭდვა რომ. ასე რომ, ჩვენ დაგიბრუნებთ ul. Inside რომ უწესრიგო სია, ჩვენ მხოლოდ გამყარებაში მთელი სია რომ ისინი მოგვცა. ზემოთ. 

ყველა უფლება, ასე რომ, ახლა ეს სია სამუშაოები მხოლოდ იპოვოს. რაიმე შეკითხვები სია? თქვენ გაქვთ bunch of ბარათები. თქვენ მიიღოს სიაში ნივთი ყველა ბარათი. და დააყენა მათ შიგნით უწესრიგო სია, და მისცეს მას უკან. ახლა მოდით იმოქმედოს ისე, ჩვენ ხმა ეს შიგნით ჩვენი app, ასე რომ, ჩვენ შეგვიძლია ამის გაკეთება, სია. რა არგუმენტი ჩვენ გაივლის სია? რა თვისებები არ ვაძლევთ მას? გახსოვდეთ, თუ მისცეს ეს bunch of ბარათები, ის ყველაფერს იმისათვის, რომ სიაში ნახატის მათთვის ბარათები. ასე რომ, რა ჩვენ გაივლის აქ როგორც არგუმენტი? აუდიტორია: სია ბარათი? NEEL Mehta: ჰო, ასე ბარათები უდრის this.props.cards, არა? ასე რომ, ერთადერთი პრობლემა არის, რომ თქვენ შეგიძლიათ მხოლოდ აღმოჩნდა ერთი უმაღლესი დონის ელემენტს გაწევა, ასე რომ თქვენ მოხვდით გადაიტანოთ იგი div. ეს არის უცნაური. მოდით ვნახოთ, თუ რომ. თუ არა, რომ მუშაობს? 

Yep, რომ თქვენ გადასვლა. ასე რომ, ახლა ჩვენ გვაქვს სია ბარათები ბოლოში, და მაშინ ჩვენ გვაქვს ჩვენი CardView თავად თავზე, და რომელიც flip შორის ორ მხარეს ბარათი. ახლა აკეთებს, რომ აზრი როგორ გავაკეთე ეს? ჰო, ისე, ისევ, ჩვენ გვაქვს ორი კომპონენტი. პირველი კომპონენტი ანაბეჭდები out ყველა ბარათი სიაში. სწორედ სია. ხოლო მეორე კომპონენტი ბეჭდავს მხოლოდ, რომ ბარათი. თუ თქვენ მისცეს მას გარკვეული ბარათი, იგი ყველაფერს ბეჭდვა ინფორმაციას, რომ ანკეტა და მოდით თქვენ Flip უკან და მეოთხე. 

ასე რომ, თუ ჩვენ გვინდა, ჩვენ შეგვიძლია ვცდილობთ და განხილვა შესახებ და დასძინა, ახალი თვისებები ამ. წინააღმდეგ შემთხვევაში, ჩვენ შეგვიძლია ვისაუბროთ ცოტა მეტი დაახლოებით, სიჩქარე reactor, ან ჩვენ შეგვიძლია პასუხი კითხვები ალბათ იმიტომ, რომ ეს არის ყველა ძირითადი ნაწილები საქართველოს რეაგირება, რომ მე მინდა ვისაუბრო. ჩვენ შეგვიძლია წავიდეთ წინ. ჩვენ შეგვიძლია უპასუხოს კითხვებს. რაც შენ გინდა. 

აუდიტორია: შეგიძლიათ გამოიყენოთ JSX ნორმალურ JavaScript? ან არის, რომ ის, რაც მოვიდა [INAUDIBLE]? 

NEEL Mehta კითხვა არის რა თქვენ იყენებთ JSX ნორმალური JavaScript? პასუხი არის დიახ. JSX არის მხოლოდ გზა მას სჭირდება თქვენი JavaScript, რომელსაც აქვს HTML შიგნით, და იგი ადგენს შევიდა JavaScript, რომ არ აქვს HTML შიგნით მას. ასე რომ, შენიშნავს, რომ ასე რომ შეამჩნია აქ. ეს ჰგავს თქვენ გაქვთ, როგორიცაა div და თქვენ გაქვთ პერსონალის შიგნით. 

რომელიც ადგენს, რომ JavaScript, ისევე როგორც საერთოდ იგივე. ვფიქრობ, რა მე ვამბობ, არის ის, რომ JSX მხოლოდ სინტაქსური, მოსწონს ეს preprocessor for JavaScript ბევრი როგორც PHP არის preprocessor HTML. სს არის preprocessor for JavaScript, რომელიც საშუალებას დააყენა HTML შიგნით თქვენი JavaScript. ასე რომ, თუ თქვენ გაქვთ უფლება სატრანსფორმატორო რაც რამ მოუწოდა [INAUDIBLE], რომელიც გარდაქმნის. უფლება preprocessor, ეს მოგცემთ ამის გაკეთება. 

აუდიტორია: [INAUDIBLE] NEEL Mehta: როგორც წესი, თქვენ არ უნდა იმისათვის, რომ HTML შიგნით JavaScript თუ თქვენი აკეთებს რეაგირებას. მაგრამ თქვენ შეგიძლიათ ამის გაკეთება მაინც. Yep? 

აუდიტორია: ვფიქრობ, თქვენ იყო აღწერილი რეაგირებას როგორც ფუნქციური programing ენაზე. ჩვენ უკვე სწავლის C in CS50. არის C ასევე ფუნქციური ენა? NEEL Mehta: ასე კითხვა დაახლოებით ფუნქციური წინააღმდეგ კიდევ ერთი რამ მოუწოდა აუცილებელია, ან საპროცესო პროგრამირების. არსებობს ორი სახის პროგრამების პოპულარული. ერთ-ერთი ე.წ. საპროცესო, რომელიც არის ყველაფერი, როგორც აკეთებს ბრძანებები, და ერთი ფუნქციური, რომელიც ყველა შესახებ, რომელსაც ფუნქციები და რომელსაც შემავალი და გამომავალი იმ. რეაგირებას არის ფუნქციონალური პარადიგმა. C არის ძალიან საპროცესო პარადიგმა. 

და, როგორც, მაგალითად, C მაგალითად, თქვენ არ გააკეთებს დეკლარაციული გზა მიღების პროგრამის, უფლება? თქვენ უნდა ვთქვა, ბეჭდვა ეს. შეცვლა ამ მონაცემების სტრუქტურას. ბეჭდვა ეს. ეს ყველაფერი ბრძანებები. 

In რეაგირებას, იქ არ არის რომ ბევრი ბრძანებები. ეს ყველაფერი, რომ კომპონენტი ერთად. ისინი მოსწონს ფუნქციები. თქვენ, როგორც ფუნქცია მოუწოდა CardView, რომელიც არის ფუნქცია რომ აქვს შემავალი, გამომავალი, და ასე რეაგირებას ყველა ამ ფილოსოფია ჩვენთვის having-- თქვენ გაქვთ მონაცემები. თქვენ გაივლის მას ამ ალგორითმი, და ეს თქვენ გამომავალი HTML, რომ თქვენ ნაბეჭდი გვერდი, და ასე რომ თქვენ უნდა ავაშენოთ ეს ნაჭერი. 

ასე რომ, მიაპყროს მეტაფორა რა ვთქვი, თქვენ იცით, თუ როგორ on Facebook თუ თქვენ გაგზავნა, და თქვენ რა ნაწილები განახლება, რომ არის პროცედურული. ეს აუცილებელია, არა? OK, მე მივიღე გაგზავნა. მოდით შეცვალოს ანგარიშის არსებობს. 

მოდით პოპ window აქ. მოდით შეცვალოს ანგარიშის არსებობს. მოდით დავხატოთ ამ აქ. სწორედ პროცედურული მიდგომა. 

ეს არის ის, რაც რამ, როგორიცაა კუთხის, Boost, ხერხემალი, სხვა ფარგლებში გამოიყენოს. რეაგირებას ფუნქციური. ეს არის ძალიან განსხვავებული გზა ფიქრი რამ. იგი იღებს ამ იდეის მოდით ფუნქციები და ალგორითმები, რომ თქვენ მისცეს მას მონაცემები. ეს თქვენ შამფურზე ის, რაც უნდა იყოს, და კომპიუტერი იზრუნებს მასით out. თქვენ არ ერევა საკუთარ თავს. არა, რომ ცოტა აზრი? ჰო? 

აუდიტორია: ფუნქციური ენა, ყველაფერი ხდება ერთდროულად? 

NEEL Mehta: არა, რამ მოხდეს, რათა. ისევე როგორც აქ, რომ ჯერ კიდევ იმისათვის, მაგრამ ეს არ მოხდეს, რათა მოსწონს მივესალმებით, ბრძანება, ბრძანება. ეს ხდება იმ მიზნით, ფუნქცია გაძლევთ გამომავალი. იმისათვის, რომ კიდევ ერთი ფუნქცია. იმისათვის, რომ სხვა ფუნქცია, სხვა ფუნქცია. 

თუ თქვენ CS51, თქვენ ვისწავლოთ ფუნქციური პროგრამები ცოტა გარეთ ფარგლებში ამ. მაგრამ, ძირითადად, რაც რეაგირებას მაგარი არ არის მხოლოდ ერთი გზა მონაცემების ნაკადი და ვირტუალური Dom, არამედ ეს იდეა ფუნქციური პროგრამირების. და ფუნქციური პროგრამირების ძალიან მარტივია შესაქმნელად და მიიღოს cool პერსონალის გარეთ, და ეს ძალიან ადვილია, რომ ვიფიქროთ შესახებ და მიზეზი შესახებ. ასე რომ, ეს არის კიდევ ერთი კარგი გათამაშება რეაგირებას. ნებისმიერი უფრო მეტი შეკითხვა? ჰო? 

აუდიტორია: Um, რატომ გამოყენება მიადევნე განსხვავებით var? 

NEEL Mehta: ასე რომ, კითხვა რატომ გამოვიყენოთ მიადევნე ნაცვლად var? ეს არის ის, რაც ე.წ. ES6 ან ECMAScript 6. ეს არის ახალი ვერსია JavaScript. აქ არის რამოდენიმე ტექნიკური მიზეზების გამო, მაგრამ, მოდით, არის უკეთესი ვერსია var. 

ეს არის, თუ როგორ აცხადებენ ცვლადი. თქვენ შეგიძლიათ გამოიყენოთ ნება. თქვენ შეგიძლიათ გამოიყენოთ var. მოდით აქვს რამოდენიმე ტექნიკური reasons-- შეგიძლიათ შევხედოთ მათ up later-- რატომ ეს უკეთესი. ძირითადად, ES6 აქვს ლამაზი ახალი სინტაქსი, ახალი თვისებები თავზე ძველი JavaScript. 

ასე რომ, ჩვენ, როგორც ხუთი წუთის განმავლობაში. მე უბრალოდ მინდოდა ლაპარაკი კიდევ ერთი რამ რეალური სწრაფად. თუ რაიმე კითხვები, მოდით ვისაუბროთ მას შემდეგ, რაც ეს. მაგრამ ასე რომ ამ იღებს დაიჭირეს წლის კამერა, უბრალოდ მინდა გაიგო ცოტა შესახებ, თუ როგორ რეალურად გამოიყენოს რეაგირებას თქვენს ნაკადი. 

თუ თქვენ აქ, Facebook.GitHub.IO/react, ეს არის მთავარი გვერდი რეაგირებას და ის ყველაფერს გაჩვენებთ, თუ როგორ რეალურად გამოიყენოს რეაგირებას თქვენს გვერდებზე. ძირითადად, ეს არის პატარა რთული ცდილობს დააყენოთ რეაგირებას. ეს არ არის მარტივი როგორც უბრალოდ გადაიტანეთ ჩამოაგდეს JavaScript არსებობს. 

თქვენ უნდა ჰქონდეს თქვენს სატრანსფორმატორო შეიქმნა, რომელიც, როგორც ეს ადრე, აქციოს თქვენი JSX შევიდა ნორმალური JavaScript. თქვენ უნდა რამ, რომ ყველაფერს შედგენა თქვენ ES6 ნორმალური. JavaScript არსებობს ბევრი მოძრავი ნაწილები თქვენ უნდა გავაკეთოთ, ასე რომ, რაც მოუწოდა Yeoman, Yeoman.io. და ეს არის ბრძანების ინსტრუმენტი, რომელიც ყველაფერს დაგეხმარებათ დასაყრდენი თქვენი რეაგირებას პროექტები მარტივად. 

ასე რომ თქვენ შეგიძლიათ წაიკითხოთ ამ მოგვიანებით, მაგრამ არსებობს გარკვეული ინსტრუმენტები რომ Yeoman სთავაზობს. ისინი ყველაფერს მოგცემთ შექმნათ რეაგირებას app ყველაფერი აგებული. ისევე, როგორც ეს თქვენ არ აშენდა ამ კომპონენტების აშენდა. ეს უნდა თქვენი სატრანსფორმატორო აშენდა. მათ აქვთ ბევრი მაგარი პერსონალის აშენდა ავტომატურად გამოყენებით ამ რამ მოუწოდა გენერატორები. 

ასე რომ, წაკითხვის შესახებ, თუ გნებავთ. უბრალოდ წასვლა Yeoman, Y-E-O-M-A-N და იპოვნით გენერატორების მოსწონს ეს. და გენერატორების მოსწონს ეს, უბრალოდ, როგორც ერთი არის რამდენიმე ბრძანების ბრძანებები. ეს თქვენ დასაყრდენი გარეთ მთელი რეაგირებას ოთახი თქვენთვის. ეს მიიღებთ ყველა სახელმძღვანელო piping, და grunt მუშაობა კეთდება თქვენთვის, და ამიტომ უბრალოდ ფოკუსირება უბრალოდ წერა რეაგირებას. 

ასე რომ, ძირითადად აშენებენ რეაგირებას app არის nontrivial. ეს სახაზო ყველა ერთად, მაგრამ არსებობს არის ინსტრუმენტი, რომელიც ამას თქვენთვის. ასე რომ, თუ გსურთ, რათა რეაგირებას app, ცდილობენ აკეთებს, რომ გზა. თუ გსურთ, რომ ექსპერიმენტი, შეგიძლიათ ცდილობენ გამოყენებით ამ CodePen იმიტომ, რომ ეს CodePen აქვს ყველა რეაგირება გაყვანილობა. მე ვაკეთებ ყველა სამუშაოები თქვენ უკვე. 

ასე რომ, თუ გსურთ, რომ, როგორც წარმოების გათავისუფლების ფაქტზე რეაგირებას app, სცადეთ ერთი ამ გენერატორების. თუ თქვენ უბრალოდ უნდა ითამაშოს გარშემო, ის ხშირად ღირს მხოლოდ მოსწონს ცდილობენ თამაშობენ გარშემო CodePen აქ. გასწავლოთ კარგი? ზემოთ. 

ასე რომ, ყველა მაქვს. ისევ და ისევ, ყველა კოდი და მაგალითები იქნება ამ საიტზე აქ. ასე რომ, კიდევ ერთხელ, ჩვენ ვერ გაიგო გაცილებით სინტაქსის რეაგირებას, არამედ ყველა იმ ცოტა სინტაქსური დეტალები, ეს ყველაფერი იქნება შესაძლებელი ამ საიტზე აქ. 

ასე რომ, მე რეკომენდაციას მოსწონს პირველი ნაბიჯი. განათავსეთ იგი თქვენს CodePen. სცადეთ მუშაობა მიღების მას მეორე ნაბიჯი. აქ არის მეოთხე ნაბიჯი, და მხოლოდ ვხედავ, სადაც თქვენ, რომ. 

ნებისმიერი უფრო მეტი შეკითხვა, შეამოწმეთ რომ გვერდზე ან მომაწოდეთ. ეს არის ჩემი ელ. მაგრამ მე მიყვარს დაგეხმაროთ ნებისმიერი კითხვები ალბათ დაახლოებით რეაგირებას. ასე რომ, yep, რომ ყველა მაქვს. დიდი მადლობა ყველა ძალიან ბევრი თვალს ან ესწრება. მე კი რაიმე შეკითხვები ალბათ მას შემდეგ, რაც ეს ახლა. ასე რომ, მადლობა ყველა თვალს.