[מוזיק פּלייינג] 

נעעל מעטאַ דאָ עס גייט. 

נו, אַלעמען, באַגריסן צו וועב אַפּס פון דער צוקונפֿט מיט רעאַגירן. דאס איז קס50. מיין נאמען איז נעעל. איך בין אַ טאַ פֿאַר קס50 און אַ סאָפאָמאָרע אין האַרוואַרד קאָלעגע און אַ זייער, זייער לייַדנשאַפטלעך וועב דעוועלאָפּער. אזוי איך בין זייער יקסייטינג צו זיין גערעדט צו איר הייַנט, צי איר ניטאָ דאָ אָדער אין שטוב וואַטשינג, וועגן רעאַגירן, וואָס איז, ווידער ווי איך געזאגט, די צוקונפֿט פון וועב אַפּפּס. 

אַזוי רעאַקט איז אַ וועב ראַם. און ווי איך ווע שוין טעלינג צו עטלעכע מענטשן דאָ, אַ ראַם איז נאָר אַ שטעלן פון מכשירים איר קענען נוצן צו ביניען און בויען אייער וועב אַפּ. און וועב אַפּפּס זענען, ווידער, וועבסיטעס וואָס זענען ינטעראַקטיוו ווי קרוקס, Twitter.com, Instagram.com, וועלכער. 

אַזוי Facebook איז אַ וועב ראַם וואָס איז געווען דעוועלאָפּעד דורך Facebook אַ פּאָר יאר באַקק-- רעאַקט איז. עס ס זינט שוין געניצט אין Facebook אויף זייער רירעוודיק אַפּפּס און די וועב אַפּ, ינסטאַגראַם. כאַן אַקאַדעמיע איז אן אנדער באַוווסט פרי אַדאַפּטער פון רעאַגירן. 

עס ס טאַקע שוין געטינג גאָר פאָלקס. אויב איר אלץ נוצן זאכן ווי ווינקלדיק אָדער באַקבאָון, דאָס איז פון די זעלבע משפּחה, אָבער עס האט זינט ווייַט אַוצטריפּ זייער פּאָפּולאַריטעט. עס ס די הייס נייַ זאַך. עס ס טאַקע, טאַקע ריזיק. 

און אַזוי רעאַקט איז גוט ניט נאָר ווי אַ וועב ראַם פֿאַר בנין Interfaces. עס ס גוט פֿאַר בנין וועב Interfaces. עס ס אויך אַ זאַך גערופֿן רעאַקט געבוירן וואָס לעץ איר בויען Interfaces פֿאַר אַנדרויד און יאָס און אפֿשר אנדערע Platforms אין דער צוקונפֿט ניצן נאָר די זעלבע דזשאַוואַסקריפּט קאָד. איר קען נוצן די פּינטלעך זעלביקער דזשאַוואַסקריפּט קאָד צו ופפירן וועבסיטעס, צו ופפירן אַנדרויד אַפּפּס און יאָס אַפּפּס. 

עס ס אַ זייער, זייער יקסייטינג צייַט. עס ס אַ טאַקע, טאַקע קיל געלעגנהייט. עס ס טאַקע אַ וניווערסאַל וועב צובינד אַנטוויקלונג געצייַג, אַזוי עס ס אַ זייער, זייער וויכטיק זאַך צו וויסן. און, ווי איך איז געווען טעלינג מענטשן איידער, דעם, איך טראַכטן, איז געגאנגען צו טוישן ווי מיר בויען וועב אַפּפּס אויף אייביק. אַזוי עס ס אפֿשר אַ ביסל היפּערבאָלע, אָבער איך טראַכטן עס ס אַ שיין גוט זאַך צו וויסן. 

גוט, אַזוי וואָס איז רעאַקט? רעאַגירן איז אַ ראַם איר קענען נוצן פֿאַר בנין Interfaces. אַ צובינד איז, ווידער, אַ וועב בלאַט, רעכט? אַזוי דאָ ס Instagram.com, ניצט רעאַגירן. 

רעאַגירן איז געבויט אויף דעם געדאַנק פון קאַמפּאָונאַנץ. א קאָמפּאָנענט איז אַ HTML עלעמענט אויף סטערוידז, אַזוי אַ HTML עלעמענט איז ווי אַ קנעפּל. עס ס אַ פּאַראַגראַף. עס ס אַ כעדער, רעכט? און ינסטאַגראַם וועט נוצן די, אָבער עס וועט אויך נוצן קאַמפּאָונאַנץ פון רעאַגירן. 

רעאַגירן קאַמפּאָונאַנץ זענען סאָופּעד-אַרויף HTML עלעמענטן וואָס האָבן זייער אייגן נאַטור קאַנטיינד ין זיי. אַזוי, ווי אַ בייַשפּיל, מיר קען האָבן אַ מאָל עלעמענט, אַ צייַט קאָמפּאָנענט, וואָס וועט אַנטהאַלטן ווי די צייַט שטעמפּל, איר וויסן, אַ פּראָפיל קאָמפּאָנענט וואָס וועט אַנטהאַלטן די פּראָפיל בילד און דער נאָמען פֿון דעם מענטש. עס קענען האָבן אַ ווי טאָמבאַנק, וואָס קענען ציילן ווי די נומער פון לייקס, און אויב איר גיט אויף עס, עס וועט פאַרגרעסערן די נומער פון לייקס. א קאָמפּאָנענט איז נאָר אַ בינטל פון HTML קאָד אַז האט עטלעכע פונקטיאָנאַליטי אלנגעוויקלט ין פון עס. אַזוי עס ס ווי אַ HTML עלעמענט אויף סטערוידז, ווי איך געזאגט פריער. איר קענען נעמען די קאַמפּאָונאַנץ, און איר קענען שטעלן זיי צוזאַמען צו מאַכן נייַ קאַמפּאָונאַנץ, אין דעם פאַל, אַ פּאָסטן קאָמפּאָנענט, וואָס כּולל אַלע דעם שטאָפּן. עס וואָלט אַנטהאַלטן צייט, profile, ליקעקאָונטער, אפֿשר די באַמערקן און אפֿשר די בילד זיך. און אַזוי וועב אַפּפּס זענען נאָר געבויט דורך גענומען קאַמפּאָונאַנץ און פּאַטינג זיי צוזאַמען. אַ ינסטאַגראַם קאָרמען איז גאָרנישט מער ווי אַ בינטל פון הודעות איינער נאָך דעם אנדערן, יעדער פּאָסטן כּולל ווי די צייט, פּראָפיל, ליקעקאָונטער, און אַזוי אויף. עס ס מין פון ווי בנין אַ הויז. איר טאָן ניט בויען די הויז פון די שפּיץ אַראָפּ. איר נעמען קאָמפּאָנענצ-- איר נעמען ווי די קלאָזעט. איר נעמען די בעדראָאָמ-- איר שטעקן זיי צוזאַמען, און איר האָבן אַ נייַ קאָמפּאָנענט. איר האָבן אַ נייַ טייל פון די הויז. 

אַזוי רעאַקט איז אַלע געבויט אַרום דעם געדאַנק פון קאַמפּאָונאַנץ אַז זענען ינטעראַקטיוו, וואָס זענען דעקלאַראַטיווע. ווי איר נאָר זאָגן וואָס אַ פּראָפיל איז, און עס רענדערז עס. זיי זענען קאָמפּאָסאַבלע. איר קענען נעמען אַ צייַט און אַ פּראָפיל, שטעלן זיי צוזאַמען, מאַכן עפּעס בעסער. און זיי ניטאָ ריוזאַבאַל, אַזוי אויב איר האָבן די מקור קאָד פֿאַר אַ פּאָסטן, איר קען ימבעד אַז ערגעץ. 

איר קענען ימבעד אַ ינסטאַגראַם זאַך אויף דיין אייגן וועבזייַטל. איר קענען ימבעד אין קרוקס, למשל, ווי לאַנג ווי עס ניצט רעאַגירן ווי געזונט. אַזוי קאַמפּאָונאַנץ זענען טאַקע, טאַקע, טאַקע שטאַרק בנין בלאַקס פון די וועב אַז קענען ווערן געניצט ערגעץ און שטעלן צוזאַמען צו מאַכן נייַ בנין בלאַקס. אַז ס די זייער, זייער הויך מדרגה איבערבליק. אַזוי, ווידער, אויב איר האָבן קיין שאלות בייַ קיין פונט וועגן די פֿילאָסאָפֿיע פון ​​רעאַקטאָר, די קאָודינג, צו האַלטן מיר, און לאָזן מיר וויסן. 

גוט, אַזוי רעאַגירן איז קיל ווייַל עס האט אַ אַנדערש וועג פון קוקן אין ווי איר בויען וועב אַפּפּס. איר ווע מיסטאָמע געהערט פון מווק, אַ מאָדעל איר קאָנטראָל אין קס50 אָדער וועלכער אנדערע פּראָובינג קלאסן איר נוצן. און רובֿ פראַמעוואָרקס זענען געבויט אַרום דער געדאַנק פון מווק. רעאַגירן איז ניט. רעאַגירן איז געבויט אַרום דער געדאַנק פון ונידירעקטיאָנאַל דאַטע לויפן ווי געזען דורך דעם טשאַרט אָדער Graphic דאָ. 

באַסיקאַללי, איר האָבן אַ דאַטע מקור. און די דאַטע מקור וועט באַשליסן ווי צו לייגן אויס זיכער קאַמפּאָונאַנץ. און די קאַמפּאָונאַנץ וועט דעריבער, ווען זיי טוישן, זיי וועלן זאָגן די דאַטע מקור צו טוישן. 

צו נוצן די ינסטאַגראַם לעמאָשל, איר זאל האָבן אַ רשימה פון פּאָסטן אַבדזשעקס ווי אין אַ דייטאַבייס אָדער עפּעס. אַז די דאַטן. און דעמאָלט אונדזער פּאָסטן קאַמפּאָונאַנץ וועט נעמען אַז דאַטע, און נוצן אַז דאַטע צו ופפירן אַ זאַך אויף דעם עקראַן. אַז ס וואָס די פייַל פון דאַטן צו קאָמפּאָנענט איז, און דעמאָלט אַז זעלביקער דאַטע איז געניצט צו ופפירן אַ בינטל פון קאַמפּאָונאַנץ. 

אין קרוקס מעסינדזשער, פֿאַר לעמאָשל, וואָס איז רעאַגירן, איר זאל האָבן אַ רשימה פון אַרטיקלען ווי דיין דאַטן מקור. און וואָס וואָלט ופפירן נישט נאָר דער רשימה פון אַרטיקלען אָבער אויך די רשימה פון Friends איר האָבן. איר האָבן די אַנרעד ציילן. אפֿשר אויך ופפירן די Facebook זאַך אַז ס אין די דנאָ פון Facebook.com. דער זעלביקער דאַטע איז אַ איין מקור פון אמת און אַז ז אַ פּלאַץ פון קאַמפּאָונאַנץ צו זיין רענדערד. און ווען איינער פון די קאַמפּאָונאַנץ איז געביטן, עס גייט צוריק און ענדערונגען די דאַטע מקור. 

איר שיקן אַ בריוול, רעכט? אַז ענדערונגען די דאַטע מקור. איר לייענען אייער אַרטיקלען, אַזוי איר שטעלן אַנרעד צו 0. אַז ענדערונגען די דאַטע מקור. און באַמערקן אַז אַלע פון ​​די פון איין פייַל געגאנגען צוריק צו דער זעלביקער דאַטע מקור, אַזוי איר וויסן, געגעבן אַ זיכער דאַטן שטעלן, איר וויסן פּונקט וואָס די חשבון איז געגאנגען צו קוקן ווי. עס ס דעטערמיניסטיק. איר וויסן, געגעבן זיכער דאַטע, וואָס דער בלאַט איז געגאנגען צו קוקן ווי. איר קענען פאָרויסזאָגן ווי עס ס געגאנגען צו ביכייוו און ווי דאס זענען געגאנגען צו אַרבעטן ווען זיי ניטאָ שטעלן צוזאַמען. 

און אויב איך געהאט אַ מיליאָן קאַמפּאָונאַנץ דאָ, עס וואָלט ביכייוו דער זעלביקער, רעכט? איר וואָלט ניט האָבן קיין טשודנע ינטערקאָננעקטיאָנס. איינער דאַטע רענדערד אַ מיליאָן קאַמפּאָונאַנץ. אַ מיליאָן קאַמפּאָונאַנץ קען צוריקגיין און ענדערן די דאַטע. און אַזוי דאָס איז זייער פייַן. מיר ניטאָ בנין קאָמפּאָסאַבלע, לייכט סקאַלאַבלע וועב אַפּפּס. 

איר האָבן איין דאַטע מקור, דער מקור פון אמת. אַז דערציילט דיין קאַמפּאָונאַנץ ווי צו לייגן אויס דעם בלאַט, און די קאַמפּאָונאַנץ וועט שעפּן ינטעראַקשאַן. און אויב זיי ווילן צו טוישן זאכן, נאָר גיין צוריק און דערציילן די דאַטע מקור צו טוישן. מאַכן זינען? אַזוי רעאַקט איז אַלע וועגן שכל ווי צו בויען אַ קאָמפּאָנענט און ווי צו מאַכן דיין קאָמפּאָנענט ינטעראַקט מיט די אַרויס וועלט. 

מאכן דעם קאָמפּאָנענט ינטעראַקט מיט די אַרויס וועלט ניצט אן אנדער טעכנאָלאָגיע גערופֿן פלוקס, וואָס איז אַ ראַם וואָס איז צוגעגעבן אויף שפּיץ פון רעאַגירן. מיר ניטאָ ניט געגאנגען צו רעדן וועגן אַז. מיר רע געגאנגען צו רעדן מער וועגן, געגעבן דאַטע, ווי קענען איר ופפירן אַ קאָמפּאָנענט? 

און אַזוי רעאַקט איז טאַקע קיל ווייַל איר קענען ניצן עס מיט קיין צוריק סוף איר ווילן. אויב איר האָבן ווי אַ פּיטהאָן צוריק סוף, אויב דיין פּיטהאָן קענען שפּייַען אויס עטלעכע דאַטן, רעאַגירן קענען ופפירן עס. אויב איר זענען ניט דזשס אַוטפּוץ פון דאַטן, רעאַגירן רענדערז עס. רובי ריילז אַרויף מיט דאַטע, רעאַגירן רענדערז עס. 

אַזוי רעאַקט איז בייסיקלי אַ וועב וויעוו-- אַ פראָנט סוף מיט קאַמפּאָונאַנץ פֿאַר קיין דאַטן מקור כוואַצאָועווער. און אַזוי געגאנגען פון דאַטן מקור צו רעאַגירן קאַמפּאָונאַנץ איז שיין גרינג. געגאנגען די אנדערע וועג איז אַ ביסל האַרדער. וואס ניצט פלוקס ווי איך דערמאנט פריער. מיר וועלן נישט באַקומען אין אַז. מיר וועט פאָקוס מער אויף דער דאַטן-צו-קאָמפּאָנענט זייַט. דעם וועג איר קענען מאַכן קיל, שפּאַס וועב אַפּפּס. עס וועט ניט ווירקן די אַרויס וועלט פֿאַר איצט, אָבער אַז ס אן אנדער געשיכטע. 

גוט, אַזוי אויב איר זענען דאָ פֿאַר מיין לעצט סעמינאַר איר וועט וויסן אַז אַלע פון ​​די קאָד פֿאַר הייַנט ס רעדן איז געגאנגען צו זיין ביי דעם URL דאָ, נעבעכדיק, דעם URL דאָ. און בייסיקלי מיר רע געגאנגען צו גיין דורך פיר טריט, אפֿשר פינף, מיסטאָמע נישט פינף. מיר וועט מאַך דורך פיר טריט פון בנין אַ מוסטער רעאַקט אַפּ. און אַזוי אַלע די מקור קאָד פֿאַר יעדער שריט פון די וועג איז געגאנגען צו זיין רעכט דאָ, אַזוי אויב איר ניטאָ ווייַטערדיק צוזאמען אין שטוב, פילן Free צו פּערוז דעם קאָד. אויב איר 'רע ווייַטערדיק צוזאמען דאָ, מיר וועט זיין ווייַזונג עס אויף דער עקראַן, אַזוי טאָן ניט זאָרג וועגן עס. אבער אויב איר ניטאָ אין שטוב, פילן Free צו באַזוכן דעם וועבזייַטל. און, יאָ, איר זאָל קענען צו באַקומען אַלע די קאָד איר 'ד אלץ דאַרפֿן דאָ. אַזוי עס ס אַ גוט אָפּנאַרן בויגן ווי געזונט פֿאַר דיין צוקונפֿט אַדווענטורעס מיט רעאַגירן. קיל, אַזוי אויב אַלעמען וואס ס דאָ, און אַפֿילו אויב איר ניטאָ אין שטוב, ציען אַרויף דעם וועבזייַטל, is.gd/cs50react, קיין הויפּטשטאָט, קיין אַנדערסקאָר, קיין גאָרנישט. 

איר וועט זען אַ חשבון וואָס קוקט אַ קליין ביסל ווי דעם. דאס איז אַ זאַך גערופֿן קאָדעפּען. קאָדעפּען איז אַ קאַלאַבערייטיוו קאָודינג סוויווע מיט וואָס איך קענען שרייַבן קאָד דאָ, און עס וועט זיין אויטאָמאַטיש געשיקט צו איר. און צו דעם וועג, איך קענען שרייַבן קאָד. איך קענען לויפן קאָד דאָ. 

פֿאַר עקסאַמפּלע-- און אויב עס רעלאָאַדס-- זען, איך בין פליסנדיק דזשאַוואַסקריפּט קאָד אויף דעם בלאַט רעכט דאָ, און עס וועט אויטאָמאַטיש ופפירן אַ וועב בלאַט מיט דעם דזשאַוואַסקריפּט קאָד. און אַזוי דעם איז אַ וועג פֿאַר אונדז צו פּרובירן אויס קאָד טאַקע שנעל אָן בעת ​​צו נוצן אונדזער שייַן אָדער נוצן אונדזער היגע מאַשין אָדער וועלכער. עס ס אַ זייער שנעל וועג פֿאַר איר צו מאָקקופּ און פּרובירן אויס פאַרשידענע מינים פון קאָד. 

אַזוי איך בין געגאנגען צו זיין גענומען לעמאָשל קאָד, פּאַטינג עס דאָ. מיר ניטאָ געגאנגען צו זיין אַרבעט דורך עס. און אויב איר ניטאָ אין שטוב, איר קענען ציען דעם אַרויף ווי געזונט. און איך ווע שוין אינסטאַלירן רעאַגירן דאָ, אַזוי איר קענען נאָר שרייב דיין אייגן קאָד דאָ, און פּרובירן עס ווי דיין אייגן שפּילפּלאַץ. 

יאָ, אויב אַלעמען צו עפענען זיך דעם לינק דאָ. ביטע געבן מיר אַ Thumbs אַרויף אַמאָל איר האָבן עס עפענען. קיל, קיל קיל. עס ס גאָרנישט דאָ פֿאַר איצט, אָבער מיר וועלן טוישן אַז זייער באַלד. 

גוט, אַזוי רעאַקט איז אַ דזשאַוואַסקריפּט ביבליאָטעק, און ווי אַזאַ, ריקווייערז וויסן פון דזשאַוואַסקריפּט, וואָס איז די וועב פּראָגראַממינג שפּראַך. און עס ס ווייל געניצט פֿאַר אנדערע זאכן איצט אויך אָבער בפֿרט די וועב אַנטוויקלען שפּראַך, אַזוי אויב איר זענט ונפאַמיליאַר מיט אַז, לייענען אַ פּלאַץ גערופֿן JSforCats.com. עס ס ווונדערלעך. איר קענען לערנען דזשאַוואַסקריפּט אין האַלב אַ שעה. עס ס גלייבן. 

אַזוי געבן עס אַ לייענען. מיר אויך איז אַ פּלאַץ פון HTML דאָ ווייַל מיר ניטאָ דיזיינינג וועב זייטלעך פון קורס. אַזוי אויב איר ניטאָ ונפאַמיליאַר מיט HTML, טשעק אויס HTMLdog.com. איך טראַכטן לערנען רעאַקט איז אַ מיליאָן מאל גרינגער אויב איר שוין וויסן די בנין בלאַקס. אויב איר האָבן די קאַמפּאָונאַנץ, עס ס גרינג צו מאַכן אַ ביגער קאָמפּאָנענט. אַז ס רעאַקט שפּראַך פֿאַר איר. 

אזוי גיין פאָרויס און געבן די זאכן אַ לייענען. פּאָז דעם ווידעא. געבן עס אַ לייענען אויב איר זענט אין שטוב אויב איר זענט נישט באַקאַנט מיט HTML אָדער דזשאַוואַסקריפּט גוט, אַזוי וואָס מיר רע געגאנגען צו טאָן איז מיר רע געגאנגען צו מאַכן אַ זייער יקערדיק פלאַשקאַרד אַפּ ניצן רעאַגירן. מיר ניטאָ געגאנגען צו האָבן אַ פלאַשקאַרד. איר קענען Flip די קאָרט צוריק און אַרויס. און מיר וועט אויך האָבן אַ רשימה פון אַלע די קאַרדס וואָס מיר האָבן, און אויב מיר ניטאָ געפיל אַמביציעס, מיר זאלן זיין קענען צו באַשטימען צווישן קאַרס דורך געבן אַ קליק אויף זיי. 

אבער דעם איז, פון דיין נאַקעט ביינער, אַ זייער פּשוט רעאַקט אַפּ. און אַזוי דעם איז אַקטשאַוואַלי ניט נישטיק צו ינסטרומענט, אָבער מיר ניטאָ געגאנגען צו ווייַזן אַז, אויב איר טאָן דעם, עס ס זייער, זייער גרינג צו פאַרברייטערן עס אויב אנדערע מענטשן העלפֿן איר מיט אים. אַזוי מיר רע געגאנגען צו גיין דורך פיר טריט סטאַרטינג פון קראַצן צו בויען דעם. 

גוט, אַזוי די פיר טריט, מיר וועט אָנהייבן אַוועק מיט דער ערשטער שריט. דער ערשטער שריט איז געגאנגען צו זיין בנין דיין ערשטער קאָמפּאָנענט. ווי איך געזאגט פריער, אַ קאָמפּאָנענט אין רעאַקט איז נאָר אַ HTML עלעמענט אויף סטערוידז. עס ספּעסיפיעס די HTML און עטלעכע נאַטור, און עס וועט ספּעציפיצירן ווי מענטשן קענען ינטעראַקט מיט אים ווי עס וואָלט האָבן ינערלעך שטאַט. ווי אַ קנעפּל וועט וויסן ווי ווי פילע מאל עס ס 'שוין קליקט למשל, און עס וועט וויסן ווי צו לייגן זיך אויס. 

אַזוי לאָזן ס גיין פאָרויס און בויען אונדזער ערשטער קאָמפּאָנענט ניצן דזשאַוואַסקריפּט. אַזוי אויב דער סינטאַקס קוקט טשודנע, אַז ס מחמת עס מין פון איז. אַזוי, ווידער, מיר רע געגאנגען צו מאַכן אַ בייַטעוודיק געהייסן אַפּ ניצן די קיווערד לאָזן, וואָס מאכט אַ בייַטעוודיק, לאָזן אַפּ גלייַך רעאַקט.קרעאַטעקלאַסס. 

רעאַגירן איז אַ ביבליאָטעק און האט די שאַפֿן סאָרט פֿונקציע. און דעם פֿונקציע איז אַ ביסל פון קאָד אַז איר קענען נוצן צו שאַפֿן אַ נייַ טיפּ פון רעאַקט קאָמפּאָנענט. און אַזוי רעאַקט.קרעאַטעקלאַסס מאכט אַ קאָמפּאָנענט, און דעם קאָמפּאָנענט וועט קענען צו טאָן שטאָפּן. די הויפּט זאַך עס קענען טאָן איז ופפירן עפּעס, ופפירן ווי אַ פֿונקציע. 

ווידער, אויב דעם אינדעקס איז ניט קלאָר ווי דער טאָג צו איר, איך רעקאָמענדירן איר גיין אויף דזשס פֿאַר קאַץ און טשעק עס אויס. איז אַז זומד אין גוט גענוג? קיל. 

אזוי יעדער קאָמפּאָנענט דאַרף צו האָבן אַ ופפירן פונקציאָנירן. די ופפירן פונקציאָנירן זאגט, וואָס טאָן איך דרוק אויף די פאַרשטעלן? אבער די קאָמפּאָנענט איז אַרויסגעוואָרפן אויב עס גייט נישט וויסן וואָס צו דרוקן אויף די פאַרשטעלן, אַזוי איר דאַרפֿן צו האָבן אַ ופפירן פונקציאָנירן. 

אַזוי אין די ופפירן זאַך, איר נאָר דאַרפֿן צו צוריקקומען עטלעכע HTML. און וואָס ס קיל איז אַז עס ס אַ זאַך גערופֿן דזשסקס, וואָס איז אַ פאַרלענגערונג פון דזשאַוואַסקריפּט אַז איז געניצט דורך רעאַגירן. עס לאָזן ס איר שרייַבן די HTML ין פון דיין דזשאַוואַסקריפּט, וואָס סאָונדס מין פון טשודנע ווען איר ערשטער טראַכטן וועגן אים, אָבער עס מאכט אַ פּלאַץ פון זינען דערנאך. אַזוי מיר קענען טאָן דעם. אויב איר ניטאָ באַקאַנט מיט HTML, איך וויסן מיר האָבן אַ דיוו מיט אַ גענעראַל ציל קאַנטיינער פֿאַר שטאָפּן. מיר קענען צוריקקומען אַ דיוו, און אינעווייניק דעם דיוו, מיר קענען שטעלן שטאָפּן. 

אַזוי לאָזן ס זאָגן מיר ווילן צו ופפירן נאָר אַ גלייַך-אַרויף פלאַשקאַרד פֿאַר איצט. די פלאַשקאַרד, איך וואָלט זאָגן, וועט האָבן אַ קשיא און ענטפֿערן. אַזוי ין דעם דיוו, לאָזן ס דרוקן אויס אַ פּאַראַגראַף וואס זאגט קוועסטיאָנ-- וואָס איז די לעצט ענטפֿערן צו לעבן, די אַלוועלט? און דעמאָלט דער ענטפער איז געגאנגען צו זיין, פון קורס, 42. 

וואָס האט ניט קומען אַרויף געזונט אין אַלע. יאָ, אַזוי בייסיקלי איר קענען טאַקע שרייַבן די HTML ין דיין דזשאַוואַסקריפּט. און דעם איז געגאנגען צו זיין געדרוקט אויס אין דעם עקראַן. אַזוי לאָזן ס פּרובירן עס אויס. 

אַזוי מיר האָבן אונדזער קאָמפּאָנענט. מיר דאַרפֿן צו זאָגן רעאַגירן צו שטעלן די קאָמפּאָנענט אויף די פאַרשטעלן אַזוי רעאַקט.רענדער, אַזוי באַמערקן אַז מיר מייַכל אַפּ ווי קיין אנדערע עלעמענט. מיר שרייַבן עס ווי עס איז געווען אַ HTML עלעמענט. ווי אָנשטאָט זאגן ווי ימג פֿאַר בילד אָדער פּ פֿאַר פּאַראַגראַף, איר שרייַבן אַפּ, אַזוי אַפּ איז באהאנדלט ווי אַ HTML עלעמענט. ווי איך געזאגט פריער, עס ס אַן עלעמענט אויף סטערוידז. 

אזוי איר ופפירן אַפּ, און איר געבן עס אַ פּלאַץ צו לייגן עס. און דעם איז ווי איר קענען זאָגן עס ווו צו שטעלן עס. איך האָבן Created אַ פּשוט דיוו אויף די חשבון גערופֿן מיט אַ שייַן פון בלאַט, און אַז ס ווו די עלעמענט ס געגאנגען צו גיין. 

און מיר ניטאָ ניט געגאנגען צו לויפן מיט HTML. באַסיקאַללי דעם איז געגאנגען צו באַקומען שטעלן ין פון דעם בלאַט עלעמענט אַז מיר האָבן אויף דעם עקראַן. אזוי עס ראַנז דעם קאָד, און עס דראָז דעם זאַך אויף די פאַרשטעלן, אַזוי דאָ מיר זענען. מיר האָבן געמאכט אונדזער ערשטער רעאַקט קאָמפּאָנענט. 

אַזוי נאָר ווי אַ ריקאַפּ, מיר דזשענטלי געמאכט אַ נייע טיפּ פון קאָמפּאָנענט, רעכט? אַז ס וואָס די רעאַקט.קרעאַטעקלאַסס. און אין אַז קאָמפּאָנענט, מיר דערציילט אים וואָס עס זאָל טאָן. ווען דעם קאָמפּאָנענט איז צו ווערן געדרוקט אַנטו די פאַרשטעלן, עס וועט דרוקן אויס די דיוו מיט די צוויי פּאַראַגראַפס ין פון עס. 

און וואָס מיר האבן, מיר געמאכט אַ נייַ אַפּ ניצן די ווינקל קאַנטיקער אַפּ נאָוטיישאַן. מיר דערציילט עס צו לייגן עס ין דעם בלאַט עלעמענט. און אַזוי וואָס איך האבן, עס Created אַ נייע אַפּ פון וואָס טעמפּלאַטע. און דעמאָלט איך דערציילט עס צו ופפירן עס. אזוי עס האט געזאגט, גוט, אַפּ, וואָס זאָל איך דרוקן אויס? אַפּ זאגט, גיין דרוקן אויס אַ דיוו מיט צוויי פּאַראַגראַפס ין פון עס. און וווואַלאַ, עס ס אונדזער דיוו מיט צוויי פּאַראַגראַפס ין פון עס. מאַכן חוש אַזוי ווייַט? 

אַזוי, ווידער, די גאנצע אַרויסרופן פון רעאַקט איז נאָר געוואוסט ווי צו מאַכן קאַמפּאָונאַנץ. ווי צו מאַכן די קאַמפּאָונאַנץ אַרבעטן צוזאַמען. איצט אַז מיר ווע געמאכט אונדזער ערשטער קאָמפּאָנענט, לאָזן ס גיין צוריק און מאַכן קאַמפּאָונאַנץ קוסטאָמיזאַבלע. אַזוי איר וויסן ווי אין HTML איר קענען געבן דיין קנעפּלעך קלאסן? איר קענען געבן דיין אַנגקערז די הרעף. איר קענען געבן דיין ינפּוץ אַ טיפּ, רעכט? איר קענען געבן מער מנהג פּראָפּערטיעס צו אַלע פון ​​דיין עלעמענטן צו מאַכן עס מער טשיקאַווע. און מיר אַקטשאַוואַלי קענען טאָן די פּינטלעך זעלבע זאַך. 

אַזוי לאָזן ס זאָגן מיר ווילן אונדזער אַפּ צו גיין ופפירן קיין קאָרט. רעכט איצט מיר נאָר רענדערד אַ האַרדקאָדעד קאָרט. מיר וויסן עס ס נאָר איין קאָרט עס קענען טאָן, אַזוי מיר ניטאָ געגאנגען צו פּרובירן און טוישן דעם איצט אַזוי אַז מיר קענען נאָר געבן עס עטלעכע קאָרט. עס וועט דרוקן אויס די קאָרט. 

איר דארף צו פּרובירן און מאַכן אייער קאַמפּאָונאַנץ אַ זייער אַלגעמיין ציל. אזוי דעם וועג איך קען בליצפּאָסט דעם מיין פרייַנד און זייַן ווי, וועלכער פלאַשקאַרד איר האָבן, נאָר קאָרמען עס אין דאָ, און עס וועט טאָן עס דורך זיך. איר קענען שטעלן אנדערע זאכן אין דיין אייגן אַפּ. 

אבער ערשטער, לאָזן ס ברעכן דעם אַרויף אין צוויי קאַמפּאָונאַנץ, אָבער מיר ווילן צו אָפּטיילן די קאָרט דרוק טייל פון די פאַקטיש אַפּ טייל. אַזוי וואָס מיר קענען טאָן איז מיר קענען טוישן דעם פון אַפּ צו קאַרדוויעוו, נאָר אַ נייע נאָמען פֿאַר די אַפּ, און מיר קענען מאַכן אַ נייַ קאָמפּאָנענט גערופֿן אַפּ, ניט צו זיין צעמישט מיט די אַלט אַפּ. מיר'ווע גאַט דער קרעאַטעקלאַסס, און ווי אין HTML, איר קענען נעסט רעאַקט קאַמפּאָונאַנץ ין פון יעדער אנדערער. 

אַזוי אין דעם ופפירן פֿונקציע, פֿונקציע צוריקקומען קאַרדוויעוו, און דעם איז די פּינטלעך זעלבע זאַך. זען וואָס עס ס די זעלבע זאַך? אָנשטאָט רענדערינג נאָר די אַפּ אַז האט די דיוו און פּערינג ין פון עס, די אַפּ רענדערז די קאַרדוויעוו, און די קאַרדוויעוו רענדערז די דיוו און פּאַראַגראַף. אזוי דעם איז אונדזער ערשטער בייַשפּיל פון נעסטינג יסודות ין פון יעדער אנדערער. טוט וואָס מאַכן זינען? אַזוי, ווידער, מיר האָבן אַ קאַרדוויעוו עלעמענט. מיר האָבן אַפּ עלעמענטן אַז עס ס ביגער ווי. 

גוט, אַזוי מיר וועלן אונדזער קאַרדוויעוו-- אויב איר געבן אַ גוט קאַרדוויעוו אַ זיכער קאָרט, עס וועט דרוקן אויס פֿאַר איר, רעכט? אַזוי ערשטער, מיר דאַרפֿן צו מאַכן אַ קאָרט, אַזוי לאָזן ס מאַכן אַ קאָרט כייפעץ. אַזוי לאָזן מיין קאָרט עקוואַל-- אויב איר 'רע אַלע באַקאַנט, דעם איז נאָר די נאָוטיישאַן-מאכן כייפעץ אין דזשאַוואַסקריפּט. עס ס מין פון ווי אַ סטרוקט אין C, אַזוי מיר געמאכט אַ קאָרט, און אַזוי איצט מיר קענען פאָרן דעם קאָרט ווי אַ פאַרמאָג אָדער ווי אַ אַטריביוט אין HTML טערמינאָלאָגיע צו אונדזער אַפּ. אַזוי מיר קענען טאָן דאָס, אַפּ קאָרט יקוואַלז מיקאַרד. 

איר וויסן ווי אין ינפּוט, איר טאָן ינפּוט טיפּ יקוואַלז טעקסט אָדער קנעפּל סאָרט יקוואַלז BTN פֿאַר באָאָצטראַפּ ,? זעלביקער געדאַנק, אַפּ קאָרט עקוואַלס-- איר ווע גאַט צו שטעלן ברייסאַז הערע-- אַפּ קאָרט יקוואַלז מיקאַרד, אַזוי דעם זאגט מיר האָבן דעם קאָרט כייפעץ. איך בין געגאנגען צו פאָרן עס ווי אַ פאַרמאָג צו די אַפּ קאָמפּאָנענט. און דעם אַפּ קאָמפּאָנענט וועט קענען צו צוטריט עס און טאָן טשיקאַווע שטאָפּן מיט אים. 

אַזוי אונדזער אַפּ איז געגאנגען צו זיין געגעבן אַ קאָרט, אַזוי פֿאַר איצט, זאל ס האָבן די אַפּ נאָר געבן די קאָרט צו די קאַרדוויעוו זיך ווייַל ווי די אַפּ איז נישט געגאנגען צו וויסן וואָס צו טאָן מיט אים, אַזוי מיר וועט נאָר געבן עס צו די קאַרדוויעוו. אזוי מיר וועט פאָרן עס די זעלביקער וועג, קאָרט יקוואַלז, און אַזוי יעדער קאָמפּאָנענט קענען צוטריט די זאכן וואָס האט שוין געגעבן צו אים. זיי קענען צוטריט די פּראָפּערטיעס וואָס האָבן שוין געגעבן צו עס ניצן דעם סינטאַקס, טהיס.פּראָפּס.קאַרד. 

אַזוי וואָס כאַפּאַנז דאָ איז איר האָבן די מיקאַרד כייפעץ. איר פאָרן עס אין די אַפּ ניצן אַפּ קאָרט יקוואַלז מיקאַרד. אַז קאָרט כייפעץ איז געגעבן צו דיין אַפּ. די אַפּ קענען צוטריט עס ווי טהיס.פּראָפּס.קאַרד. עס ס מין פון ווי אַ בילד ווייסט וואָס עס ס מקור איז. 

דעם אַפּ ווייסט וואָס עס ס קאָרט איז, און עס קענען טאָן שטאָפּן מיט אים. עס קענען טאָן קאָמפּוטאַטיאָנס. עס קענען מאַכן דיסיזשאַנז באזירט אַוועק פון עס. 

פֿאַר איצט, איך איז געגאנגען צו פאָרן טהיס.פּראָפּס.קאַרד אַנטו די קאַרדוויעוו. מאַכן חוש אַזוי ווייַט? עס וועט מאַכן מער געפיל איצט. 

גוט, אַזוי איצט מיר ניטאָ בייַ קאַרדוויעוו. אונדזער קאַרדוויעוו, געגעבן די קאָרט, זאָל דרוקן אויס זייַן קשיא און ענטפֿערן. רעכט איצט מיר נאָר געדרוקט אויס עטלעכע האַרדקאָדעד פֿראגן און ענטפֿערס. מיר דאַרפֿן צו רעכענען אָוט-- מיר דאַרפֿן צו פרעגן די קאָרט אַז זיי געגעבן אונדז וואָס איז די קשיא און ענטפֿערן, און דערנאך דרוק דעם אויס אין דעם עקראַן. 

אַזוי מיר קענען טאָן דאָס דאָ. אין ופפירן בעגינ-- ערשטער טאָן יקוואַלז. אַזוי וואָס מיר רע טאן דאָ איז מיר וויסן אַז די קאַרדס זענען געגעבן אונדז צו אַ פאַרמאָג, רעכט? עס ס געגעבן צו אונדז ווי אַ ינפּוט. ווי עס ס כּמעט ווי טענות צו אַ פֿונקציע. די קאָרט איז אַן אַרגומענט כּמעט צו דעם קאַרדוויעוו. 

מיר וועט עקסטראַקט אַז, און שטעלן עס אין די בייַטעוודיק קשיא. מאַכן זיכער די ענטפער איז צו די בייַטעוודיק ענטפֿערן. פּראַמפּס אַז קאָרט צו ענטפֿערן. און איצט אַז מיר האָבן די, אַנשטאָט פון דרוקן אויס אַז טעקסט, מיר רע געגאנגען צו דרוקן אויס וועלכער זיי האט אונדז. 

אזוי דעם סטופפ-- אַזוי מיר ניטאָ געגאנגען צו שטעלן אויס פֿרעג ענטפֿערן. זאל ס זען אויב דאָס אַרבעט. קיל, אַזוי לאָזן ס שריט דורך עס איינער מער צייַט נאָר צו זיין זיכער. 

אַזוי מיין קאָרט איז קאָרט כייפעץ, און מיר זענען געבן אַז קאָרט צו די אַפּ. און די אַפּ איז געגאנגען צו נעמען די קאָרט און געבן עס צו די קאַרדוויעוו. און דעם קאַרדוויעוו זאגט, אויב איר געבן מיר קיין פלאַשקאַרד כייפעץ, איך וועט דרוקן אויס זייַן קשיא און זייַן ענטפער, רעכט? 

אזוי וואָס איך קען טאָן איז איך קענען שיקן דעם קאָד, דער ערשטער ווי 10 שורות פון מיין קאָד, צו מיין פרייַנד. ער קען ימבעד עס אין זיין אייגן אַפּלאַקיישאַן. און ווי לאַנג ווי ער האט די זעלבע זאַך, ווי קאַרדוויעוו קאָרט יקוואַלז דעם, ווי לאַנג ווי ער Created די קאַרדוויעוו און געגעבן אים די רעכט אינפֿאָרמאַציע, ער קען ופפירן זייַן אייגן קאָרט. און אַזוי דעם וועג, עס ס אַ טאַקע קיל וועג פֿאַר איר צו בויען קאַמפּאָונאַנץ אַז נוצן יעדער אנדערער, ​​רעכט? דעם קאָרט, איך קען אַרויסגעבן דעם קאַרדוויעוו אויף די אינטערנעט, און מען וואָלט קענען צו נוצן עס. אַזוי בייסיקלי, עס ס ווי איינער פון די נאָרמאַל פֿעיִקייטן אין די C ביבליאָטעק. 

עס איז אַ פֿונקציע ווו עמעצער האט געשריבן עס. איר געבן אַ געוויסע ינפּוט. עס וועט פּראָדוצירן אַ זיכער רעזולטאַט. איר טאָן ניט זאָרגן ווי עס אַרבעט ינעווייניק. ווי לאַנג ווי איר געבן עס די רעכט ינפּוט, עס וועט מאַכן די רעכט רעזולטאַט. 

און אַ קאָמפּאָנענט קענען זיין געדאַנק פון די זעלבע וועג. דאס קאַרדוויעוו איז ווי אַ ביבליאָטעק פֿונקציע. אויב איר געבן עס עטלעכע קאָרט ווי אַ פאַרמאָג, עס וועט דרוקן אויס די אינהאַלט פון וואָס קאָרט. ווי אויב איך טוישן מיין קאָרט אָנשטאָט זיין ווי וואָס איז 5 פּלוס 37, עס וועט דערהייַנטיקן אַקאָרדינגלי. אַזוי נאָר דורך טשאַנגינג די ינפּוט, עס געץ אַ זיכער רעזולטאַט. אַזוי איר קענען טראַכטן פון קאַמפּאָונאַנץ כּמעט ווי פֿעיִקייטן אין דעם וועג, וואָס איר קענען שטעלן צוזאַמען. איר באַקומען ינפּוט, ווי דעם קאַרדוויעוו ווי די ינפּוט, איר באַקומען רעזולטאַט. אין דעם פאַל, רעזולטאַט איז די HTML. מאַכן חוש אַזוי ווייַט? קיל, אַזוי ווידער, פּראָפּערטיעס זענען ווי איר קענען פאָרן אינפֿאָרמאַציע אין און אויס פון קאַמפּאָונאַנץ. 

גוט, אַזוי לאָזן ס מאַכן דעם זאַך ינטעראַקטיווע. רעכט איצט עס ס מין פון נודנע. וואָס איז [ינאָדאַבאַל]? איר קענען דרוקן עטלעכע אויס, אָבער אַז ס אַלע עס קענען טאָן. 

אַזוי לאָזן ס גיין צוריק צו דער אַלט קשיא נאָר פֿאַר איצט. גוט, אַזוי רעכט איצט די קאַמפּאָונאַנץ זענען נודנע ווייַל אַלע זיי טאָן, זיי באַקומען ינפּוט. זיי מאַכן רעזולטאַט, רעכט? אַז ס מין פון נודנע. מיר ווילן צו האָבן אונדזער קאַמפּאָונאַנץ צו קענען צו האָבן עטלעכע מין פון ינערלעך שטאַט, ווי געדענקען עפּעס. 

פֿאַר אַ פלאַשקאַרד, פֿאַר לעמאָשל, וואָס מין פון שטאַט זאל איר ווילן צו געדענקען פֿאַר אַ פלאַשקאַרד? וואָס צייַטווייַליק סטאַטוס זאל איר ווילן צו געדענקען פֿאַר אַ פלאַשקאַרד אין אַ פלאַשקאַרד אַפּ? וילעם: צי עס ס שוין פליפּפּעד? נעעל מעטאַ: יאָ, רעכט. אַזוי איר זאל וועלן צו האַלטן שפּור פון זענען איר פּנים אַרויף אָדער זענען איר פּנים אַראָפּ אויף דער קאָרט. On Facebook, למשל, איר וואָלט ווילן צו געדענקען ווו אין די נייַעס קאָרמען זענען איר אָדער ווי ווער ס פּראָפיל זענען איר טאן רעכט איצט. 

אויף מעסינדזשער, ווי וואָס טעקסט איר טיפּ אין די ינפּוט קעסטל, רעכט? אויב איר דערפרישן די בלאַט, עס גייט אַוועק. אבער איר טאָן ניט טאַקע זאָרגן. עס ס נאָר צייַטווייַליק. יאָ? 

וילעם: [ינאָדאַבאַל] נעעל מעטאַ: ווי אַ בליץ קאָרט, ווי איר קענען זיין געזען די קשיא זייַט אָדער די ענטפער זייַט? 

וילעם: גוט. 

נעעל מעטאַ: ווי אַ צוויי סיידאַד פלאַשקאַרד, רעכט? יאָ, אַזוי איר ווילן צו האָבן דעם געדאַנק פון איצט איך האָבן פּראָפּערטיעס, וואָס איז ווי ינפּוץ, אָבער שטאַט, וואָס איז צייַטווייַליק, uh, ווו איר זענט אויף דעם בלאַט, רעכט? ווידער, איך געזאגט אין קרוקס מעסינדזשער, איך האָבן ווי וואָס מענטש איר ניטאָ וויוינג Facebook אָדער ווער ס פּראָפיל, רעכט? 

דאס איז בלויז צייַטווייַליק. עס ס וויכטיק צו ווייַזן דער באַניצער וואָס ס 'געגאנגען אויף, אָבער דערפרישן די בלאַט. עס טוט ניט טאַקע ענין. אַזוי עס ס צייַטווייַליק שטאַט, אַזוי מיר אַלע עס שטאַט. 

אַזוי, ווידער, עס ס שטאַט און פּראַפּס. פּראַפּס איז ינפּוט געגעבן פון דיין דאַטן מקור. שטאַט איז פּונקט ווי דעפאַולץ. עס ס פּונקט ווי שטאָפּן אַז מאכט די זאַך ינטעראַקטיווע. 

אַזוי אין אונדזער קאַרדוויעוו-- לאָזן ס האָבן אונדזער קאַרדוויעוו-- אַזוי עס איז געווען פייַן. וואָס מיר רע געגאנגען צו טאָן דאָ, מיר רע געגאנגען צו פאַרבינדן קאַרדוויעוו און בלויז קאַרדוויעוו. און אַזוי מיין פרייַנד וואס גאַט דעם, זיי וואָלט ניט באַמערקן קיין חילוק. זיי וואָלט ניט האָבן צו טוישן קיין פון זייער אייגן קאָד, אָבער זיי 'ד זען זייער קאַרדוויעוו גאַט סאָופּעד אַרויף. אַז ס אַ פייַן טייל וועגן קאַמפּאָונאַנץ. 

גוט, אַזוי אין אונדזער קאַרדוויעוו, לאָזן ס פּרובירן און האַלטן שפּור פון צי מיר ניטאָ לבֿנה זיך אָדער פּנים אַראָפּ. אין רעאַקט מיר טאָן דעם דורך ערשטער ספּעסיפיינג די ערשט שטאַט. ווו טוט די קאָרט נעמען? 

אַזוי זיין אַ פֿונקציע גערופֿן געטיניטיאַלסטאַטע פֿונקציע, און מיר קריק אַ כייפעץ. דעם כייפעץ כּולל עטלעכע שטאַט, און אַ שטאַט איז נאָר אַ שליסל-ווערט פּאָר. ווי אין אָנווייַזן, איר האָבן אַ שליסל און אַ ווערט, איר האָבן ווי נאָמען איז אַ שטריקל. 

אין דעם פאַל, לאָזן ס זאָגן פראָנט איז אמת. דאס זאגט אַז מיר האָבן אַ שטאַט. איינער קאָמפּאָנענט פון דער שטאַט איז אַ אַטריביוט גערופֿן פראָנט. [ינאָדאַבאַל], אַזוי דורך ניט ויסצאָלן, מיר ניטאָ אין די פראָנט פון די קאָרט, און מיר קענען טוישן דעם ווי מיר Flip די קאָרט. מאַכן זינען? 

גוט, אַזוי אין ופפירן, רעכט איצט, מיר 'רע ווייַזונג די קשיא און דער ענטפער. איצט וואָס מיר זאָל טאָן איז ווייַזן די קשיא אויב מיר 'רע אויף די פראָנט פון די קאָרט אַזוי די ענטפער איז פֿאַר די צוריק פון די קאָרט. אַז ס וואָס איר אַלע מאַכן די קאָרט ינטעראַקטיווע. אַזוי לאָזן ס פּרובירן און צו דעם דאָ. נו, ערשטער נאָר מאַכן אַ בייַטעוודיק. מיר קענען פרעגן איצט טהיס.סטאַטע.פראָנט. מיר צוטריט שטאַט דער זעלביקער מיר צוטריט פּראַפּס, אַזוי טהיס.סטאַטע.פראָנט. 

אויב מיר ניטאָ פראָנט, דעמאָלט טעקסט איז טהיס.פּראָפּס.קאַרד.קוועסטיאָן. אויב מיר 'רע אויף די פראָנט פון די קאָרט, מיר רע געגאנגען צו פּרובירן און כאַפּן די קשיא פון די קאָרט. אַנדערש, אויב מיר ניטאָ אויף די צוריק פון די קאָרט, וואָס טוט מיר טאָן? 

וילעם: די ישועה? 

נעעל מעטאַ: יאָ, אַזוי טעקסט יקוואַלז טהיס.פּראָפּס.קאַרד.אַנסווער. אבער אויב איר באַמערקן, מיר 'רע ניצן די שטאַט צו מאַכן אַ באַשלוס ווייַל איצט דער קאָמפּאָנענט וועט קוקן אַנדערש באזירט אַוועק ווי די ינטעראַקט מיט אים. אזוי אַנשטאָט פון דרוקן אויס דעם, מיר וועט נאָר דרוקן אויס די טעקסט. קיל, אַזוי איצט, ווי איר זען, מיר זען בלויז די קשיא. און אויב איך טוישן די שטאַט דאָ מאַניואַלי צו פראָנט איז פאַלש מיר באַקומען 42 צוריק. 

אַזוי, ווידער, דעם קאָמפּאָנענט האט זייַן אייגן שטאַט. ווי אַ קנעפּל ווייסט צי עס ס שוין געדריקט אָדער נישט, דעם זאַך ווייסט וואָס איז אויף די פראָנט אָדער אויף די צוריק. דורך ניט ויסצאָלן, עס ס אויף די פראָנט. און דעריבער אויב עס ס אויף די פראָנט, מיר וועט דרוקן אויס די קשיא. אויב עס ס אויף די צוריק, מיר וועט דרוקן אויס דעם ענטפֿערן. אַזוי, ווידער, די אינפֿאָרמאַציע געגעבן איז דער זעלביקער. עס נאָר קוקט אַנדערש באזירט אויף ווי איר פּראָגראַם עס. אזוי, למשל, Facebook מעסינדזשער, אַפֿילו אויב איר באַקומען די זעלבע דאַטע מקור, עס זאל קוקן אַנדערש ווייַל די שטאַט איז אַנדערש. איר 'רע איר זוכט אין אַ אַנדערש מענטש 'ס אָנזאָג. 

גוט, אַזוי דאָס איז אַלע געזונט און גוט, אָבער איצט וואָס ס אַקשלי מאַכן אונדז קענען צו טוישן, צי אונדזער קאָרט איז פראָנט אָדער צוריק. מיר קענען טאָן דעם דורך אַדינג אַ Flip קנעפּל, אַ קנעפּל צו די קאָרט אַז וועט Flip די קאָרט אויב עס ס [ינאָדאַבאַל]. אַזוי לאָזן ס לייגן אַ קנעפּל דאָ, דעם קנעפּל, און דעם קנעפּל וועט זאָגן Flip. 

און אַזוי רעכט איצט, עס טוט ניט טאָן עפּעס. עס נאָר קוקט פייַן. וואָס מיר קענען טאָן איז מיר קענען לייגן אַ גיט האַנדלער, אָנקליקק יקוואַלז טהיס.פליפּ, און מיר וועט דעפינירן Flip שפּעטער. אבער בייסיקלי, אָנקליקק איז אַ פֿונקציע אַז געץ גערופֿן ווען דער באַניצער קליקס עס. 

אזוי דעם קנעפּל וועט וויסן ווען עס ס 'שוין קליקט. געגאנגען עס ס שוין קליקט, עס וועט Flip די קאָרט. עס ס מין פון ווי דיין פּיצע עקספּרעס באָכער. ניטאָ ווי, אַלע רעכט, ווען עמעצער קאַללס מיר, איך וועט באַפרייַען פּיצע, רעכט? 

איר רעגיסטרירן דעם צוהערער. איר הערן פֿאַר אַ געשעעניש. איר באַקומען גערופֿן, און ווען די געשעעניש כאַפּאַנז, איר טאָן עפּעס. איר באַקומען פּיצע. אין דעם פאַל, ווען איר ניטאָ קליקט, איר Flip די קאָרט. 

און אַזוי מיר דאַרפֿן צו דעפינירן אַ פֿונקציע וואָס וועט Flip די קאָרט, אַזוי מיר וועט שרייַבן אַז רעכט דאָ, Flip פֿונקציע. און אַזוי וואָס טאָן איר טראַכטן Flip וועט טאָן? ווידער דעם געץ גערופֿן ווען מיר גיט די Flip קנעפּל. וואָס זאָל דער פֿונקציע Flip טאָן? 

וילעם: טוישן טהיס.סטאַטע.פראָנט פון אמת צו פאַלש, פאַלש צו אמת. 

נעעל מעטאַ: יאָ, אַזוי נעמען וועלכער טהיס.פראָנט יס-- די פראָנט שטאַט איז. נעמען די פראָנט שטאַט, אויב עס ס אמת, מאַכן עס פאַלש. אויב עס ס פאַלש, מאַכן עס אמת, רעכט? אַזוי לאָזן ס פּרובירן אַז. 

איר קענען נישט טוישן שטאַט נאָר דורך טאן טהיס.סטאַטע. איר קענען ניט טאָן דעם. איר קענען ניט טאָן אַז. איר האָבן צו נוצן אַ פֿונקציע גערופֿן טהיס.סעצטאַטע. 

אזוי איר קענען זאָגן טהיס.סעצטאַטע פראָנט צווייפּינטל דעם ווו, ווידער, די עקסקלאַמיישאַן פונט מיטל די פאַרקערט. איך טרעפן אויב דעם. סטאַטע.פראָנט איז אמת, עס וועט קער פאַלש. אַזוי מיר וועט שטעלן די שטאַט פון אמת צו פאַלש. אויב עס ס פאַלש, מיר וועט שטעלן עס פאַלש צו אמת. 

נאָר באַמערקן אַז מיר שטעלן און באַקומען אַ ביסל אנדערש, און אַזוי לאָזן ס פּרובירן דעם. באַדאַ בינג, קוק אין דעם. די Flip קנעפּל וועט איצט באַשטימען די פראָנט צו צוריק שטאַט. 

און אַזוי דאָ ס ווו איר זען אַ קליין ביסל פון די מאַגיש פון רעאַגירן. ווי מיר קיינמאָל דערציילט אים צו שייַעך-ופפירן. מיר קיינמאָל דערציילט עס רידראָ עפּעס. אויב איר ניטאָ טאן דעם אָן רעאַגירן, איר'ד האָבן טאָ-- ווי ווען די Flip קנעפּל איז קליקט, איר'ד האָבן צו זאָגן עס צו מאַניואַלי שייַעך-ופפירן, רעכט? 

רעאַגירן איז טאַקע אָפּקילן אין אַז אויב איר געבן עס אַ זיכער שטאַט און פּראָפּערטיעס, עס וועט שטענדיק ופפירן די פּינטלעך זעלבע זאַך. און אַזוי ווען מיר אלץ מיר טוישן די שטאַט און די פּראָפּערטיעס, רעאַגירן נאָר שייַעך-רענדערז די גאנצע זאַך. עס ווייסט אַז עס ס אַ איינער-צו-איינער קאָרעספּאָנדענץ צווישן שטאַט און פּאַראַמעטער און HTML. אזוי ווען יעדער פון די ענדערונגען דורך דורך אַ סכום שטאַט, עס וועט טוישן ווי די באַצאָלן איז שייַעך-רענדערד. און אַזוי בייסיקלי רעאַקט איז ווי ווארטן פֿאַר איר צו טוישן. 

ווען עס ענדערונגען עפּעס, עס וועט שייַעך-ופפירן די גאנצע בלאַט. און אויב עס סאָונדס באַטלאָניש, עס ס ווייַל עס וואָלט זיין, אָבער רעאַגירן ניצט אַ זאַך גערופֿן אַ שאָטן דאַם. אָנשטאָט צייכענונג די חשבון גלייַך, עס האלט די ווירטואַל HTML בוים אין זיקאָרן. 

איר וויסן, HTML איז ווי אַ בוים, ווי אַ כייראַרקאַקאַל דאַטע ביניען. עס האלט אַ שווינדל בוים אין זכּרון, און ווען איר דערהייַנטיקן די בלאַט, עס וועט ציען אנדערן שווינדל בוים, און עס וועט רעכענען וואָס טוישן עס דאַרף צו מאַכן די חשבון צו מאַכן די צוויי ביימער גלייַך. אַזוי בייסיקלי, עס כמעט שייַעך-רענדערז אַ פּלאַץ. און דעמאָלט עס נאָר ווי ענדערונגען די חשבון אין קליין טוויקס ווי דארף, אַזוי עס ס זייער, זייער, זייער עפעקטיוו. 

אַזוי בייסיקלי רעאַקט וועט ווען איר טוישן עפּעס, עס וועט שייַעך-ופפירן דעם בלאַט כמעט. עס וועט רעכענען אויס וואָס טאָן איך דאַרפֿן צו טוישן צו מאַכן די פאַקטיש חשבון פאַרטראַכטנ זיך די ווירטואַל חשבון, און עס וועט טאָן אַז. אַז ס די ווירטואַל דאַם. עס ס איינער פון די ביגאַסט פֿעיִקייטן פון רעאַגירן. 

טוט וואָס מאַכן זינען? קיין שאלות? יאָ? 

וילעם: ווי טוט פאַרגלייַכן נאָך צו די מווק אַז מיר גערעדט וועגן איידער ווי רעסורסן. 

נעעל מעטאַ: יאָ, די קשיא איז ווי טוט עס פאַרגלייַכן צו מווק? איר געבעטן וועגן רעסורסן. נו, לאָזן ס רעדן וועגן ווי עס פֿעיִקייטן. 

אין מווק, איר'ד דערהייַנטיקן די מאָדעל. אין דעם פאַל מיר'ד האָבן אַ קאַרטל מאָדעל. די מיינונג וואָלט האָבן די Flip קנעפּל, און די קאָנטראָל וואָלט האָבן די Flip פֿונקציע. אזוי די מיינונג וואָלט זאָגן די קאַנטראָולער צו Flip Flip. Flip וואָלט זאָגן די מאָדעל צו טוישן, רעכט? 

און אַזוי ווען איר טאָן אַ מווק, איר הערן פֿאַר די מאָדעל צו טוישן, און איר שייַעך-ופפירן די מיינונג אַקאָרדינגלי. אָדער איר נאָר האָבן צו ווי האָבן די קאָנטראָללער. וואַרטן פֿאַר די מאָדעל צו טוישן, און דעמאָלט קלייַבן און קלייַבן אַ טייל פון ווי אַ זאַך צו טוישן. דאָ מיר האָבן איין זאַך, אָבער אין אַ גרויס אַפּ, איר האָבן צו ווי געדענקען וואָס דער ענדערונג אין יעדער איין אָרט, אַזוי עס ס אַ ביסל אַנויינג. און אַזוי רעאַקט איז פייַן ווייַל עס האט אַ שאָטן היים. עס קענען פאַרגינענ זיך צו נאָר רירייט די גאנצע זאַך. איר טאָן ניט האָבן צו סאַלעקטיוולי ווי טרעפן וואָס צו דערהייַנטיקן. 

On Facebook אויב איר ווי באַקומען אַ נייַ אָנזאָג, אין מווק, איר'ד האָבן צו געדענקען, גוט, טוישן די זאכן אין די שפּיץ פון די חשבון, דער אָנזאָג בילדל. אויך קנאַל אַ נייַ פֿענצטער אין דער דנאָ. אויך מאַכן אַ נייַ זאַך אין וואָס פֿענצטער. אויך שפּילן אַ קלאַנג. 

אַז ס אַ פּלאַץ פון שטאָפּן געגאנגען אויס אין דער זעלביקער צייַט. און אַזוי אויב איר טאָן ניט האָבן אַ שאָטן היים, איר'ד האָבן צו טאָן אַז מאַניואַלי ווייַל איר קענען נישט באַקומען באַפרייַען פון די גאנצע בלאַט. איר קענען ניט פאַרגינענ זיך צו, אַזוי איר האָבן צו טוישן יעדער זאַך מאַניואַלי, וואָס איז טאַקע אַנויינג אין מווק. 

אזוי אין סדר צו זיין שפּאָרעוודיק, זיי סאַלעקטיוולי דערהייַנטיקן די בלאַט, וואָס איז עפעקטיוו, אָבער אויך אַנויינג. אין רעאַגירן, ווייַל פון די שאָטן היים, איר באַקומען ביידע זאכן פֿאַר פּאָטער. עס ס עפעקטיוו ווייַל פון די שאָטן היים. די באַטאַלנעק איז אַפּדייטינג דעם בלאַט. עס ס ניט טאן די בוים מאַניפּיאַליישאַן. איר באַקומען די עפעקטיווקייַט. איר אויך באַקומען די יז פון נוצן ווייַל אויב איר נאָר רירייט די גאנצע בלאַט, אָבער איר נאָר וויסן, אַלע רעכט, די זאכן זענען געגאנגען צו זיין אויף דעם בלאַט ערגעץ. עס זאל זיין אין אַ אַנדערש אָרט, אָבער עס ס געגאנגען צו זייַן אויף דעם בלאַט, רעכט? אַזוי איר נאָר שייַעך-רענדערד די גאנצע זאַך כמעט, און איר זאל מאַכן אַ פּאָר ענדערונגען צו דעם בלאַט זיך. 

אַזוי, ווידער, אין מווק איר וואָלט האָבן צו קלייַבן צווישן יז פון נוצן און עפעקטיווקייַט, און רעאַגירן, איר באַקומען ביידע. אַזוי עס ס בעסער. מאַכן זינען? האַרט. 

גוט, אַזוי לאָזן ס זען לאָזן ס רעדן אַ קליין ביסל וועגן שריט 4, ווי מיר קענען ימבעד קאַמפּאָונאַנץ. אַזוי מיר האָבן דעם רעכט איצט. מיר האָבן אונדזער קיל קליין קנעפּל. מיר קענען Flip עס צוריק און אַרויס, און אַז ס אַלע עס טוט. זאל ס זאָגן מיר ווילן צו האָבן אן אנדער קאָמפּאָנענט. זאל ס זאָגן אונדזער פלאַשקאַרד אַפּ זאָל אַנטהאַלטן אַ רשימה פון אַלע די קאַרדס אַז איר האָבן, אַזוי אַז מיטל מיר זאָל האָבן אן אנדער קאָמפּאָנענט. נו, אפֿשר רוף עס אַ רשימה מיינונג. זאל ס מאַכן אַ רשימה מיינונג אַז קאָעקסיסץ מיט די קאַרדוויעוו, און דעם רשימה מיינונג און קאַרדוויעוו וועט ווי אַרבעטן צוזאַמען. און איר קענען פאַרבינדן זיי צו מאַכן אונדזער אַפּ פֿאַר איר. 

אַזוי ערשטער, לאָזן ס מאַכן אַ פּאָר מער קאַרדס רעכט. זאל ס זאָגן, וואָס קאַרדס? און פּונקט אַזוי איך טאָן ניט האָבן צו נודניק איר מיט טייפּינג עס אין, איך בין נאָר געגאנגען צו צייכענען עס פון דאָ. און אַזוי איך בין געגאנגען צו נישט געבן עס בלויז איין קאָרט. איך בין געגאנגען צו געבן עס אַ מענגע פון ​​קאַרדס. אַזוי ערשטער די אַפּפּס געגאנגען צו ברעכן פֿאַר איצט. אַלע רעכט, אַזוי מיר ניטאָ געגאנגען צו מאַכן דעם קענען צו שעפּן קייפל קאַרדס. אַזוי ערשטער, מיר רע געגאנגען צו געבן עס, ניט נאָר איין קאַרטל אָבער אַ מענגע פון ​​קאַרדס, ווי אַ רשימה פון קאַרדס. און אין דעם פאַל, מיר האָבן דרייַ פון זיי. 

אַלע רעכט, אַזוי אַזוי אַפּ איז געגאנגען צו באַקומען אַ רשימה קאַרדס, און עס ס געגאנגען צו באַשליסן וואָס איין צו ווייַזן צו די קאַרדוויעוו. די קאַרדוויעוו קענען בלויז ופפירן איין קאָרט, אָבער די אַפּ געץ אַ רשימה פון אַלע די קאַרדס, רעכט? 

אַזוי ווען איר געשטאַלט אויס איין קאָרט צו געבן צו קאַרדוויעוו, ווי וואָלט איר טרעפן איר זאל קענען צו מאַכן אַ באַשלוס וועגן וואָס קאָרט צו ווייַזן? צו געבן איר אַ אָנצוהערעניש, עס ס טעמפּערעראַלי איר וועט זיין וויוינג אַ זיכער קאָרט. אויב איר דערפרישן די בלאַט, איר וועט נאָר גיין צוריק צו דער ערשטער קאָרט. אַז ס גוט ווייַל עס ס צייַטווייַליק. וואָס טעכניק זאל מיר נוצן? 

וילעם: איר קען מאַכן אַ בייַטעוודיק אַזוי נאָר ווי איר האט פראָנט. איז דעם אמת, איר קען האָבן איצטיקן קאָרט יקוואַלז 1? 

נעעל מעטאַ: יאָ, אַזוי מיר ווילן צו האָבן שטאַט, רעכט? איר וואָלט נוצן שטאַט אין די קאָמפּאָנענט צו רעכענען אויס וואָס קאָרט טאָן מיר ווילן צו באַקומען. ווי מיר האָבן אַ רשימה פון אַלע די קאַרדס, מיר וועט נוצן שטאַט צו רעכענען אויס איינער פון די ערשטער קאָרט, רגע קאָרט, דריט קאָרט, און אַזוי אויף. 

אזוי אַ אַפּ אַזוי אַ אַפּ וועט באַקומען אַ האָבן די געטיניטיאַלסטאַטע פֿונקציע, געטיניטיאַלסטאַטע פֿונקציע צוריקקומען. און מיר וועט נאָר זאָגן אַקטיוועינדעקס 0. אַזוי איצט אונדזער אַפּ האט עס ס אייגן שטאַט. 

און אַזוי איצט אויף ופפירן, צו רעכענען אויס אַ קאָרט, לאָזן ס נאָר גיין צו די מענגע און כאַפּן די זאַך אין וואָס אינדעקס. סעלעקטירן קאָרט גלייַך this.props.cards טהיס.סטאַטע.אַקטיוועינדעקס. אַזוי ווי איר זען דאָ, די פּראַפּס און די שטאַט אַקטשאַוואַלי אַרבעט צוזאַמען. אַזוי איצט אַז מיר האָבן אונדזער אַקטיוועקאַרד, מיר וועט רופן עס אַקטיוועקאַרד, און לאָזן ס זען אויב דאָס אַרבעט. [ינאָדאַבאַל] 

טאַקע, וואָס איז געווען אַ טעקסט טעות. אַה. 

קיל, יאָ, אַזוי איצט מיר זענען צוריק צו ווו מיר זענען איידער, רעכט? זעלביקער אַלט פּראָגראַם חוץ איצט מיר קענען שטיצן אַ רשימה פון קאַרדס, ניט נאָר איינער קאָרט. און איצט, ווידער, אויב מיר טוישן די אַקטיוועינדעקס, מיר קענען גיין 0-1, און איצט אַז רגע קאָרט, און דעמאָלט מיר געגאנגען צו 0. אַזוי דאָ ס אַ נייַ סאָופּעד-אַרויף ווערסיע פון ​​אונדזער. 

גוט, אַזוי איצט לאָזן ס האָבן אַ רשימה מיינונג אַז ווייזט אַלע די קארטלעך אין דיין פּראָגראַם, אַזוי מיר וועט מאַכן אַ נייע קאָמפּאָנענט גערופֿן ליסטוויעוו. זאל ליסטוויעוו יקוואַלז רעאַקט.קרעאַטעקלאַסס. אַזוי מיר ווילן צו ופפירן אַ ונאָרדערעד רשימה מיט אַ רשימה נומער פֿאַר יעדער קאָרט. און אַזוי מיר האָבן אַ בינטל פון קאַרדס. מיר ווילן איין רשימה פּאָזיציע פֿאַר יעדער קאָרט, רעכט? מיר קען טאָן אַ פֿאַר שלייף אָדער עפּעס צו מאַכן אַ נייע רשימה פּאָזיציע. אבער די וועג איר טאָן עס אין רעאַגירן, נוצן אַ זאַך גערופֿן מאַפּע. מאַפּע איז אַ געצייַג אָדער אַ פֿונקציע איר נוצן אַז פֿאַר יעדער נומער, ראַנז עטלעכע פֿונקציע, נעמט צוריקקומען ווערט, און גיט איר אַז צוריק. 

אזוי ווי אַ בייַשפּיל, מיר האָבן די מענגע 1, 2, 3.מאַפּ פונקטיאָנ-- און דעם איז סטענאָגראַפיע פֿאַר אַ פונקטיאָנ-- רענטגענ פייַל רענטגענ מאל רענטגענ. דאס זאגט, פֿאַר יעדער נומער אין 1, 2, 3, נעמען עס. קוואדראט עס, און געבן עס צוריק. אַזוי וואָס טאָן איר טראַכטן 1, 2, 3.מאַפּ רענטגענ גייט צו רענטגענ מאל רענטגענ גיט איר צוריק געגעבן אַז דעם פֿונקציע איז לויפן אויף יעדער עלעמענט פון אַז מענגע. 

וילעם: 1, 4 9? 

נעעל מעטאַ: יאָ, 1, 4, 9 ווייַל איר טאָן 1 מאל 1. אַז גיט איר איינער. אַז ס דער ערשטער עלעמענט. 

2 מאל 2 איז 4. אַז ס אַ רגע עלעמענט. 3 מאל 3 איז 9. אַז ס אַ דריט עלעמענט. מאַכן זינען? אַזוי מאַפּע האט אַ טעכניק איר נוצן אין Functional פּראָוגראַמערז, די נייע נוסח פון פּראָגראַממינג צו טאָן עפּעס צו יעדער עלעמענט אין אייער רשימה. און אַזוי דעם סאָונדס באַקאַנט. מיר האָבן אַ רשימה פון קאַרדס. מיר ווילן צו באַקומען אַ רשימה נומער פֿאַר יעדער איינער, אַזוי מיר וועט נאָר נוצן מאַפּע דאָ. מיר וועט זאָגן, לאָזן רשימה יקוואַלז טהיס.פּראָפּס, קאַרדס, מאַפּע. 

און אַזוי געגעבן אַ קאָרט, מיר רע געגאנגען צו דזשענערייט אַ רשימה נומער מיט וואָס קאָרט ס תּוכן זייַט פון עס. זאל ס נאָר זאָגן מיר ווילן צו געבן אויס די קאַרדס קשיא אַזוי קאַרד.קוועסטיאָן. אזוי דעם רשימה כּולל אַ מענגע פון ​​לי ס אָדער רשימה זאכן ווו עס ס איין רשימה נומער פֿאַר יעדער קאָרט, און אַז כּולל די קאַרדס קשיא. מאַכן זינען? 

קיל, אַזוי איצט לאָזן ס טאקע דרוקן אַז אויס. אַזוי מיר וועט צוריקקומען אַ אַל. ין אַז ונאָרדערעד רשימה, מיר וועט נאָר שטעקן די גאנצע רשימה אַז זיי געגעבן אונדז. קיל. 

אַלע רעכט, אַזוי איצט דעם רשימה מיינונג אַרבעט פּונקט געפֿינען. קיין שאלות וועגן די רשימה מיינונג? איר האָבן אַ בינטל פון קאַרדס. איר מאַכן אַ רשימה נומער פֿאַר יעדער קאָרט. און איר שטעלן זיי ין אַ ונאָרדערעד רשימה, און איר געבן עס צוריק. אַזוי איצט לאָזן ס שפּילן אַזוי מיר ימבעד דעם ין פון אונדזער אַפּ, אַזוי מיר קענען טאָן דאָס, רשימה מיינונג. וואָס אַרגומענט טאָן מיר פאָרן צו רשימה מיינונג? וואָס פּראָפּערטיעס טאָן מיר געבן עס? געדענקען, אויב איר געבן עס אַ בינטל פון קאַרדס, עס וועט מאַכן די רשימה קוק פֿאַר די קאַרדס. אַזוי וואָס וואָלט מיר פאָרן דאָ ווי דער אַרגומענט? וילעם: א רשימה פון קאַרדס? נעעל מעטאַ: יאָ, אַזוי קאַרדס יקוואַלז this.props.cards, רעכט? און אַזוי די בלויז פּראָבלעם איז אַז איר קענען בלויז זיך איין שפּיץ מדרגה עלעמענט אין ופפירן, אַזוי איר ווע גאַט צו ייַנוויקלען עס אין אַ דיוו. עס ס טשודנע. אַזוי לאָזן ס זען אויב אַז. טוט וואָס אַרבעט? 

יאָ, עס איר גיין. אַזוי איצט מיר האָבן אַ רשימה פון קאַרדס אין די דנאָ, און דעמאָלט מיר האָבן אונדזער קאַרדוויעוו זיך אויף שפּיץ, און וואָס וועט Flip צווישן די צוויי זייטן פון די קאָרט. איצט טוט וואָס מאַכן זינען ווי איך האט אַז? יאָ, אַזוי ווידער, מיר האָבן צוויי קאַמפּאָונאַנץ. דער ערשטער קאָמפּאָנענט פּרינץ אויס יעדער קאָרט אין די רשימה. אַז ס דער רשימה מיינונג. און די רגע קאָמפּאָנענט פּרינץ אויס פּונקט וואָס קאָרט. אויב איר געבן עס אַ זיכער קאָרט, עס וועט דרוקן אויס אינפֿאָרמאַציע וועגן וואָס קאָרט און לאָזן איר Flip צוריק און אַרויס. 

אזוי אויב מיר ווילן, מיר קענען פּרובירן און רעדן וועגן אַדינג עטלעכע נייַ פֿעיִקייטן צו דעם. אַנדערש מיר קענען רעדן אַ ביסל מער וועגן פון די גיכקייַט פון רעאַקטאָר, אָדער מיר קענען ענטפֿערן שאלות איר זאל האָבן ווייַל די ביסט אַלע פון ​​די האַרץ טיילן פון רעאַגירן אַז איך ווילן צו רעדן וועגן. מיר קענען גיין פאָרויס. מיר קענען ענטפֿערן שאלות. וועלכער איר ווילן. 

וילעם: קען איר נוצן דזשסקס אין נאָרמאַל דזשאַוואַסקריפּט? אָדער איז אַז עפּעס אַז געקומען מיט די [ינאָדאַבאַל]? 

נעעל מעטאַ: די קשיא איז קענען איר נוצן דזשסקס מיט נאָרמאַל דזשאַוואַסקריפּט? די ענטפער איז יאָ. דזשסקס איז נאָר אַ וועג פון עס נעמט אייער דזשאַוואַסקריפּט וואס האט HTML ין פון עס, און עס קאַמפּיילז זיך דזשאַוואַסקריפּט אַז טוט ניט האָבן די HTML ין פון עס. אַזוי באַמערקן טהאַט-- אַזוי באַמערקן דאָ. דאס קוקט ווי איר האָבן ווי דיוו און איר האָבן שטאָפּן ין פון עס. 

אַז קאַמפּיילז צו דזשאַוואַסקריפּט אַז ווי דזשענערייץ די זעלבע זאַך. איך טרעפן וואָס איך בין זאגן איז אַז דזשסקס איז נאָר אַ סינטאַקטיק, ווי עס ס אַ פּרעפּראָסעססאָר פֿאַר דזשאַוואַסקריפּט פיל ווי PHP איז אַ פּרעפּראָסעססאָר פֿאַר HTML. דזשסק איז אַ פּרעפּראָסעססאָר פֿאַר דזשאַוואַסקריפּט אַז לעץ איר שטעלן די HTML ין פון דיין דזשאַוואַסקריפּט. און אַזוי אויב איר האָבן די רעכט דעסטרויער וואָס איז אַ זאַך גערופֿן [ינאָדאַבאַל], וואָס וועט יבערמאַכן. די רעכט פּרעפּראָסעססאָר, עס וועט לאָזן איר טאָן אַז. 

וילעם: [ינאָדאַבאַל] נעעל מעטאַ: יוזשאַוואַלי איר טאָן ניט דאַרפֿן צו שטעלן HTML ין פון דזשאַוואַסקריפּט סייַדן דיין טאן רעאַגירן. אבער איר קענען טאָן עס סייַ ווי סייַ. יאָ? 

וילעם: איך טראַכטן איר האט דיסקרייבד רעאַקט ווי אַ Functional פּראָגראַמינג שפּראַך. מיר ווע שוין וויסן C אין קס50. איז C אויך אַ Functional שפּראַך? נעעל מעטאַ: אַזוי די קשיא איז וועגן Functional קעגן אן אנדער זאַך גערופֿן ימפּעראַטיוו אָדער פּראַסידזשעראַל פּראָגראַממינג. עס ס צוויי מינים פון מגילה פאָלקס. מען ס גערופֿן פּראַסידזשעראַל, וואָס איז אַלע וועגן ווי טאן קאַמאַנדז, און איינער איז Functional, וואָס איז אַלע וועגן בעת ​​פֿעיִקייטן און נאכדעם ינפּוט און רעזולטאַט פון יענע. רעאַגירן איז אַ Functional פּעראַדיים. C איז אַ זייער פּראַסידזשעראַל פּעראַדיים. 

און ווי אַ בייַשפּיל, C למשל, איר טאָן ניט טאָן דעם דעקלאַראַטיווע וועג פון מאכן די פּראָגראַם, רעכט? איר האָבן צו זאָגן, דרוק דעם. טוישן דעם דאַטן סטרוקטור. דרוק דעם. עס ס אַלע וועגן קאַמאַנדז. 

אין רעאַגירן, דאָרט ס ניט אַז פילע קאַמאַנדז. עס ס אַלע וועגן בעת קאַמפּאָונאַנץ איר שטעלן צוזאַמען. זיי ניטאָ ווי פֿעיִקייטן. איר האָבן ווי אַ פֿונקציע גערופֿן קאַרדוויעוו, וואָס איז אַ פֿונקציע וואס האט ינפּוט, פּראָדוקציע, און אַזוי רעאַקט איז אַלע וועגן דעם פֿילאָסאָפֿיע אונדז פון האַווינג-- איר האָבן דאַטן. איר פאָרן עס דורך דעם אַלגערידאַם, און עס וועט רעזולטאַט HTML אַז איר נאָר געדרוקט דעם בלאַט, און אַזוי איר האָבן צו בויען עס שטיק דורך שטיק. 

אזוי צו ציען אַ מעטאַפאָר צו וואָס איך געזאגט איידער, איר וויסן ווי on Facebook אויב איר באַקומען אַ אָנזאָג, און איר קלייַבן וואָס טיילן צו דערהייַנטיקן, אַז ס פּראַסידזשעראַל. עס ס ימפּעראַטיוו, רעכט? גוט, איך גאַט אַ אָנזאָג. זאל ס טוישן חשבון עס. 

זאל ס קנאַל אַ פֿענצטער דאָ. זאל ס טוישן חשבון עס. זאל ס ציען דעם דאָ. אַז ס אַ פּראַסידזשעראַל צוגאַנג. 

אַז ס וואָס זאכן ווי ווינקלדיק, באָאָסט, באַקבאָון, אנדערע פראַמעוואָרקס נוצן. רעאַגירן איז Functional. עס ס אַ זייער אַנדערש וועג פון טראכטן וועגן זאכן. עס נעמט דעם געדאַנק פון לאָזן ס האָבן פֿעיִקייטן אָדער אַלגערידאַמז אַז וועט איר געבן עס דאַטן. עס וועט שפּייַען אויס וואָס עס זאָל זיין, און די קאָמפּיוטער וועט נעמען זאָרג פון ווייינג אויס. איר טאָן ניט שעפּן עס זיך. טוט וואָס מאַכן אַ קליין ביסל פון זינען? יאָ? 

וילעם: אין אַ Functional שפּראַך, אַלץ כאַפּאַנז אין אַמאָל? 

נעעל מעטאַ: ניין, דאס פּאַסירן אין סדר. ווי דאָ עס ס נאָך סדר, אָבער עס טוט נישט פּאַסירן אין סדר פון ווי לויבן, באַפֿעלן, באַפֿעלן. עס כאַפּאַנז אין סדר פון פֿונקציע גיט איר פּראָדוקציע. שטעלן אַז אין אן אנדער פֿונקציע. שטעלן אַז אין אן אנדער פונקציאָנירן, אן אנדער פֿונקציע. 

אויב איר טאָן קס51, איר וועט לערנען Functional מגילה אַ ביסל אויס פון די פאַרנעם פון דעם. אבער בייסיקלי, וואָס מאכט רעאַגירן קיל איז נישט בלויז די איין-וועג דאַטע לויפן און די ווירטואַל היים, אָבער אויך דעם געדאַנק פון Functional פּראָגראַממינג. און Functional פּראָגראַממינג איז זייער גרינג צו קאַמפּאָוז און מאַכן קיל שטאָפּן אויס פון, און עס ס זייער גרינג צו טראַכטן וועגן און סיבה וועגן. אַזוי עס ס אנדערן גוט ציען פון רעאַגירן. קיין מער שאלות? יאָ? 

וילעם: וועגן, וואָס וואָלט איר נוצן לאָזן ווי קעגן צו וואַר? 

נעעל מעטאַ: אזוי די קשיא איז וואָס טאָן איר נוצן לאָזן אָנשטאָט וואַר? דאס איז אַ זאַך גערופֿן עס6 אָדער עקמאַסקריפּט 6. עס ס די נייע ווערסיע פון ​​דזשאַוואַסקריפּט. עס ס אַ בינטל פון טעכניש סיבות, אָבער לאָזן איז אַ בעסער ווערסיע פון ​​וואַר. 

עס ס ווי איר דערקלערן וועריאַבאַלז. איר קענען נוצן לאָזן. איר קענען נוצן וואַר. זאל האט אַ בינטל פון טעכניש רעאַסאָנס-- איר קענען קוקן זיי אַרויף לאַטער-- פֿאַר וואָס עס ס בעסער. באַסיקאַללי, עס6 האט עטלעכע פייַן נייַ סינטאַקס, עטלעכע נייַ פֿעיִקייטן אויף שפּיץ פון די אַלט דזשאַוואַסקריפּט. 

אַזוי מיר האָבן ווי פינף מינוט. איך נאָר געוואלט צו רעדן וועגן איינער מער זאַך פאַקטיש שנעל. אויב איר האט קיין שאלות, לאָזן ס רעדן וועגן עס נאָך דעם. אבער נאָר אַזוי דעם געץ קאַט אויף אַפּאַראַט, איך נאָר ווילן צו רעדן אַ ביסל וועגן ווי איר אַקשלי נוצן רעאַגירן אין דיין אַפּפּס. 

אויב איר גיין דאָ, Facebook.GitHub.IO/react, דעם איז די היים בלאַט פֿאַר רעאַגירן, און עס וועט ווייַזן איר ווי איר אַקטשאַוואַלי נוצן רעאַגירן אין אייער בלעטער. באַסיקאַללי, עס ס אַ ביסל קאָמפּליצירט טריינג צו ינסטאַלירן רעאַגירן. עס ס ניט ווי גרינג ווי איר נאָר שלעפּן און קאַפּ אַ דזשאַוואַסקריפּט אין עס. 

איר האָבן צו האָבן דיין דעסטרויער שטעלן אַרויף, וואָס וועט, ווי עס האט פריער, דרייען דיין דזשסקס זיך דער נאָרמאַל דזשאַוואַסקריפּט. איר האָבן צו זאַך אַז וועט צונויפנעמען איר עס6 צו נאָרמאַל. דזשאַוואַסקריפּט עס ס אַ פּלאַץ פון מאָווינג טיילן איר האָבן צו טאָן, אַזוי עס ס אַ זאַך גערופֿן יעאָמאַן, Yeoman.io. און דעם איז אַ באַפֿעל שורה געצייַג וואס וועט העלפֿן איר רישטאָוואַניע אויס דיין רעאַקט פּראַדזשעקס לייכט. 

אַזוי איר קענען לייענען וועגן דעם שפּעטער, אָבער עס זענען עטלעכע מכשירים אַז יעאָמאַן Offers. זיי וועט לאָזן איר מאַכן אַ רעאַקט אַפּ מיט אַלץ געבויט אין. ווי עס וועט האָבן געבויט אין, קאַמפּאָונאַנץ געבויט אין. עס וועט האָבן דיין דעסטרויער געבויט אין. זיי האָבן אַ פּלאַץ פון קיל שטאָפּן געבויט אין אויטאָמאַטיש ניצן די זאכן גערופֿן גענעראַטאָרס. 

אזוי לייענען וועגן דעם אויב איר ווי. נאָר גיין אויף יעאָמאַן, י E-אָ-ב-א-ן, און איר קענען געפֿינען גענעראַטאָרס ווי די. און מיט גענעראַטאָרס ווי די, איר פּונקט ווי איינער איז אַ פּאָר באַפֿעלן שורה קאַמאַנדז. עס וועט רישטאָוואַניע אויס אַ גאנצע רעאַקט אַפּ פֿאַר איר. עס וועט באַקומען אַלע די מאַנואַל פּייפּינג, און גרונט אַרבעט געטאן פֿאַר איר, און דעם איז וואָס איר נאָר פאָקוס אויף נאָר שרייבן אין רעאַגירן. 

אַזוי בייסיקלי בנין אַ רעאַגירן אַפּ איז נאָנטריוויאַל. עס ס ווייערד אַלע צוזאַמען, אָבער עס זענען מכשירים אַז וועט טאָן עס פֿאַר איר. אזוי אויב איר ווילן צו מאַכן אַ רעאַקט אַפּ, פּרובירן טאן עס אַז וועג. אויב איר נאָר ווילן צו עקספּערימענט, איר קענען פּרובירן ניצן דעם קאָדעפּען מחמת דעם קאָדעפּען האט אַלע די רעאַגירן וויירינג. איך ווע געטאן אַלע די אַרבעט פֿאַר איר שוין. 

אזוי אויב איר ווילן צו מאַכן ווי אַ פּראָדוקציע צו מעלדונג רעאַקט אַפּ, פּרובירן איינער פון די גענעראַטאָרס. אויב איר נאָר ווילן צו שפּילן אַרום, עס ס אָפֿט ווערט נאָר ווי פּרובירן פּלייינג אַרום אויף קאָדעפּען דאָ. געזונט גוט? קיל. 

אַזוי אַז ס אַלע איך האָבן. ווידער, אַלע די קאָד און יגזאַמפּאַלז זענען געגאנגען צו זיין אויף דעם וועבזייַטל דאָ. אַזוי, ווידער, מיר האט ניט רעדן וועגן פיל סינטאַקס פון רעאַגירן, אָבער צו געפֿינען אַלע די קליין סינטאַקטיקאַל דעטאַילס, עס ס אַלע געגאנגען צו זיין פאַראַנען אויף דעם וועבזייַטל דאָ. 

אזוי איך'ד רעקאָמענדירן ווי נעמען די ערשטער שריט. לייגן עס אין דיין קאָדעפּען. פּרובירן ארבעטן אויף מאכן עס צו די רגע שריט. עס ס 1/4 שריט, און נאָר זען ווו איר באַקומען פון אַז. 

קיין מער שאלות, טשעק אויס אַז חשבון אָדער email מיר. אַז ס מיין אימעיל. אבער איך'ד ליבע צו העלפן איר מיט קיין שאלות איר זאל האָבן וועגן רעאַגירן. אַזוי, יאָ, אַז ס אַלע איך האָבן. דאנק איר אַלע זייער פיל פֿאַר וואַטשינג אָדער פֿאַר אַטענדינג. און איך וועט נעמען קיין שאלות איר זאל האָבן נאָך דעם איצט. אזוי דאַנקען איר אַלע פֿאַר וואַטשינג.