[השמעת מוסיקה] 

ניל מהטה: הנה זה. 

ובכן, כולם, ברוכים הבאים לאינטרנט יישומים של העתיד עם להגיב. זה CS50. השם שלי הוא ניל. אני ת"א לCS50 ובכיתת י ' במכללת הרווארד ומאוד, מאוד מפתח אינטרנט נלהב. אז אני מאוד מרגש מדבר אליכם היום, אם אתה כאן או בבית צופה, על להגיב, אשר הוא, שוב כמו שאמרתי, העתיד של יישומי אינטרנט. 

אז להגיב היא מסגרת אינטרנט. וכמו שאמרתי לי לכמה אנשים כאן, מסגרת היא רק סט של כלים שאתה יכול להשתמש לבנות ולבנות יישום האינטרנט שלך. ויישומי אינטרנט הם, שוב, אתרים כי הם אינטראקטיביים כמו פייסבוק, Twitter.com, Instagram.com, לא משנה מה. 

אז פייסבוק היא מסגרת אינטרנט שפותח על ידי פייסבוק כמה שנות back-- להגיב היא. זה מאז נעשה שימוש ב פייסבוק ביישומים לנייד שלהם ויישום האינטרנט, Instagram. חאן אקדמיה היא עוד לאמץ מוקדם בולט של להגיב. 

זה באמת היה מקבל פופולרי מאוד. אם אי פעם להשתמש בדברים כמו זוויתי או עמוד השדרה, זה מאותה המשפחה, אבל יש לו הרבה מאז להצליח הפופולריות שלהם. זה הדבר החדש החם. זה באמת, באמת ענק. 

וכך מגיבים טוב לא רק כ מסגרת אינטרנט לבניית ממשקים. זה טוב לבניית ממשקי אינטרנט. יש גם דבר נקרא להגיב ילידים ש מאפשר לך לבנות ממשקים עבור אנדרואיד ו- iOS ופלטפורמות אחרות אולי בעתיד רק באמצעות אותו הקוד JavaScript. אתה יכול להשתמש באותו מדויק קוד JavaScript כדי להבהיר אתרים, כדי להבהיר יישומי אנדרואיד ויישומי iOS. 

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

אוקיי, אז מה הוא מגיב? מגיב היא מסגרת שאתה יכול להשתמש לבניית ממשקים. ממשק הוא, שוב, בדף אינטרנט, נכון? אז הנה Instagram.com, שימושים להגיב. 

מגיב בנוי על רעיון של רכיבים. רכיב הוא HTML אלמנט על סטרואידים, כך אלמנט HTML הוא כמו כפתור. זה סעיף. זה כותרת, נכון? וInstagram ישתמש אלה, אבל זה גם להשתמש ברכיבים של להגיב. 

מגיב רכיבים אלמנטים של HTML משופר, שיש לי ההתנהגות שלהם הכיל בתוכם. אז כדוגמא, יש לי, אנחנו יכולים אלמנט זמן, מרכיב זמן, אשר יכיל כמו חותמת הזמן, אתה יודע, רכיב פרופיל ש יכיל את תמונת הפרופיל ושמו של האדם. זה יכול להיות נגדי כמו ש יכול לספור כמו מספר אוהבת, ואם אתה לוחץ על זה, זה להגדיל את מספר אוהבת. רכיב הוא פשוט חבורה של קוד ה- HTML ש יש כמה פונקציונלי עטוף בתוכו. אז זה כמו אלמנט HTML על סטרואידים, כמו שאמרתי קודם. אתה יכול לקחת את המרכיבים הללו, ואתה יכול לשים אותם יחד כדי להפוך את הרכיבים חדשים, ב מקרה זה, לאחר רכיב, המכיל את כל החומר הזה. זה היה להכיל זמן, פרופיל, LikeCounter, אולי התגובה ואולי התמונה עצמה. וכך יישומי אינטרנט פשוט שנבנו על ידי לקיחה רכיבים ולשים אותם ביחד. הזנת Instagram היא לא יותר מאשר חבורה של הודעות בזו אחר זו, כל הודעה מכילה כמו הזמן, פרופיל, LikeCounter, וכן הלאה. זה כמו סוג של בניית בית. אתה לא בונה בית מלמעלה למטה. אתה לוקח components-- לקחת כמו חדר האמבטיה. אתה לוקח את bedroom-- אתה מקל אותם יחד, ויש לך רכיב חדש. יש לך חלק חדש של הבית. 

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

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

אוקיי, אז להגיב זה מגניב כי זה יש דרך להסתכל שונה איך לך לבנות יישומי אינטרנט. אתה בטח כבר שמעת על MVC, המודל לשלוט בCS50 או מה ש אחר שיעורי חיטוט אתה משתמש. ורוב המסגרות הן נבנה סביב הרעיון של MVC. מגיב הוא לא. מגיב בנוי סביב הרעיון של זרימת נתונים חד-כיוונית כפי שניתן לראות בתרשים או גרפי זה כאן. 

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

כדי להשתמש בInstagram למשל, אולי יש לך רשימה של פוסט אובייקטים כמו במסד נתונים או משהו. כי הנתונים. ולאחר מכן ההודעה הרכיבים שלנו ייקח נתונים ש, ולהשתמש בנתונים שכדי להבהיר דבר על המסך. זה מה שהחץ מנתונים לרכיב הוא, ואז שאותם נתונים משמש כדי להבהיר חבורה של רכיבים. 

בפייסבוק Messenger, ל למשל, שהוא מגיב, אולי יש לך רשימה של הודעות כמקור הנתונים שלך. ושלא יהפכו רק רשימת ההודעות אלא גם את רשימת החברים שיש לך. יש לך את הספירה שלא נקראה. אולי גם להפוך את דבר פייסבוק זה בחלק התחתון של Facebook.com. אותו נתונים הוא מקור יחיד של אמת ושגורם הרבה רכיבים להיות שניתנו. ובכל פעם אחד מאותם רכיבים משתנים, הוא חוזר ו משנה את מקור הנתונים. 

שליחת הודעה, נכון? שמשנה את מקור הנתונים. אתה קורא את ההודעות שלך, כך אתה מגדיר שלא נקראו ל0. שמשנה את מקור הנתונים. ושים לב שכל אלה של אחד חץ חוזר לאותם נתונים מקור, כך שאתה יודע, נתן סט נתונים מסוים, אתה יודע בדיוק מה הדף הולך להיראות. זה דטרמיניסטי. אתה יודע, נתונים מסוימים נתון, מה ש הדף הולך להיראות. אתה יכול לנבא איך זה הולך להתנהג ואיך דברים הולכים לעבוד כשהם ביחד. 

ואם היה לי מיליון רכיבים כאן, זה היה מתנהג אותו הדבר, נכון? לא היית צריך כל גומלין מוזר. אחד הנתונים שניתנו מיליון רכיבים. מיליון רכיבים יכולים לחזור ולערוך את הנתונים. ואז זה נחמד מאוד. אנחנו בונים composable, בקלות Web Apps מדרגי. 

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

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

וכך להגיב הוא ממש מגניב, כי אתה יכול להשתמש בו עם כל חזרה סוף שאתה רוצה. אם יש לך כמו סוף חזרה Python, אם פייתון יכול לירוק כמה נתונים, מגיב יכול להבהיר את זה. אם אתה לא תפוקות JS הנתונים, להגיב הופך אותה. רובי מסילות עם נתונים, להגיב הופכים אותה. 

אז להגיב הוא בעצם אינטרנט view-- קדמית עם רכיבים לכל מקור נתונים כלשהם. וכך הולך ממקור נתונים ל מגיבים רכיבים הוא די קל. הולכים לכיוון השני הוא קצת יותר קשה. המשתמש בשטף כפי שציינתי קודם. אנחנו לא נכנסנו לזה. אנחנו נתמקד יותר ב נתונים לרכיב הצד. בדרך זו אתה יכול לעשות , Web Apps כיף מגניב. זה לא ישפיע על העולם שבחוץ לעת עתה, אבל זה כבר סיפור אחר. 

אוקיי, אז אם היית כאן לסמינר האחרון שלי אתה יודע שכל הקוד ל השיחה של היום הולכת להיות בכתובת אתר זו כאן, מצטער, כתובת אתר זה כאן. ובעצם אנחנו הולכים ללכת דרך ארבעה שלבים, אולי חמש, כנראה לא חמש. אנחנו נעבור דרך ארבעה שלבים בניית מדגם להגיב אפליקציה. וכך כל קוד המקור לכל אורך הדרך הולך להיות כאן, כך שאם אתה הבא יחד בבית, הרגש חופשי לעיין בקוד זה. אם אתה הבא יחד כאן, נהיה להראות את זה על המסך, אז אל תדאג בקשר לזה. אבל אם אתה בבית, מרגיש מוזמן לבקר באתר זה. ו, כן, אתה אמור להיות מסוגל לקבל כל הקוד אי פעם היית צריכים כאן. אז זה גיליון לרמות טוב גם כן להרפתקאות שלך בעתיד עם להגיב. מגניב, כך שאם כל מי שנמצא כאן, וגם אם אתה בבית, למשוך את האתר הזה, is.gd/cs50react, אין הון, לא תחתון, אין שום דבר. 

אתה תראה דף שנראה קצת כמו זה. זה דבר שנקרא CodePen. CodePen הוא שיתוף פעולה סביבת קידוד עם שאני יכול לכתוב את הקוד כאן, ו זה יהיה יישלח באופן אוטומטי אליך. ודרך זו, אני יכול לכתוב קוד. אני יכול להפעיל קוד כאן. 

לexample-- ואם זה reloads-- לראות, אני רץ קוד JavaScript בדף ממש כאן, וזה יהיה באופן אוטומטי הופך את דף אינטרנט עם קוד JavaScript זה. ואז זה דרך לנו לנסות את הקוד באמת מהיר מבלי להשתמש הזהות או להשתמש בהתקן המקומי שלנו שלנו או מה שלא יהיה. זוהי דרך מהירה מאוד לך mockup ולבדוק את הסוגים שונים של קוד. 

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

כן, אם כולם ל לפתוח את הקישור הזה כאן. תנו לי בבקשה את האגודלים עד רגע שיש לך את זה פתוח. מגניב מגניב, מגניב. אין כאן שום דבר לעת עתה, אבל אנחנו נשנה את זה בקרוב מאוד. 

אוקיי, אז להגיב הוא JavaScript ספרייה, ובתור שכזה, דורש ידע של JavaScript, שהיא שפת תכנות האינטרנט. והוא נמצא בשימוש לדברים אחרים עכשיו יותר מדי, אבל בעיקר באינטרנט לפתח שפה, כך שאם אתה לא מכיר ש, לקרוא באתר שנקרא JSforCats.com. זה נפלא. אתה יכול ללמוד JavaScript בעוד חצי שעה. זה מדהים. 

אז לתת לו לקרוא. אנחנו גם היא הרבה HTML כאן כי אנחנו עיצוב דפי אינטרנט כמובן. אז אם אתה לא מכיר HTML, לבדוק את HTMLdog.com. אני חושב ללמוד להגיב הוא מיליון פעמים יותר קלים אם אתה כבר יודע את אבני הבניין. אם יש לך את הרכיבים, זה קל לעשות רכיב גדול יותר. זה להגיב שפה בשבילך. 

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

אבל זה, של חשוף שלך עצמות, פשוטות מאוד להגיב אפליקציה. ואז זה בעצם לא טריוויאלי ליישם, אבל אנחנו הולכים להראות ש, אם אתה עושה זה, זה מאוד, קל מאוד להאריך אותו אם אנשים אחרים לעזור לך עם זה. אז אנחנו הולכים לעבור ארבעה שלבים מתחיל מהתחלה לבנות זה. 

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

אז בואו נלך קדימה ולבנות שלנו רכיב ראשון באמצעות JavaScript. אז אם התחביר נראה מוזר, זה בגלל שזה סוג שלו. אז, שוב, אנחנו הולכים כדי להפוך משתנה בשם אפליקציה משתמשת במילת המפתח לתת, מה שהופך את משתנה, בוא React.createClass שווה App. 

מגיב היא ספרייה ויש ליצור פונקצית כיתה. ופונקציה זו היא קצת קוד ש ניתן להשתמש כדי ליצור חדש סוג של רכיב להגיב. וכך React.createClass עושה רכיב, ורכיב זה להיות מסוגל לעשות דברים. הדבר העיקרי שהוא יכול לעשות הוא לדקלם משהו, לדקלם כפונקציה. 

שוב, אם מדד זה לא מובן מאליו ל אתה, אני ממליץ לך ללכת על JS לחתולים ולבדוק את זה. האם שזנק במספיק טוב? מגניב. 

אז כל צרכי רכיב יש פונקציה לדקלם. הפונקציה לדקלם אומרת, מה אוכל להדפיס על המסך? אבל הרכיב הוא חסר תועלת אם לא יודע מה להדפיס על המסך, כך אתה צריך להיות פונקציה לדקלם. 

אז בדבר להבהיר, ש רק צריך לחזור כמה HTML. ומה זה מגניב הוא ש יש דבר שנקרא JSX, שהוא שלוחה של JavaScript המשמש להגיב. זה בוא אתה כותב HTML בתוך של JavaScript שלך, ש נשמע קצת מוזר כש אתה חושב על זה ראשון, אבל זה עושה הרבה חוש אחר. אז אנחנו יכולים לעשות את זה. אם אתה מכיר את HTML, אני יודע יש לנו div עם מטרות כלליות מיכל לחומר. אנחנו יכולים לחזור div, ובתוך div זה, אנחנו יכולים לשים דברים. 

אז בואו נגיד שאנחנו רוצים להבהיר רק flashcard ישר לעכשיו. Flashcard, הייתי אומר, תהיה שאלה ותשובה. אז בתוך div זה, בואו להדפיס את סעיף שאומר question-- מה הוא תשובה אולטימטיבית לחיים, היקום? ואז התשובה היא הולך להיות, כמובן, 42. 

שלא עלה גם בכל. כן, אז בעצם אתה באמת יכול לכתוב HTML בתוך JavaScript שלך. וזה הולך להיות הדפיס לתוך המסך. אז בואו לנסות אותו. 

אז יש לנו הרכיב שלנו. אנחנו צריכים להגיד לי להגיב לשים הרכיב על המסך כך React.render, כך שם לב ש טיפול באפליקציה כמו כל גורם אחר. אנחנו כותבים את זה כמו שזה היה אלמנט HTML. כמו במקום לומר כמו img לתמונה או p לסעיף, אתה כותב אפליקציה, כך App הוא יתייחס אליה כמו אלמנט HTML. כפי שאמרתי קודם, זה אלמנט על סטרואידים. 

אז אתה הופך את האפליקציה, ואתה נותן לו מקום לשים אותו. וזה איך אתה יכול תגיד לו איפה לשים את זה. אני יצרתי div פשוט ב דף שנקרא עם זיהוי של דף, וזה המקום שבי אלמנט הולך ללכת. 

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

אז רק כסיכום, אנו עדינות עשו סוג חדש של רכיב, נכון? זה מה שReact.createClass. וברכיב זה, אנחנו אמר לו מה שהוא צריך לעשות. בכל פעם שרכיב זה הוא להיות מודפס על גבי המסך, זה יהיה להדפיס את div עם שני הסעיפים בתוכו. 

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

אז, שוב, כל האתגר של להגיב הוא רק לדעת איך לעשות רכיבים. כיצד להפוך את רכיבים לעבוד יחד. עכשיו שאנחנו כבר עשינו הראשונים רכיב, בואו נחזור ולהפוך את הרכיבים להתאמה אישית. אז אתה יודע איך אתה ב- HTML יכול לתת שיעורי הכפתורים שלך? אתה יכול לתת לך עוגני href. אתה יכול לתת לך תשומות סוג, נכון? אתה יכול לתת יותר מותאם אישית מאפיינים לכל האלמנטים שלך כדי לעשות את זה יותר מעניין. ואנחנו באמת יכולים לעשות את אותו הדבר בדיוק. 

אז בואו נגיד שאנחנו רוצים האפליקציה ללכת תהפוך כל כרטיס. כרגע אנחנו פשוט שניתנו hardcoded כרטיס. אנחנו יודעים שיש רק אחד כרטיס זה יכול לעשות, כך שאנחנו הולך לנסות ולשנות את זה עכשיו כל כך שאנחנו יכולים רק לתת לזה קצת כרטיס. זה יהיה להדפיס את הכרטיס. 

אתה צריך לנסות ולעשות רכיבי מטרה כללית מאוד. אז ככה אני יכול לשלוח בדוא"ל חבר שלי ולהיות כמו, כל מה שיש לך flashcard, רק להאכיל אותו לכאן, וזה יעשה את זה בעצמו. אתה יכול לשים אחר דברים באפליקציה שלך. 

אבל קודם, בואו לשבור את זה לשני רכיבים, אבל אנחנו רוצים להפריד את הכרטיס חלק הדפסה מחלק היישום בפועל. אז מה אנחנו יכולים לעשות הם יכול לשנות את זה מהאפליקציה לCardView, רק שם חדש לאפליקציה, ואנחנו יכולים לעשות חדשים רכיב בשם App, לא להתבלבל עם היישומים הישנים. יש לנו createClass, וכמו ב- HTML, קן אתה יכול להגיב רכיבים בתוך אחד את השני. 

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

אוקיי, אז אנחנו רוצים CardView-- אם אתה לתת CardView טוב מסוים כרטיס, זה יהיה להדפיס אותך, נכון? אז קודם כל, אנחנו צריכים לעשות את כרטיס, אז בואו להפוך אובייקט כרטיס. אז בואו הכרטיס שלי equal-- אם אתה מכיר את כל, זה קבלת הסימון פשוט מתנגד ב- JavaScript. זה כמו סוג של struct ב- C, כך שעשינו כרטיס, ואז עכשיו אנחנו יכולים לעבור את זה ככרטיס רכוש או כתכונה ב- HTML מינוח לאפליקציה שלנו. אז אנחנו יכולים לעשות את זה, App כרטיס שווה myCard. 

אתה יודע איך בקלט, אתה עושה סוג הקלט שווה טקסט או כפתור מעמד שווה BTN לbootstrap ,? אותו רעיון, equals-- כרטיס App יש לך לשים את הפלטה כאן-- כרטיס אפליקציה שווה myCard, אז זה אומר שיש לנו אובייקט כרטיס זה. אני הולך להעביר את זה כ נכס לרכיב האפליקציה. ורכיב יישום זה תוכל לגשת אליו ולעשות דברים מעניינים עם זה. 

אז האפליקציה שלנו הולכת להיות נתן כרטיס, אז לעת עתה, בואו יישום פשוט לתת לי הכרטיס לCardView עצמו, כי כמו האפליקציה היא לא הולך יודעים מה לעשות עם זה, אז אנחנו פשוט אתן לי CardView. אז אנחנו נעבור את זה אותו אופן, כרטיס שווה, וכך כל רכיב יכול לגשת ל דברים שכבר ניתנו לה. הם יכולים לגשת למאפיינים שניתן לה תוך שימוש בתחביר זה, this.props.card. 

אז מה קורה כאן יש לך את אובייקט myCard. אתה עובר אותו ליישום באמצעות כרטיס App שווה myCard. שאובייקט הכרטיס ניתן ליישום שלך. האפליקציה יכולה לגשת אליו כthis.props.card. זה כמו סוג של תמונה יודע מה הוא המקור שלו. 

יישום זה יודע מה זה כרטיס הוא, והוא יכול לעשות דברים עם זה. זה יכול לעשות חישובים. זה יכול לקבל החלטות מבוססות על הנחה שלו. 

לעת עתה, אני הולך לעבור this.props.card על CardView. הגיוני עד כה? זה יהיה הגיוני יותר עכשיו. 

אוקיי, אז עכשיו אנחנו בCardView. CardView, נתן את הכרטיס, צריך להדפיס את השאלה והתשובה שלה. כרגע אנחנו פשוט הדפסנו כמה שאלות ותשובות hardcoded. אנחנו צריכים להבין שאנחנו צריכים out-- לשאול את הכרטיס שהם נתנו לנו מה היא השאלה והתשובה, ו לאחר מכן להדפיס את זה החוצה אל המסך. 

אז אנחנו יכולים לעשות את זה כאן. בלדקלם begin-- לעשות קודם שווה. אז מה שאנחנו עושים כאן הוא שאנחנו יודעים ש מקבלים הכרטיסים לנו רכוש, יָמִינָה? זה נתן לנו כקלט. כמו זה כמעט כמו טיעונים לפונקציה. הכרטיס הוא טיעון כמעט לCardView זה. 

אנחנו לחלץ את זה, ולשים שלו לשאלה משתנה. ודא את התשובה הלכה לתשובה משתנה. מבקש שכרטיס לענות. ועכשיו שיש לנו אלה, במקום להדפיס את הטקסט ש, אנחנו הולכים להדפיס כל מה שהם נתנו לנו. 

אז זה stuff-- כך אנחנו הולכים לכבות לענות על שאלה. בואו אראה אם ​​זה עובד. מגניב, אז בואו לצעוד דרכו עוד פעם אחת רק כדי להיות בטוחה. 

אז הכרטיס שלי הוא אובייקט כרטיס, ואנחנו נותנים כרטיס שלאפליקציה. והיישום הולך לקחת כרטיס ולתת לCardView זה. וזה אומר CardView, אם אתה תן לי כל חפץ flashcard, אני להדפיס את שאלתה והתשובה שלו, נכון? 

אז מה אני יכול לעשות הוא שאני יכול לשלוח את הקוד הזה, הראשון כמו 10 שורות הקוד שלי, לחבר שלי. הוא יכול להטביע בזה יישום עצמו. וכל עוד הוא עשה את אותו הדבר, כמו כרטיס CardView שווה את זה, כל עוד הוא יצר CardView ונתתי לו את המידע הנכון, הוא יכול להפוך כרטיס שלו. וכך בדרך זו, זה באמת דרך מגניב לך לבנות רכיבים המשתמשים אחד את השני, נכון? כרטיס זה, אני יכול לפרסם CardView זה באינטרנט, ואנשים יוכלו להשתמש בו. אז בעצם, זה כמו אחד מ פונקציות סטנדרטיים בספריית C. 

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

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

אוקיי, אז בואו נעשה את זה דבר אינטראקטיבי. כרגע זה סוג של משעמם. מה הוא [לא ברור]? אתה יכול להדפיס את חלק, אבל זה כל מה שהוא יכול לעשות. 

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

לflashcard, ל למשל, איזה סוג של מדינה אולי כדאי לך זוכר לflashcard? מה מעמד ארעי ייתכן שתרצה לזכור לflashcard ביישום flashcard? קהל: בין אם זה כבר התהפך? ניל מהטה: כן, נכון. אז אולי כדאי לך לשמור על מסלול שלך הוא עם הפנים כלפי מעלה או אתה עם פנים כלפי מטה על הכרטיס. בפייסבוק, למשל, שהיית רוצה להיזכר איפה בהזנה החדשות אתה אוהב או שזה פרופיל אתה עושה עכשיו. 

בMessenger, כמו מה טקסט ש הקלד בתיבת הקלט, נכון? אם אתה לרענן את הדף, זה הולך משם. אבל לא אכפת לך באמת. זה רק זמני. כֵּן? 

קהל: [לא ברור] ניל מהטה: כמו הבזק כרטיס, כמו שאתה יכול להיות שראית בצד השאלה או צד התשובה? 

קהל: אישור. 

ניל מהטה: כמו שני-צדדיים flashcard, נכון? כן, אז אתה רוצה יש את הרעיון הזה של החברה יש לי נכסים, שהוא כמו תשומות, אבל מדינה, שהוא זמני, אה, היכן אתה נמצא בדף, נכון? שוב, אמרתי בפייסבוק שליח, יש לי כמו שאדם אתה צופה בפייסבוק או שזה פרופיל, נכון? 

זה הוא זמני בלבד. חשוב להראות למשתמש מה קורה, אבל לרענן את הדף. זה לא משנה באמת. אז זה מצב זמני, כך כולנו המצב שבו. 

אז, שוב, יש מדינה ואבזרים. אבזרים ניתן קלט ממקור הנתונים שלך. מדינה היא בדיוק כמו ברירת מחדל. זה בדיוק כמו דברים ש עושה הדבר אינטראקטיבי. 

אז בנו CardView-- בואו שלנו CardView-- אז זה היה נחמד. מה שאנחנו הולכים לעשות כאן, אנחנו הולכים לגעת CardView ורק CardView. וכך חבר שלי שקיבל את זה, הם לא הבחין בשום הבדל. הם לא צריכים לשנות כל הקוד שלהם, אבל הם היינו רואים אותם CardView יש משופר עד. זה חלק נחמד על רכיבים. 

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

אז להיות פונקציה שנקראת getInitialState לתפקד, ואנחנו חוזרים אובייקט. אובייקט זה מכיל כמה מדינה, ו מדינה היא רק זוג מפתחות-ערך. כמו ביורה, יש לך מפתח ו ערך, יש לך כמו שם הוא מחרוזת. 

במקרה זה, נניח מול נכון. זה אומר שיש לנו מדינה. מרכיב אחד של המדינה היא תכונה שנקראת קדמי. [לא ברור], ולכן כברירת מחדל, אנחנו בחזית הכרטיס, ואנחנו יכולים לשנות את זה כפי שאנו להעיף את הכרטיס. הגיוני? 

אוקיי, אז בלדקלם, עכשיו, אנחנו מראה את השאלה ואת התשובה. עכשיו מה שאנחנו צריכים לעשות הוא מציג את השאלה אם אנחנו בחזית של הכרטיס כך התשובה היא לחלק האחורי של הכרטיס. בגלל זה כל מה שאתה עושה הכרטיס אינטראקטיבי. אז בואו ננסה וזה כאן. ובכן, ראשון פשוט להפוך משתנה. אנחנו יכולים לשאול עכשיו this.state.front. שלנו גישה המדינה את אותו אבזרי גישה, כך this.state.front. 

אם אנחנו קדמי, אז טקסט הוא this.props.card.question. אם אנחנו בחזית כרטיס, אנחנו הולכים לנסות ולתפוס השאלה מהכרטיס. אחרת, אם אנחנו בגב של הכרטיס, מה עושים? 

קהל: התשובה? 

ניל מהטה: כן, כך טקסט שווה this.props.card.answer. אבל אם תשים לב, אנחנו משתמשים המדינה צריכה לקבל החלטה כי עכשיו הרכיב ייראה אחר המבוסס על הנחה כיצד אלה אינטראקציה עם זה. אז במקום להדפיס את זה, אנחנו פשוט להדפיס את הטקסט. מגניב, אז עכשיו, כפי שאתה רואה, אנו רואים רק את השאלה. ואם אני משנה את המצב כאן באופן ידני לחזית היא שקר שאנו מקבלים 42 בחזרה. 

אז, שוב, רכיב זה יש מדינה משלו. כמו כפתור יודע אם זה כבר לחץ או לא, הדבר הזה יודע מה הוא ב החזית או בגב. כברירת מחדל, זה שבחזית. ואז אם זה בחזית, אנו נדפיס את השאלה. אם זה על הגב, אנחנו להדפיס את התשובה. אז, שוב, את המידע נתתי אותו. זה פשוט נראה אחר מבוסס על איך אתה לתכנת אותו. כך, למשל, פייסבוק Messenger, גם אם אתה מקבל אותו מקור המידע, זה עשוי להיראות שונה משום שהמדינה היא שונה. אתה מחפש ב ההודעה של האדם אחר. 

אוקיי, אז כל זה טוב ו טוב, אבל עכשיו מה בעצם לגרום לנו נוכל לשנות, אם הכרטיס שלנו הוא קדמי או אחורי. אנחנו יכולים לעשות את זה על ידי הוספה להעיף כפתור, כפתור לכרטיס ש יהיה להעיף את הכרטיס אם זה [לא ברור] זה. אז בואו להוסיף כפתור כאן, זה כפתור, והכפתור הזה יגיד להעיף. 

וכך עכשיו, זה לא עושה כלום. זה פשוט נראה נחמד. מה אנחנו יכולים לעשות הוא שאנחנו יכולים להוסיף לחצו מטפל, onClick שווה this.flip, ואנו מגדירים להעיף מאוחר יותר. אבל בעצם, onClick היא פונקציה ש מקבל נקרא כאשר המשתמש לוחץ אותו. 

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

אתה נרשם מאזין זה. אתה מקשיב לאירוע. אתה מקבל בשם, וכש אירוע שקורה, אתה עושה משהו. אתה מקבל פיצה. במקרה זה, כשאתה לחץ, אתה להעיף את הכרטיס. 

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

קהל: שינוי this.state.front מאמיתי לכוזב, כוזב לאמיתי. 

ניל מהטה: כן, אז קח את כל מה ש this.front הוא-- המדינה הקדמית. קח את המדינה הקדמית, אם זה נכון, לעשות את זה שקר. אם זה שקר, לעשות את זה נכון, נכון? אז בואו ננסה את זה. 

אתה לא יכול לשנות את המצב רק על ידי עושה this.state. אתה לא יכול לעשות את זה. אתה לא יכול לעשות את זה. אתה צריך להשתמש בפונקציה נקרא this.setState. 

אז אתה יכול לומר this.setState קדמי המעי הגס שבו זה, שוב, הקריאה נקודה אומרת את ההפך. אני מניח שאם זה. state.front נכון, זה יהיה להפוך את השקר. אז אנחנו להגדיר את המדינה מאמיתי לכוזב. אם זה שקר, אנחנו להגדיר אותו כוזב לאמיתי. 

רק שמתי לב שהצבנו ולקבל מעט אחרת, ואז בואו ננסה את זה. בינג Bada, להסתכל על זה. הכפתור להעיף יהיה עכשיו לעבור קדימה ואחורה מדינה. 

ואז הנה איפה אתה רואה קצת מהקסם של להגיב. כמו שאף פעם לא אמרו לו את זה לעבד מחדש. אנחנו אף פעם לא אמרו לו שום דבר מחדש. אם אתה עושה את זה ללא להגיב, שהיית יש צריכה-- אוהב כש הכפתור להעיף לוחץ, היית צריכה לספר את זה ל ידני לעבד מחדש, נכון? 

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

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

אתה יודע, HTML הוא כמו עץ, כמו מבנה נתונים היררכי. זה שומר על עץ מזויף בזיכרון, ובכל פעם שתעדכן את הדף, זה יהיה לצייר מזויף אחר עץ, וזה יהיה לחשב מה לשנות את זה צריך לעשות דף לעשות שני העצים שווים. אז בעצם, זה כמעט מחדש הופך הרבה. ואז זה רק אוהב שינויים הדף בtweaks הקטן בהתאם לצורך, כך שזה מאוד, מאוד, מאוד יעיל. 

אז בעצם מגיבים יהיה בכל פעם שאתה משנה משהו, זה יהיה לעבד מחדש את הדף כמעט. זה יהיה להבין מה אני צריך לעשות כדי לשנות כדי להפוך את הדף האמיתי משקף הדף הווירטואלי, וזה יעשה את זה. זה DOM הווירטואלי. זה אחד הגדול תכונות של להגיב. 

האם זה הגיוני? יש שאלות? כֵּן? 

קהל: איך עושה להשוות עדיין לMVC שדיברנו על לפני משאבים כמו. 

ניל מהטה: כן, השאלה הוא איך זה בהשוואה לMVC? אתה שאלת על משאבים. ובכן, בואו נדבר על איך זה עובד. 

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

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

בפייסבוק, אם תרצו מקבל הודעה חדשה, בMVC, היית צריך לזכור, אישור, לשנות את הדברים בחלק העליון של דף, סמל ההודעה. גם פופ חלון חדש בתחתית. גם לעשות דבר חדש בחלון ש. גם להשמיע צליל. 

זה הרבה דברים יוצא באותו הזמן. ולכן אם אין לך יש לי Dom צל, שהיית צריך לעשות את זה באופן ידני כי אתה לא יכול להיפטר מכל הדף. אתה לא יכול להרשות לעצמו, אז יש לך לשנות כל דבר באופן ידני, וזה באמת מעצבן בMVC. 

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

אז, שוב, בMVC היה צריך לבחור בין קלות שימוש ויעילות, ולהגיב, אתה מקבל את שניהם. אז זה טוב יותר. הגיוני? מוּצָק. 

אוקיי, אז בואו לראות בואו נדבר קצת על שלב 4, איך אנחנו יכולים להטביע רכיבים. אז יש לנו את זה עכשיו. יש לנו הכפתור הקטן מגניב שלנו. אנחנו יכולים להפוך אותו בחזרה ו הלאה, וזה כל מה שהיא עושה. נניח שאנחנו רוצים יש מרכיב נוסף. בואו נגיד שצריכה האפליקציה flashcard מכיל רשימה של כל הכרטיסים שיש לך, אז זה אומר שאנחנו צריך רכיב אחר. טוב, אולי קורא לזה תצוגת רשימה. בואו לעשות תצוגת רשימה ש מתקיים לצד CardView, ותצוגת רשימה זו וCardView יאהב את העבודה ביחד. ואתה יכול לשלב אותם כדי להפוך את האפליקציה שלנו עבורך. 

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

בסדר, כל כך כל כך אפליקציה היא הולך לקבל כרטיסי רשימה, וזה הולך להחליט ש אחד להראות לCardView. CardView יכול רק להבהיר כרטיס אחד, אבל האפליקציה מקבל רשימה של כל הכרטיסים, נכון? 

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

קהל: אתה יכול לעשות משתנה כל כך פשוט כמו שהיה לך לפני. האם זה נכון, אתה יכול יש לי נוכחית כרטיס שווה 1? 

ניל מהטה: כן, כדי ש רוצה להיות מדינה, נכון? היית להשתמש במדינה רכיב להבין איזה כרטיס לעשות אנחנו רוצים להגיע. כמו שיש לנו רשימה של כל הכרטיסים, אנחנו להשתמש מדינה כדי להבין אחד ראשוני הכרטיס, שני כרטיס, כרטיס שלישי, וכן הלאה. 

אז אפליקציה כך אפליקציה תקבל יש פונקצית getInitialState, תמורת פונקצית getInitialState. ואנחנו רק נגיד activeIndex 0. אז עכשיו יש לנו המדינה משל האפליקציה שלה. 

ואז עכשיו על לדקלם, כדי להבין כרטיס, בואו פשוט ללכת למערך ולתפוס את הדבר במדד זה. this.props.cards בחר כרטיס שווה this.state.activeIndex. אז כפי שאתם רואים כאן, האביזרים ו המדינה באמת עובדת יחד. אז עכשיו שיש לנו activeCard, אנחנו קוראים לזה activeCard, ובואו נראה אם ​​זה עובד. [לא ברור] 

הו, זה היה שגיאת טקסט. אה. 

מגניב, כן, אז עכשיו שחזרנו לאיפה שהיינו לפני, נכון? תכנית ישנה אותו פרט עכשיו אנחנו יכולים לתמוך רשימה של כרטיסים, לא רק כרטיס אחד. ועכשיו, שוב, אם נשנינו את activeIndex, אנחנו יכולים ללכת 0-1, ועכשיו ששני כרטיס, ואז הלכנו ל0. אז הנה חדש משופר, גרסה שלנו. 

אוקיי, אז עכשיו בואו תצוגת רשימה ש מציג את כל הקלפים בתכנית שלך, כך אנחנו נעשה חדשים רכיב הנקרא ListView. בואו ListView שווה react.createClass. אז אנחנו רוצים להבהיר לא מסודרות רשימה עם פריט ברשימה לכל כרטיס. ולכן יש לנו חבורה של כרטיסים. אנחנו רוצים פריט ברשימה אחת לכל כרטיס, נכון? אנחנו יכולים לעשות עבור לולאה או משהו לעשות פריט ברשימה חדשה. אבל הדרך לעשות את זה ב להגיב, השתמש דבר שנקרא המפה. מפה היא כלי או פונקציה להשתמש כי עבור כל פריט, פועל כמה פונקציה, לוקח ערך החזרה, ו נותן לך את זה בחזרה. 

אז כדוגמא, יש לנו את המערך 1, 2, function-- 3.map וזה הוא קיצור ל function-- x חץ x פעמים x. זה אומר, לכל מספר ב 1, 2, 3, לקחת את זה. כיכר זה, ולתת לו בחזרה. אז מה אתה חושב 1, 2, X 3.map הולך פעמים x x מחזיר לך ניתנה פונקציה זו היא לרוץ על כל אלמנט של מערך זה. 

קהל: 1, 4 9? 

ניל מהטה: כן, 1, 4, 9 בגלל שאתה עושה 1 פעמים 1. זה נותן לך אחד. זה האלמנט הראשון. 

2 פעמים 2 היא 4. זה מרכיב שני. 3 פעמים 3 היא 9. זה מרכיב שלישי. הגיוני? אז המפה יש טכניקתך להשתמש במתכנתים פונקציונליים, הסגנון החדש של תכנות לעשות משהו לכל רכיב ברשימה שלך. וכך זה נשמע מוכר. יש לנו רשימה של כרטיסים. אנחנו רוצים לקבל פריט ברשימה לכל אחד, אז אנחנו פשוט להשתמש במפה כאן. אנחנו נגיד, בואו שווים רשימה this.props, כרטיסים, המפה. 

וכך קיבל כרטיס, אנחנו הולך ליצור פריט רשימה עם צד התוכן של הכרטיס שלו. בואו נגיד שאנחנו רוצים לתת את כרטיסי שאלה כל כך card.question. אז רשימה זו מכילה מערך של LI של או פריטים רשימה שבו יש רשימה אחת פריט עבור כל כרטיס, ושמכיל את שאלת כרטיסים. הגיוני? 

מגניב, אז עכשיו בואו למעשה להדפיס את זה. אז נחזור ul. בתוך שהרשימה לא מסודרת, אנחנו פשוט נישאר כל הרשימה שהם נתנו לנו. מגניב. 

בסדר, אז עכשיו זה צפה ברשימת עבודות פשוט למצוא. כל שאלות על הנוף לרשימה? יש לך חבורה של כרטיסים. אתה גורם פריט ברשימה לכל כרטיס. ואתה שם אותם בתוך לא מסודרת רשימה, ואתה נותן לו בחזרה. אז עכשיו בואו לפעול לכך שאנו להטביע בתוך זה של האפליקציה שלנו, כדי שנוכל לעשות את זה, תצוגת רשימה. מה טיעון אנחנו עוברים לתצוגת רשימה? מה תכונות שאנחנו נותנים לו? זכור, אם אתה נותן לי זה חבורה של כרטיסים, זה יהיה להפוך את הרשימה להציג עבור כרטיסים אלה. אז מה היה לנו לעבור כאן כטיעון? קהל: רשימה של כרטיסים? ניל מהטה: כן, אז כרטיסים שווה this.props.cards, נכון? וכך הבעיה היחידה הוא שאתה רק יכול הפך רכיב ברמה עליון אחד בלדקלם, כך שיש לך לעטוף אותו בdiv. זה מוזר. אז בואו לראות אם זה. האם זה עובד? 

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

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

קהל: האם אתה יכול להשתמש JSX בJavaScript הנורמלי? או משהו ש הגיע עם [לא ברור]? 

ניל מהטה: השאלה היא פח אתה משתמש JSX עם JavaScript הנורמלי? התשובה היא כן. JSX הוא רק דרך שלו לוקחת JavaScript שיש HTML בתוכו, וזה הידור לJavaScript ש אין HTML בתוכו. אז שם לב לראות-- כך תבחין כאן. זה נראה כאילו יש לך כמו div ויש לך דברים בתוכו. 

כי הידור לJavaScript ש כמו מייצר את אותו הדבר. אני מניח מה שאני אומר הוא ש JSX הוא רק תחבירי, כמו זה עיבוד מוקדם לJavaScript הרבה כמו PHP הוא עיבוד מוקדם ל- HTML. JSC הוא preprocessor לJavaScript המאפשר לי אתה שם HTML בתוך JavaScript שלך. ולכן אם יש לך את השנאי תקין וזה דבר שנקרא [לא ברור], שיהפוך. בעיבוד המוקדם תקין, זה ייתן לך לעשות את זה. 

קהל: [לא ברור] ניל מהטה: בדרך כלל אתה לא צריך לשים HTML בתוך JavaScript אלא אם כן העשייה שלך להגיב. אבל אתה יכול לעשות את זה בכל מקרה. כֵּן? 

קהל: אני חושב שאתה תאר להגיב כשפת תכנות פונקציונלית. אנחנו כבר לומדים C בCS50. גם הוא C שפה פונקציונלית? ניל מהטה: אז השאלה הוא על תפקודי לעומת דבר אחר שנקרא תכנות הכרחי או פרוצדורלי. יש שני סוגים של תוכניות פופולריות. אחד נקרא פרוצדורליים, ש הוא על כל כמו פקודות עושים, ואחד הוא פונקציונלי, שהיא כל על כך פונקציות ושיש קלט ופלט של אלה. מגיב היא פרדיגמה פונקציונלית. C הוא פרדיגמה מאוד פרוצדורליים. 

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

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

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

בואו נקפוץ חלון כאן. בואו לשנות את החשבון שם. בואו לצייר את זה כאן. זה גישה פרוצדורליים. 

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

קהל: בשפה פונקציונלית, כל מה שקורה בבת אחת? 

ניל מהטה: לא, דברים קורים בצו. כמו כאן יש עדיין להזמין, אבל זה לא לקרות כדי כמו לשבח, הפקודה, הפקודה. זה קורה בצו של פונקציה נותנת לך פלט. שים את זה לפונקציה אחרת. שים את זה לעוד פונקציה, פונקציה אחרת. 

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

קהל: אום, למה אתה משתמש בואו בניגוד לvar? 

ניל מהטה: אז השאלה היא למה אתה משתמש בוא במקום var? זה דבר שנקרא ES6 או ECMAScript 6. זה את הגרסה החדשה של JavaScript. יש חבורה של סיבות טכניות, אבל בואו היא גרסה טובה יותר של var. 

זה איך אתה מצהיר משתנים. אתה יכול להשתמש בוא. אתה יכול להשתמש בvar. יש לתת לחבורה של טכני reasons-- אתה יכול להסתכל להם עד later-- למה זה טוב יותר. בעיקרון, יש כמה נחמד ES6 תחביר חדש, כמה תכונות חדשות בחלק העליון של JavaScript הישן. 

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

אם אתה הולך כאן, Facebook.GitHub.IO/react, זה בדף הבית ללהגיב, ו זה יראו לך איך אתה בעצם להשתמש מגיב בדפים שלך. בעיקרון, זה קצת מסובך מנסה להתקין להגיב. זה לא קל כמו שאתה פשוט לגרור ושחרר JavaScript שם. 

אתה צריך שתהיה לך שנאי הקים, אשר, כפי שעשה בעבר, להפוך JSX ל JavaScript הנורמלי. יש לך דבר שימצאו לקמפל אתה ES6 לקדמותו. JavaScript יש הרבה נע חלקים שאתה צריך לעשות, אז יש דבר נקרא Yeoman, Yeoman.io. וזה הוא כלי שורת הפקודה שימצא לעזור לך פיגומים אותך להגיב פרויקטים בקלות. 

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

אז קרא על זה, אם תרצה. פשוט ללכת על איכר, Y-E-O-M-A-N, ו אתה יכול למצוא גנרטורים כמו אלה. ועם גנרטורים כמו אלה, אתה רק רוצה אחד הוא שורת פקודת זוג פקודות. זה יהיה פיגומים החוצה כל להגיב אפליקציה בשבילך. זה יהיה לקבל את כל הצנרת במדריך, והעבודה שחורה עשתה בשבילך, וזה למה אתה פשוט להתמקד על רק כותב במגיב. 

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

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

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

אז הייתי ממליץ כמו לעשות את הצעד הראשון. הכניס אותו לתוך CodePen. נסה עובד על ביצוע אותו לשלב השני. יש שלב רביעי, ורק רואה בו אתה מקבל מזה. 

יותר שאלות, לבדוק כי דף או שלח לי. זה הדוא"ל שלי. אבל אני אשמח לעזור לך עם כל שאלות שאולי יש לך על להגיב. אז, כן, זה כל מה שיש לי. תודה לכולכם הרבה מאוד ל צפייה או למטפל. ואני אקח את כל שאלות אולי יש לך אחרי זה עכשיו. אז תודה לכולכם על צפייה.