1 00:00:00,000 --> 00:00:02,910 >> [השמעת מוסיקה] 2 00:00:02,910 --> 00:00:04,850 3 00:00:04,850 --> 00:00:07,275 >> ניל מהטה: הנה זה. 4 00:00:07,275 --> 00:00:11,070 >> ובכן, כולם, ברוכים הבאים לאינטרנט יישומים של העתיד עם להגיב. 5 00:00:11,070 --> 00:00:11,870 זה CS50. 6 00:00:11,870 --> 00:00:12,930 השם שלי הוא ניל. 7 00:00:12,930 --> 00:00:17,689 אני ת"א לCS50 ובכיתת י ' במכללת הרווארד ומאוד, מאוד 8 00:00:17,689 --> 00:00:18,730 מפתח אינטרנט נלהב. 9 00:00:18,730 --> 00:00:20,730 אז אני מאוד מרגש מדבר אליכם היום, 10 00:00:20,730 --> 00:00:24,550 אם אתה כאן או בבית צופה, על להגיב, אשר הוא, שוב 11 00:00:24,550 --> 00:00:27,270 כמו שאמרתי, העתיד של יישומי אינטרנט. 12 00:00:27,270 --> 00:00:29,055 >> אז להגיב היא מסגרת אינטרנט. 13 00:00:29,055 --> 00:00:30,930 וכמו שאמרתי לי לכמה אנשים כאן, 14 00:00:30,930 --> 00:00:33,400 מסגרת היא רק סט של כלים שאתה יכול להשתמש 15 00:00:33,400 --> 00:00:35,770 לבנות ולבנות יישום האינטרנט שלך. 16 00:00:35,770 --> 00:00:39,010 ויישומי אינטרנט הם, שוב, אתרים כי הם אינטראקטיביים כמו פייסבוק, 17 00:00:39,010 --> 00:00:42,330 Twitter.com, Instagram.com, לא משנה מה. 18 00:00:42,330 --> 00:00:45,590 >> אז פייסבוק היא מסגרת אינטרנט שפותח על ידי פייסבוק 19 00:00:45,590 --> 00:00:48,060 כמה שנות back-- להגיב היא. 20 00:00:48,060 --> 00:00:50,830 זה מאז נעשה שימוש ב פייסבוק ביישומים לנייד שלהם 21 00:00:50,830 --> 00:00:52,460 ויישום האינטרנט, Instagram. 22 00:00:52,460 --> 00:00:56,350 חאן אקדמיה היא עוד לאמץ מוקדם בולט של להגיב. 23 00:00:56,350 --> 00:00:58,630 >> זה באמת היה מקבל פופולרי מאוד. 24 00:00:58,630 --> 00:01:03,420 אם אי פעם להשתמש בדברים כמו זוויתי או עמוד השדרה, זה מאותה המשפחה, 25 00:01:03,420 --> 00:01:05,830 אבל יש לו הרבה מאז להצליח הפופולריות שלהם. 26 00:01:05,830 --> 00:01:06,890 זה הדבר החדש החם. 27 00:01:06,890 --> 00:01:09,590 זה באמת, באמת ענק. 28 00:01:09,590 --> 00:01:13,470 >> וכך מגיבים טוב לא רק כ מסגרת אינטרנט לבניית ממשקים. 29 00:01:13,470 --> 00:01:16,020 זה טוב לבניית ממשקי אינטרנט. 30 00:01:16,020 --> 00:01:18,350 יש גם דבר נקרא להגיב ילידים ש 31 00:01:18,350 --> 00:01:22,200 מאפשר לך לבנות ממשקים עבור אנדרואיד ו- iOS 32 00:01:22,200 --> 00:01:26,390 ופלטפורמות אחרות אולי בעתיד רק באמצעות אותו הקוד JavaScript. 33 00:01:26,390 --> 00:01:31,130 אתה יכול להשתמש באותו מדויק קוד JavaScript כדי להבהיר אתרים, 34 00:01:31,130 --> 00:01:33,040 כדי להבהיר יישומי אנדרואיד ויישומי iOS. 35 00:01:33,040 --> 00:01:35,000 >> זה זמן מאוד, מאוד מרגש. 36 00:01:35,000 --> 00:01:37,070 זוהי הזדמנות באמת, ממש מגניב. 37 00:01:37,070 --> 00:01:42,020 זה באמת אינטרנט אוניוורסלי כלי פיתוח ממשק, 38 00:01:42,020 --> 00:01:44,420 כך שזה מאוד, מאוד דבר חשוב לדעת. 39 00:01:44,420 --> 00:01:46,949 וכמו שאני אומר לאנשים לפני, זה, אני חושב, 40 00:01:46,949 --> 00:01:48,990 הוא הולך לשנות את האופן ש לבנות יישומי אינטרנט לנצח. 41 00:01:48,990 --> 00:01:55,820 אז זה אולי הגזמה קצת, אבל אני חושב שזה דבר די טוב לדעת. 42 00:01:55,820 --> 00:01:57,580 >> אוקיי, אז מה הוא מגיב? 43 00:01:57,580 --> 00:02:01,020 מגיב היא מסגרת שאתה יכול להשתמש לבניית ממשקים. 44 00:02:01,020 --> 00:02:03,240 ממשק הוא, שוב, בדף אינטרנט, נכון? 45 00:02:03,240 --> 00:02:06,340 אז הנה Instagram.com, שימושים להגיב. 46 00:02:06,340 --> 00:02:08,740 >> מגיב בנוי על רעיון של רכיבים. 47 00:02:08,740 --> 00:02:11,900 רכיב הוא HTML אלמנט על סטרואידים, 48 00:02:11,900 --> 00:02:14,470 כך אלמנט HTML הוא כמו כפתור. 49 00:02:14,470 --> 00:02:15,250 זה סעיף. 50 00:02:15,250 --> 00:02:17,500 זה כותרת, נכון? 51 00:02:17,500 --> 00:02:22,740 וInstagram ישתמש אלה, אבל זה גם להשתמש ברכיבים של להגיב. 52 00:02:22,740 --> 00:02:25,740 >> מגיב רכיבים אלמנטים של HTML משופר, 53 00:02:25,740 --> 00:02:28,100 שיש לי ההתנהגות שלהם הכיל בתוכם. 54 00:02:28,100 --> 00:02:31,800 אז כדוגמא, יש לי, אנחנו יכולים אלמנט זמן, מרכיב זמן, 55 00:02:31,800 --> 00:02:34,095 אשר יכיל כמו חותמת הזמן, אתה יודע, 56 00:02:34,095 --> 00:02:37,170 רכיב פרופיל ש יכיל את תמונת הפרופיל 57 00:02:37,170 --> 00:02:38,820 ושמו של האדם. 58 00:02:38,820 --> 00:02:42,930 זה יכול להיות נגדי כמו ש יכול לספור כמו מספר אוהבת, 59 00:02:42,930 --> 00:02:45,610 ואם אתה לוחץ על זה, זה להגדיל את מספר אוהבת. 60 00:02:45,610 --> 00:02:48,200 רכיב הוא פשוט חבורה של קוד ה- HTML ש 61 00:02:48,200 --> 00:02:50,520 יש כמה פונקציונלי עטוף בתוכו. 62 00:02:50,520 --> 00:02:53,770 אז זה כמו אלמנט HTML על סטרואידים, כמו שאמרתי קודם. 63 00:02:53,770 --> 00:02:56,270 אתה יכול לקחת את המרכיבים הללו, ואתה יכול לשים אותם יחד 64 00:02:56,270 --> 00:02:59,060 כדי להפוך את הרכיבים חדשים, ב מקרה זה, לאחר רכיב, 65 00:02:59,060 --> 00:03:00,505 המכיל את כל החומר הזה. 66 00:03:00,505 --> 00:03:04,050 זה היה להכיל זמן, פרופיל, LikeCounter, אולי התגובה 67 00:03:04,050 --> 00:03:06,100 ואולי התמונה עצמה. 68 00:03:06,100 --> 00:03:10,810 וכך יישומי אינטרנט פשוט שנבנו על ידי לקיחה רכיבים ולשים אותם ביחד. 69 00:03:10,810 --> 00:03:15,620 הזנת Instagram היא לא יותר מאשר חבורה של הודעות בזו אחר זו, 70 00:03:15,620 --> 00:03:19,032 כל הודעה מכילה כמו הזמן, פרופיל, LikeCounter, וכן הלאה. 71 00:03:19,032 --> 00:03:20,490 זה כמו סוג של בניית בית. 72 00:03:20,490 --> 00:03:22,660 אתה לא בונה בית מלמעלה למטה. 73 00:03:22,660 --> 00:03:24,960 אתה לוקח components-- לקחת כמו חדר האמבטיה. 74 00:03:24,960 --> 00:03:28,320 אתה לוקח את bedroom-- אתה מקל אותם יחד, ויש לך רכיב חדש. 75 00:03:28,320 --> 00:03:29,760 יש לך חלק חדש של הבית. 76 00:03:29,760 --> 00:03:32,860 >> אז תגיב הוא כל בנוי סביב רעיון זה של רכיבים ש 77 00:03:32,860 --> 00:03:36,600 הם אינטראקטיביים, כי הם הצהרתיים. 78 00:03:36,600 --> 00:03:39,650 כמו שאתה רק אומר את מה ש פרופיל הוא, וזה הופך את זה. 79 00:03:39,650 --> 00:03:40,600 הם composable. 80 00:03:40,600 --> 00:03:43,880 אתה יכול לקחת את זמן ופרופיל, לשים אותם יחד, לעשות משהו טוב יותר. 81 00:03:43,880 --> 00:03:47,770 והם לשימוש חוזר, כך שאם אתה יש את קוד המקור של הודעה, 82 00:03:47,770 --> 00:03:49,440 אתה יכול להטביע בכל מקום ש. 83 00:03:49,440 --> 00:03:53,160 >> ניתן להטביע Instagram דבר באתר שלך. 84 00:03:53,160 --> 00:03:56,830 אתה יכול להטביע בפייסבוק, למשל, כל עוד הוא משתמש להגיב גם כן. 85 00:03:56,830 --> 00:04:00,360 אז מרכיבים הם באמת, באמת, באמת אבני בניין רב עוצמה של האינטרנט 86 00:04:00,360 --> 00:04:04,180 שניתן להשתמש בכל מקום ולשים יחד כדי להפוך את אבני בניין חדש. 87 00:04:04,180 --> 00:04:07,159 זה, מאוד מאוד סקירה ברמה גבוהה. 88 00:04:07,159 --> 00:04:09,200 אז, שוב, אם יש לך כל שאלות בכל נקודה 89 00:04:09,200 --> 00:04:14,470 על הפילוסופיה של כור, קידוד, כדי לעצור אותי, ותן לי לדעת. 90 00:04:14,470 --> 00:04:18,420 >> אוקיי, אז להגיב זה מגניב כי זה יש דרך להסתכל שונה 91 00:04:18,420 --> 00:04:19,870 איך לך לבנות יישומי אינטרנט. 92 00:04:19,870 --> 00:04:23,620 אתה בטח כבר שמעת על MVC, המודל לשלוט בCS50 או מה ש 93 00:04:23,620 --> 00:04:25,940 אחר שיעורי חיטוט אתה משתמש. 94 00:04:25,940 --> 00:04:29,000 ורוב המסגרות הן נבנה סביב הרעיון של MVC. 95 00:04:29,000 --> 00:04:30,410 מגיב הוא לא. 96 00:04:30,410 --> 00:04:32,980 מגיב בנוי סביב הרעיון של זרימת נתונים חד-כיוונית 97 00:04:32,980 --> 00:04:36,510 כפי שניתן לראות בתרשים או גרפי זה כאן. 98 00:04:36,510 --> 00:04:38,260 >> בעיקרון, יש לך מקור נתונים. 99 00:04:38,260 --> 00:04:42,380 ואת מקור הנתונים יחליט איך להוציא רכיבים מסוימים. 100 00:04:42,380 --> 00:04:45,452 והרכיבים יהיו לאחר מכן, כאשר הם משתנים, 101 00:04:45,452 --> 00:04:47,160 הם יגידו לי מקור נתונים לשינוי. 102 00:04:47,160 --> 00:04:49,350 >> כדי להשתמש בInstagram למשל, אולי יש לך 103 00:04:49,350 --> 00:04:52,050 רשימה של פוסט אובייקטים כמו במסד נתונים או משהו. 104 00:04:52,050 --> 00:04:53,310 כי הנתונים. 105 00:04:53,310 --> 00:04:57,600 ולאחר מכן ההודעה הרכיבים שלנו ייקח נתונים ש, 106 00:04:57,600 --> 00:05:01,830 ולהשתמש בנתונים שכדי להבהיר דבר על המסך. 107 00:05:01,830 --> 00:05:04,300 זה מה שהחץ מנתונים לרכיב הוא, 108 00:05:04,300 --> 00:05:07,930 ואז שאותם נתונים משמש כדי להבהיר חבורה של רכיבים. 109 00:05:07,930 --> 00:05:10,290 >> בפייסבוק Messenger, ל למשל, שהוא מגיב, 110 00:05:10,290 --> 00:05:13,410 אולי יש לך רשימה של הודעות כמקור הנתונים שלך. 111 00:05:13,410 --> 00:05:15,927 ושלא יהפכו רק רשימת ההודעות 112 00:05:15,927 --> 00:05:17,510 אלא גם את רשימת החברים שיש לך. 113 00:05:17,510 --> 00:05:19,200 יש לך את הספירה שלא נקראה. 114 00:05:19,200 --> 00:05:23,330 אולי גם להפוך את דבר פייסבוק זה בחלק התחתון של Facebook.com. 115 00:05:23,330 --> 00:05:25,610 אותו נתונים הוא מקור יחיד של אמת 116 00:05:25,610 --> 00:05:28,290 ושגורם הרבה רכיבים להיות שניתנו. 117 00:05:28,290 --> 00:05:30,290 ובכל פעם אחד מאותם רכיבים משתנים, 118 00:05:30,290 --> 00:05:32,320 הוא חוזר ו משנה את מקור הנתונים. 119 00:05:32,320 --> 00:05:33,460 >> שליחת הודעה, נכון? 120 00:05:33,460 --> 00:05:34,780 שמשנה את מקור הנתונים. 121 00:05:34,780 --> 00:05:39,490 אתה קורא את ההודעות שלך, כך אתה מגדיר שלא נקראו ל0. 122 00:05:39,490 --> 00:05:41,136 שמשנה את מקור הנתונים. 123 00:05:41,136 --> 00:05:44,010 ושים לב שכל אלה של אחד חץ חוזר לאותם נתונים 124 00:05:44,010 --> 00:05:47,662 מקור, כך שאתה יודע, נתן סט נתונים מסוים, 125 00:05:47,662 --> 00:05:49,870 אתה יודע בדיוק מה הדף הולך להיראות. 126 00:05:49,870 --> 00:05:50,700 זה דטרמיניסטי. 127 00:05:50,700 --> 00:05:53,451 אתה יודע, נתונים מסוימים נתון, מה ש הדף הולך להיראות. 128 00:05:53,451 --> 00:05:56,158 אתה יכול לנבא איך זה הולך להתנהג ואיך דברים הולכים 129 00:05:56,158 --> 00:05:57,650 לעבוד כשהם ביחד. 130 00:05:57,650 --> 00:06:00,410 >> ואם היה לי מיליון רכיבים כאן, זה היה מתנהג אותו הדבר, נכון? 131 00:06:00,410 --> 00:06:02,290 לא היית צריך כל גומלין מוזר. 132 00:06:02,290 --> 00:06:04,120 אחד הנתונים שניתנו מיליון רכיבים. 133 00:06:04,120 --> 00:06:06,879 מיליון רכיבים יכולים לחזור ולערוך את הנתונים. 134 00:06:06,879 --> 00:06:07,920 ואז זה נחמד מאוד. 135 00:06:07,920 --> 00:06:10,870 אנחנו בונים composable, בקלות Web Apps מדרגי. 136 00:06:10,870 --> 00:06:13,150 >> יש לך מקור נתונים אחד, המקור של אמת. 137 00:06:13,150 --> 00:06:15,790 זה אומר לך רכיבים איך להניח את הדף, 138 00:06:15,790 --> 00:06:18,190 והרכיבים יהיו להתמודד עם אינטראקציה. 139 00:06:18,190 --> 00:06:20,150 ואם הם רוצים לשנות דברים, פשוט לחזור 140 00:06:20,150 --> 00:06:21,750 ולספר את מקור הנתונים לשינוי. 141 00:06:21,750 --> 00:06:22,850 הגיוני? 142 00:06:22,850 --> 00:06:26,010 אז להגיב הוא על כל הבנה איך לבנות רכיב 143 00:06:26,010 --> 00:06:29,540 ואיך לעשות הרכיב שלך אינטראקציה עם העולם החיצון. 144 00:06:29,540 --> 00:06:31,850 >> מה שהופך את האינטראקציה הרכיב עם העולם החיצון 145 00:06:31,850 --> 00:06:34,490 משתמש בטכנולוגיה אחרת שטף נקרא, ש 146 00:06:34,490 --> 00:06:36,872 היא מסגרת שהיא הוסיף על גבי להגיב. 147 00:06:36,872 --> 00:06:38,330 אנחנו לא הולכים לדבר על זה. 148 00:06:38,330 --> 00:06:42,990 אנחנו הולכים לדבר יותר על, נתנו הנתונים, איך אתה יכול להפוך מרכיב? 149 00:06:42,990 --> 00:06:47,010 >> וכך להגיב הוא ממש מגניב, כי אתה יכול להשתמש בו עם כל חזרה סוף שאתה רוצה. 150 00:06:47,010 --> 00:06:50,480 אם יש לך כמו סוף חזרה Python, אם פייתון יכול לירוק כמה נתונים, 151 00:06:50,480 --> 00:06:51,610 מגיב יכול להבהיר את זה. 152 00:06:51,610 --> 00:06:54,700 אם אתה לא תפוקות JS הנתונים, להגיב הופך אותה. 153 00:06:54,700 --> 00:06:56,890 רובי מסילות עם נתונים, להגיב הופכים אותה. 154 00:06:56,890 --> 00:07:01,860 >> אז להגיב הוא בעצם אינטרנט view-- קדמית עם רכיבים 155 00:07:01,860 --> 00:07:03,910 לכל מקור נתונים כלשהם. 156 00:07:03,910 --> 00:07:07,145 וכך הולך ממקור נתונים ל מגיבים רכיבים הוא די קל. 157 00:07:07,145 --> 00:07:08,770 הולכים לכיוון השני הוא קצת יותר קשה. 158 00:07:08,770 --> 00:07:10,462 המשתמש בשטף כפי שציינתי קודם. 159 00:07:10,462 --> 00:07:11,420 אנחנו לא נכנסנו לזה. 160 00:07:11,420 --> 00:07:13,740 אנחנו נתמקד יותר ב נתונים לרכיב הצד. 161 00:07:13,740 --> 00:07:15,880 בדרך זו אתה יכול לעשות , Web Apps כיף מגניב. 162 00:07:15,880 --> 00:07:19,870 זה לא ישפיע על העולם שבחוץ לעת עתה, אבל זה כבר סיפור אחר. 163 00:07:19,870 --> 00:07:22,210 >> אוקיי, אז אם היית כאן לסמינר האחרון שלי 164 00:07:22,210 --> 00:07:26,610 אתה יודע שכל הקוד ל השיחה של היום הולכת להיות בכתובת אתר זו 165 00:07:26,610 --> 00:07:29,320 כאן, מצטער, כתובת אתר זה כאן. 166 00:07:29,320 --> 00:07:32,730 ובעצם אנחנו הולכים ללכת דרך ארבעה שלבים, אולי חמש, 167 00:07:32,730 --> 00:07:33,510 כנראה לא חמש. 168 00:07:33,510 --> 00:07:37,300 אנחנו נעבור דרך ארבעה שלבים בניית מדגם להגיב אפליקציה. 169 00:07:37,300 --> 00:07:39,550 וכך כל קוד המקור לכל אורך הדרך 170 00:07:39,550 --> 00:07:42,216 הולך להיות כאן, כך שאם אתה הבא יחד בבית, 171 00:07:42,216 --> 00:07:43,991 הרגש חופשי לעיין בקוד זה. 172 00:07:43,991 --> 00:07:46,740 אם אתה הבא יחד כאן, נהיה להראות את זה על המסך, 173 00:07:46,740 --> 00:07:47,739 אז אל תדאג בקשר לזה. 174 00:07:47,739 --> 00:07:50,930 אבל אם אתה בבית, מרגיש מוזמן לבקר באתר זה. 175 00:07:50,930 --> 00:07:56,400 ו, כן, אתה אמור להיות מסוגל לקבל כל הקוד אי פעם היית צריכים כאן. 176 00:07:56,400 --> 00:08:01,380 אז זה גיליון לרמות טוב גם כן להרפתקאות שלך בעתיד עם להגיב. 177 00:08:01,380 --> 00:08:04,490 מגניב, כך שאם כל מי שנמצא כאן, וגם אם אתה בבית, 178 00:08:04,490 --> 00:08:11,580 למשוך את האתר הזה, is.gd/cs50react, אין הון, לא תחתון, אין שום דבר. 179 00:08:11,580 --> 00:08:15,849 >> אתה תראה דף שנראה קצת כמו זה. 180 00:08:15,849 --> 00:08:17,140 זה דבר שנקרא CodePen. 181 00:08:17,140 --> 00:08:20,030 CodePen הוא שיתוף פעולה סביבת קידוד 182 00:08:20,030 --> 00:08:23,364 עם שאני יכול לכתוב את הקוד כאן, ו זה יהיה יישלח באופן אוטומטי אליך. 183 00:08:23,364 --> 00:08:24,780 ודרך זו, אני יכול לכתוב קוד. 184 00:08:24,780 --> 00:08:26,920 אני יכול להפעיל קוד כאן. 185 00:08:26,920 --> 00:08:33,470 >> לexample-- ואם זה reloads-- לראות, אני רץ קוד JavaScript בדף 186 00:08:33,470 --> 00:08:36,390 ממש כאן, וזה יהיה באופן אוטומטי הופך את דף אינטרנט 187 00:08:36,390 --> 00:08:37,980 עם קוד JavaScript זה. 188 00:08:37,980 --> 00:08:40,039 ואז זה דרך לנו לנסות את הקוד 189 00:08:40,039 --> 00:08:43,089 באמת מהיר מבלי להשתמש הזהות או להשתמש בהתקן המקומי שלנו שלנו 190 00:08:43,089 --> 00:08:44,290 או מה שלא יהיה. 191 00:08:44,290 --> 00:08:47,670 זוהי דרך מהירה מאוד לך mockup ולבדוק את הסוגים שונים של קוד. 192 00:08:47,670 --> 00:08:50,560 >> אז אני הולך לקחת דוגמא קוד, לשים אותו כאן. 193 00:08:50,560 --> 00:08:52,374 אנחנו הולכים לעבוד דרכו. 194 00:08:52,374 --> 00:08:54,540 ואם אתה בבית, אתה יכול למשוך את זה גם כן. 195 00:08:54,540 --> 00:08:57,530 ואני כבר מותקן מגיב כאן, אז אתה יכול פשוט 196 00:08:57,530 --> 00:09:00,770 לכתוב הקוד שלך כאן, ו לנסות את זה כמגרש המשחקים שלך. 197 00:09:00,770 --> 00:09:04,940 >> כן, אם כולם ל לפתוח את הקישור הזה כאן. 198 00:09:04,940 --> 00:09:08,080 תנו לי בבקשה את האגודלים עד רגע שיש לך את זה פתוח. 199 00:09:08,080 --> 00:09:10,960 200 00:09:10,960 --> 00:09:13,770 מגניב מגניב, מגניב. 201 00:09:13,770 --> 00:09:16,914 אין כאן שום דבר לעת עתה, אבל אנחנו נשנה את זה בקרוב מאוד. 202 00:09:16,914 --> 00:09:21,250 >> אוקיי, אז להגיב הוא JavaScript ספרייה, ובתור שכזה, 203 00:09:21,250 --> 00:09:24,480 דורש ידע של JavaScript, שהיא שפת תכנות האינטרנט. 204 00:09:24,480 --> 00:09:27,660 והוא נמצא בשימוש לדברים אחרים עכשיו יותר מדי, אבל בעיקר באינטרנט לפתח 205 00:09:27,660 --> 00:09:32,040 שפה, כך שאם אתה לא מכיר ש, לקרוא באתר שנקרא JSforCats.com. 206 00:09:32,040 --> 00:09:32,700 זה נפלא. 207 00:09:32,700 --> 00:09:34,240 אתה יכול ללמוד JavaScript בעוד חצי שעה. 208 00:09:34,240 --> 00:09:34,990 זה מדהים. 209 00:09:34,990 --> 00:09:36,420 >> אז לתת לו לקרוא. 210 00:09:36,420 --> 00:09:39,960 אנחנו גם היא הרבה HTML כאן כי אנחנו עיצוב דפי אינטרנט כמובן. 211 00:09:39,960 --> 00:09:43,890 אז אם אתה לא מכיר HTML, לבדוק את HTMLdog.com. 212 00:09:43,890 --> 00:09:46,520 אני חושב ללמוד להגיב הוא מיליון פעמים יותר קלים אם אתה כבר 213 00:09:46,520 --> 00:09:47,892 יודע את אבני הבניין. 214 00:09:47,892 --> 00:09:50,600 אם יש לך את הרכיבים, זה קל לעשות רכיב גדול יותר. 215 00:09:50,600 --> 00:09:51,860 זה להגיב שפה בשבילך. 216 00:09:51,860 --> 00:09:54,270 >> אז קדימה ולתת לי הדברים האלה קראו. 217 00:09:54,270 --> 00:09:55,070 להשהות הסרטון הזה. 218 00:09:55,070 --> 00:09:57,440 לתת לו לקרוא אם אתה בבית אם אתה לא 219 00:09:57,440 --> 00:10:00,794 ב- HTML או JavaScript 220 00:10:00,794 --> 00:10:02,960 אוקיי, אז מה אנחנו הולכים לעשות הוא שאנחנו הולכים לעשות 221 00:10:02,960 --> 00:10:06,470 אפליקציה flashcard מאוד בסיסית באמצעות להגיב. 222 00:10:06,470 --> 00:10:08,210 אנחנו הולכים לי flashcard. 223 00:10:08,210 --> 00:10:09,880 אתה יכול להעיף את הכרטיס הלוך ושוב. 224 00:10:09,880 --> 00:10:12,399 גם ויהיה לנו רשימה של כל הכרטיסים שיש לנו, 225 00:10:12,399 --> 00:10:14,190 ואם אנחנו מרגישים שאפתן, אנחנו יכולים להיות 226 00:10:14,190 --> 00:10:17,060 תוכל לעבור בין מכוניות על ידי לחיצה עליהם. 227 00:10:17,060 --> 00:10:20,360 >> אבל זה, של חשוף שלך עצמות, פשוטות מאוד להגיב אפליקציה. 228 00:10:20,360 --> 00:10:22,560 ואז זה בעצם לא טריוויאלי ליישם, 229 00:10:22,560 --> 00:10:26,030 אבל אנחנו הולכים להראות ש, אם אתה עושה זה, זה מאוד, קל מאוד להאריך אותו 230 00:10:26,030 --> 00:10:27,680 אם אנשים אחרים לעזור לך עם זה. 231 00:10:27,680 --> 00:10:33,750 אז אנחנו הולכים לעבור ארבעה שלבים מתחיל מהתחלה לבנות זה. 232 00:10:33,750 --> 00:10:36,740 >> אוקיי, אז ארבעה שלבים, אנחנו להתחיל עם הצעד הראשון. 233 00:10:36,740 --> 00:10:39,790 הצעד הראשון הולך להיות בניית הרכיב הראשון שלך. 234 00:10:39,790 --> 00:10:44,830 כפי שאמרתי קודם, רכיב במגיב הוא רק אלמנט HTML על סטרואידים. 235 00:10:44,830 --> 00:10:49,660 הוא מציין את ה- HTML וכמה התנהגות, וזה 236 00:10:49,660 --> 00:10:52,600 יפרט איך אנשים יכול לקיים אינטראקציה עם אותו איך 237 00:10:52,600 --> 00:10:54,270 היה זה מצב פנימי. 238 00:10:54,270 --> 00:10:57,630 כמו כפתור תדע כמו כמה פעמים זה כבר לחץ לדוגמא, 239 00:10:57,630 --> 00:11:01,010 וזה יודע איך להוציא את עצמו. 240 00:11:01,010 --> 00:11:04,430 >> אז בואו נלך קדימה ולבנות שלנו רכיב ראשון באמצעות JavaScript. 241 00:11:04,430 --> 00:11:09,711 אז אם התחביר נראה מוזר, זה בגלל שזה סוג שלו. 242 00:11:09,711 --> 00:11:11,710 אז, שוב, אנחנו הולכים כדי להפוך משתנה בשם 243 00:11:11,710 --> 00:11:14,580 אפליקציה משתמשת במילת המפתח לתת, מה שהופך את משתנה, 244 00:11:14,580 --> 00:11:18,210 בוא React.createClass שווה App. 245 00:11:18,210 --> 00:11:22,609 >> מגיב היא ספרייה ויש ליצור פונקצית כיתה. 246 00:11:22,609 --> 00:11:24,400 ופונקציה זו היא קצת קוד ש 247 00:11:24,400 --> 00:11:29,090 ניתן להשתמש כדי ליצור חדש סוג של רכיב להגיב. 248 00:11:29,090 --> 00:11:32,780 וכך React.createClass עושה רכיב, 249 00:11:32,780 --> 00:11:35,270 ורכיב זה להיות מסוגל לעשות דברים. 250 00:11:35,270 --> 00:11:40,460 הדבר העיקרי שהוא יכול לעשות הוא לדקלם משהו, לדקלם כפונקציה. 251 00:11:40,460 --> 00:11:44,500 >> שוב, אם מדד זה לא מובן מאליו ל אתה, אני ממליץ לך ללכת על JS לחתולים 252 00:11:44,500 --> 00:11:45,682 ולבדוק את זה. 253 00:11:45,682 --> 00:11:47,710 האם שזנק במספיק טוב? 254 00:11:47,710 --> 00:11:48,490 מגניב. 255 00:11:48,490 --> 00:11:50,670 >> אז כל צרכי רכיב יש פונקציה לדקלם. 256 00:11:50,670 --> 00:11:53,010 הפונקציה לדקלם אומרת, מה אוכל להדפיס על המסך? 257 00:11:53,010 --> 00:11:54,760 אבל הרכיב הוא חסר תועלת אם לא 258 00:11:54,760 --> 00:11:58,060 יודע מה להדפיס על המסך, כך אתה צריך להיות פונקציה לדקלם. 259 00:11:58,060 --> 00:12:01,904 >> אז בדבר להבהיר, ש רק צריך לחזור כמה HTML. 260 00:12:01,904 --> 00:12:03,820 ומה זה מגניב הוא ש יש דבר שנקרא 261 00:12:03,820 --> 00:12:08,660 JSX, שהוא שלוחה של JavaScript המשמש להגיב. 262 00:12:08,660 --> 00:12:11,845 זה בוא אתה כותב HTML בתוך של JavaScript שלך, ש 263 00:12:11,845 --> 00:12:13,970 נשמע קצת מוזר כש אתה חושב על זה ראשון, 264 00:12:13,970 --> 00:12:15,553 אבל זה עושה הרבה חוש אחר. 265 00:12:15,553 --> 00:12:17,430 אז אנחנו יכולים לעשות את זה. 266 00:12:17,430 --> 00:12:21,360 אם אתה מכיר את HTML, אני יודע יש לנו div עם מטרות כלליות 267 00:12:21,360 --> 00:12:22,790 מיכל לחומר. 268 00:12:22,790 --> 00:12:26,380 אנחנו יכולים לחזור div, ובתוך div זה, אנחנו יכולים לשים דברים. 269 00:12:26,380 --> 00:12:32,390 >> אז בואו נגיד שאנחנו רוצים להבהיר רק flashcard ישר לעכשיו. 270 00:12:32,390 --> 00:12:34,890 Flashcard, הייתי אומר, תהיה שאלה ותשובה. 271 00:12:34,890 --> 00:12:37,530 אז בתוך div זה, בואו להדפיס את סעיף 272 00:12:37,530 --> 00:12:42,155 שאומר question-- מה הוא תשובה אולטימטיבית לחיים, היקום? 273 00:12:42,155 --> 00:12:47,640 274 00:12:47,640 --> 00:12:50,345 ואז התשובה היא הולך להיות, כמובן, 42. 275 00:12:50,345 --> 00:12:56,880 276 00:12:56,880 --> 00:12:59,730 >> שלא עלה גם בכל. 277 00:12:59,730 --> 00:13:04,164 כן, אז בעצם אתה באמת יכול לכתוב HTML בתוך JavaScript שלך. 278 00:13:04,164 --> 00:13:06,330 וזה הולך להיות הדפיס לתוך המסך. 279 00:13:06,330 --> 00:13:08,250 אז בואו לנסות אותו. 280 00:13:08,250 --> 00:13:09,520 >> אז יש לנו הרכיב שלנו. 281 00:13:09,520 --> 00:13:12,210 אנחנו צריכים להגיד לי להגיב לשים הרכיב על המסך 282 00:13:12,210 --> 00:13:18,990 כך React.render, כך שם לב ש טיפול באפליקציה כמו כל גורם אחר. 283 00:13:18,990 --> 00:13:21,010 אנחנו כותבים את זה כמו שזה היה אלמנט HTML. 284 00:13:21,010 --> 00:13:25,100 כמו במקום לומר כמו img לתמונה או p לסעיף, 285 00:13:25,100 --> 00:13:28,120 אתה כותב אפליקציה, כך App הוא יתייחס אליה כמו אלמנט HTML. 286 00:13:28,120 --> 00:13:30,380 כפי שאמרתי קודם, זה אלמנט על סטרואידים. 287 00:13:30,380 --> 00:13:32,870 >> אז אתה הופך את האפליקציה, ואתה נותן לו מקום לשים אותו. 288 00:13:32,870 --> 00:13:37,170 וזה איך אתה יכול תגיד לו איפה לשים את זה. 289 00:13:37,170 --> 00:13:46,200 אני יצרתי div פשוט ב דף שנקרא עם זיהוי של דף, 290 00:13:46,200 --> 00:13:48,300 וזה המקום שבי אלמנט הולך ללכת. 291 00:13:48,300 --> 00:13:49,841 >> ואנחנו לא מתכוונים לרוץ עם HTML. 292 00:13:49,841 --> 00:13:53,145 בעיקרון זה הולך לקבל לשים בתוך אלמנט דף זה 293 00:13:53,145 --> 00:13:54,270 שיש לנו על המסך. 294 00:13:54,270 --> 00:13:59,210 אז הוא פועל קוד זה, וזה מושך זה דבר על המסך, אז הנה אנחנו. 295 00:13:59,210 --> 00:14:01,770 אנחנו עשינו להגיב הרכיב הראשון שלנו. 296 00:14:01,770 --> 00:14:08,000 >> אז רק כסיכום, אנו עדינות עשו סוג חדש של רכיב, נכון? 297 00:14:08,000 --> 00:14:10,145 זה מה שReact.createClass. 298 00:14:10,145 --> 00:14:12,680 וברכיב זה, אנחנו אמר לו מה שהוא צריך לעשות. 299 00:14:12,680 --> 00:14:15,590 בכל פעם שרכיב זה הוא להיות מודפס על גבי המסך, 300 00:14:15,590 --> 00:14:19,300 זה יהיה להדפיס את div עם שני הסעיפים בתוכו. 301 00:14:19,300 --> 00:14:24,460 >> ומה שעשינו, עשינו אפליקציה חדשה באמצעות סימון האפליקציה הסוגר זווית. 302 00:14:24,460 --> 00:14:27,160 אמרו לו לשים אותו בתוך אלמנט הדף. 303 00:14:27,160 --> 00:14:29,867 ואז מה שעשיתי, זה יצר אפליקציה חדשה מתבנית ש. 304 00:14:29,867 --> 00:14:31,200 ואז אמרתי לו כדי להבהיר את זה. 305 00:14:31,200 --> 00:14:33,680 אז הוא אמר, בסדר, אפליקציה, מה אני צריך להדפיס את? 306 00:14:33,680 --> 00:14:36,970 האפליקציה אומרת, ללכת להדפיס את div עם שתי פסקאות בתוכו. 307 00:14:36,970 --> 00:14:40,420 והנה, יש div שלנו עם שתי פסקאות בתוכו. 308 00:14:40,420 --> 00:14:43,180 הגיוני עד כה? 309 00:14:43,180 --> 00:14:46,690 >> אז, שוב, כל האתגר של להגיב הוא רק לדעת איך לעשות רכיבים. 310 00:14:46,690 --> 00:14:48,500 כיצד להפוך את רכיבים לעבוד יחד. 311 00:14:48,500 --> 00:14:51,780 עכשיו שאנחנו כבר עשינו הראשונים רכיב, בואו נחזור 312 00:14:51,780 --> 00:14:54,284 ולהפוך את הרכיבים להתאמה אישית. 313 00:14:54,284 --> 00:14:56,700 אז אתה יודע איך אתה ב- HTML יכול לתת שיעורי הכפתורים שלך? 314 00:14:56,700 --> 00:14:59,146 אתה יכול לתת לך עוגני href. 315 00:14:59,146 --> 00:15:00,770 אתה יכול לתת לך תשומות סוג, נכון? 316 00:15:00,770 --> 00:15:04,740 אתה יכול לתת יותר מותאם אישית מאפיינים לכל האלמנטים שלך 317 00:15:04,740 --> 00:15:06,490 כדי לעשות את זה יותר מעניין. 318 00:15:06,490 --> 00:15:09,030 ואנחנו באמת יכולים לעשות את אותו הדבר בדיוק. 319 00:15:09,030 --> 00:15:17,500 >> אז בואו נגיד שאנחנו רוצים האפליקציה ללכת תהפוך כל כרטיס. 320 00:15:17,500 --> 00:15:19,630 כרגע אנחנו פשוט שניתנו hardcoded כרטיס. 321 00:15:19,630 --> 00:15:22,530 אנחנו יודעים שיש רק אחד כרטיס זה יכול לעשות, כך שאנחנו 322 00:15:22,530 --> 00:15:25,960 הולך לנסות ולשנות את זה עכשיו כל כך שאנחנו יכולים רק לתת לזה קצת כרטיס. 323 00:15:25,960 --> 00:15:27,410 זה יהיה להדפיס את הכרטיס. 324 00:15:27,410 --> 00:15:29,380 >> אתה צריך לנסות ולעשות רכיבי מטרה כללית מאוד. 325 00:15:29,380 --> 00:15:31,654 אז ככה אני יכול לשלוח בדוא"ל חבר שלי ולהיות כמו, 326 00:15:31,654 --> 00:15:33,820 כל מה שיש לך flashcard, רק להאכיל אותו לכאן, 327 00:15:33,820 --> 00:15:35,290 וזה יעשה את זה בעצמו. 328 00:15:35,290 --> 00:15:37,650 אתה יכול לשים אחר דברים באפליקציה שלך. 329 00:15:37,650 --> 00:15:40,600 >> אבל קודם, בואו לשבור את זה לשני רכיבים, 330 00:15:40,600 --> 00:15:44,500 אבל אנחנו רוצים להפריד את הכרטיס חלק הדפסה מחלק היישום בפועל. 331 00:15:44,500 --> 00:15:46,660 אז מה אנחנו יכולים לעשות הם יכול לשנות את זה מהאפליקציה 332 00:15:46,660 --> 00:15:51,300 לCardView, רק שם חדש לאפליקציה, 333 00:15:51,300 --> 00:15:54,450 ואנחנו יכולים לעשות חדשים רכיב בשם App, 334 00:15:54,450 --> 00:15:56,336 לא להתבלבל עם היישומים הישנים. 335 00:15:56,336 --> 00:16:00,730 יש לנו createClass, וכמו ב- HTML, 336 00:16:00,730 --> 00:16:03,590 קן אתה יכול להגיב רכיבים בתוך אחד את השני. 337 00:16:03,590 --> 00:16:16,430 >> אז בפונקציה זו להבהיר, CardView לחזור לתפקד, 338 00:16:16,430 --> 00:16:18,234 וזה בדיוק אותו דבר. 339 00:16:18,234 --> 00:16:19,400 ראה למה זה אותו הדבר? 340 00:16:19,400 --> 00:16:22,590 במקום טיוח רק האפליקציה ש יש div וזיווג בתוכו, 341 00:16:22,590 --> 00:16:26,194 האפליקציה הופכת את CardView, ו CardView הופך div וסעיף. 342 00:16:26,194 --> 00:16:29,110 אז זה הוא הדוגמא הראשונה שלנו אלמנטי קינון בתוך אחד את השני. 343 00:16:29,110 --> 00:16:32,177 האם זה הגיוני? 344 00:16:32,177 --> 00:16:33,760 אז, שוב, יש לנו אלמנט CardView. 345 00:16:33,760 --> 00:16:37,250 יש לנו אלמנטי אפליקציה שזה יותר גדול מ. 346 00:16:37,250 --> 00:16:40,990 >> אוקיי, אז אנחנו רוצים CardView-- אם אתה לתת CardView טוב מסוים כרטיס, 347 00:16:40,990 --> 00:16:43,370 זה יהיה להדפיס אותך, נכון? 348 00:16:43,370 --> 00:16:48,050 אז קודם כל, אנחנו צריכים לעשות את כרטיס, אז בואו להפוך אובייקט כרטיס. 349 00:16:48,050 --> 00:17:02,930 אז בואו הכרטיס שלי equal-- אם אתה מכיר את כל, 350 00:17:02,930 --> 00:17:05,260 זה קבלת הסימון פשוט מתנגד ב- JavaScript. 351 00:17:05,260 --> 00:17:09,280 זה כמו סוג של struct ב- C, כך שעשינו כרטיס, 352 00:17:09,280 --> 00:17:15,920 ואז עכשיו אנחנו יכולים לעבור את זה ככרטיס רכוש או כתכונה ב- HTML 353 00:17:15,920 --> 00:17:17,290 מינוח לאפליקציה שלנו. 354 00:17:17,290 --> 00:17:20,210 אז אנחנו יכולים לעשות את זה, App כרטיס שווה myCard. 355 00:17:20,210 --> 00:17:23,200 >> אתה יודע איך בקלט, אתה עושה סוג הקלט שווה טקסט או כפתור 356 00:17:23,200 --> 00:17:25,240 מעמד שווה BTN לbootstrap ,? 357 00:17:25,240 --> 00:17:29,500 אותו רעיון, equals-- כרטיס App יש לך לשים את הפלטה כאן-- 358 00:17:29,500 --> 00:17:33,830 כרטיס אפליקציה שווה myCard, אז זה אומר שיש לנו אובייקט כרטיס זה. 359 00:17:33,830 --> 00:17:39,149 אני הולך להעביר את זה כ נכס לרכיב האפליקציה. 360 00:17:39,149 --> 00:17:41,440 ורכיב יישום זה תוכל לגשת אליו ולעשות 361 00:17:41,440 --> 00:17:43,580 דברים מעניינים עם זה. 362 00:17:43,580 --> 00:17:47,650 >> אז האפליקציה שלנו הולכת להיות נתן כרטיס, אז לעת עתה, 363 00:17:47,650 --> 00:17:49,980 בואו יישום פשוט לתת לי הכרטיס לCardView 364 00:17:49,980 --> 00:17:53,110 עצמו, כי כמו האפליקציה היא לא הולך יודעים מה לעשות עם זה, 365 00:17:53,110 --> 00:17:54,850 אז אנחנו פשוט אתן לי CardView. 366 00:17:54,850 --> 00:18:00,050 אז אנחנו נעבור את זה אותו אופן, כרטיס שווה, 367 00:18:00,050 --> 00:18:05,426 וכך כל רכיב יכול לגשת ל דברים שכבר ניתנו לה. 368 00:18:05,426 --> 00:18:07,800 הם יכולים לגשת למאפיינים שניתן לה 369 00:18:07,800 --> 00:18:09,470 תוך שימוש בתחביר זה, this.props.card. 370 00:18:09,470 --> 00:18:12,010 371 00:18:12,010 --> 00:18:14,920 >> אז מה קורה כאן יש לך את אובייקט myCard. 372 00:18:14,920 --> 00:18:18,250 אתה עובר אותו ליישום באמצעות כרטיס App שווה myCard. 373 00:18:18,250 --> 00:18:21,420 שאובייקט הכרטיס ניתן ליישום שלך. 374 00:18:21,420 --> 00:18:24,400 האפליקציה יכולה לגשת אליו כthis.props.card. 375 00:18:24,400 --> 00:18:28,780 זה כמו סוג של תמונה יודע מה הוא המקור שלו. 376 00:18:28,780 --> 00:18:31,972 >> יישום זה יודע מה זה כרטיס הוא, והוא יכול לעשות דברים עם זה. 377 00:18:31,972 --> 00:18:32,930 זה יכול לעשות חישובים. 378 00:18:32,930 --> 00:18:35,290 זה יכול לקבל החלטות מבוססות על הנחה שלו. 379 00:18:35,290 --> 00:18:39,950 >> לעת עתה, אני הולך לעבור this.props.card על CardView. 380 00:18:39,950 --> 00:18:43,420 הגיוני עד כה? 381 00:18:43,420 --> 00:18:45,210 זה יהיה הגיוני יותר עכשיו. 382 00:18:45,210 --> 00:18:46,990 >> אוקיי, אז עכשיו אנחנו בCardView. 383 00:18:46,990 --> 00:18:51,719 CardView, נתן את הכרטיס, צריך להדפיס את השאלה והתשובה שלה. 384 00:18:51,719 --> 00:18:54,510 כרגע אנחנו פשוט הדפסנו כמה שאלות ותשובות hardcoded. 385 00:18:54,510 --> 00:18:57,720 אנחנו צריכים להבין שאנחנו צריכים out-- לשאול את הכרטיס שהם נתנו לנו 386 00:18:57,720 --> 00:19:01,360 מה היא השאלה והתשובה, ו לאחר מכן להדפיס את זה החוצה אל המסך. 387 00:19:01,360 --> 00:19:02,470 >> אז אנחנו יכולים לעשות את זה כאן. 388 00:19:02,470 --> 00:19:06,135 בלדקלם begin-- לעשות קודם שווה. 389 00:19:06,135 --> 00:19:08,710 390 00:19:08,710 --> 00:19:13,050 אז מה שאנחנו עושים כאן הוא שאנחנו יודעים ש מקבלים הכרטיסים לנו רכוש, 391 00:19:13,050 --> 00:19:13,580 יָמִינָה? 392 00:19:13,580 --> 00:19:15,930 זה נתן לנו כקלט. 393 00:19:15,930 --> 00:19:19,440 כמו זה כמעט כמו טיעונים לפונקציה. 394 00:19:19,440 --> 00:19:22,810 הכרטיס הוא טיעון כמעט לCardView זה. 395 00:19:22,810 --> 00:19:25,239 >> אנחנו לחלץ את זה, ולשים שלו לשאלה משתנה. 396 00:19:25,239 --> 00:19:27,280 ודא את התשובה הלכה לתשובה משתנה. 397 00:19:27,280 --> 00:19:31,130 מבקש שכרטיס לענות. 398 00:19:31,130 --> 00:19:35,072 ועכשיו שיש לנו אלה, במקום להדפיס את הטקסט ש, 399 00:19:35,072 --> 00:19:37,030 אנחנו הולכים להדפיס כל מה שהם נתנו לנו. 400 00:19:37,030 --> 00:19:43,580 >> אז זה stuff-- כך אנחנו הולכים לכבות לענות על שאלה. 401 00:19:43,580 --> 00:19:46,380 בואו אראה אם ​​זה עובד. 402 00:19:46,380 --> 00:19:52,800 מגניב, אז בואו לצעוד דרכו עוד פעם אחת רק כדי להיות בטוחה. 403 00:19:52,800 --> 00:20:00,470 >> אז הכרטיס שלי הוא אובייקט כרטיס, ואנחנו נותנים כרטיס שלאפליקציה. 404 00:20:00,470 --> 00:20:04,790 והיישום הולך לקחת כרטיס ולתת לCardView זה. 405 00:20:04,790 --> 00:20:09,190 וזה אומר CardView, אם אתה תן לי כל חפץ flashcard, 406 00:20:09,190 --> 00:20:11,920 אני להדפיס את שאלתה והתשובה שלו, נכון? 407 00:20:11,920 --> 00:20:14,590 >> אז מה אני יכול לעשות הוא שאני יכול לשלוח את הקוד הזה, הראשון 408 00:20:14,590 --> 00:20:16,580 כמו 10 שורות הקוד שלי, לחבר שלי. 409 00:20:16,580 --> 00:20:18,820 הוא יכול להטביע בזה יישום עצמו. 410 00:20:18,820 --> 00:20:27,200 וכל עוד הוא עשה את אותו הדבר, כמו כרטיס CardView שווה את זה, 411 00:20:27,200 --> 00:20:30,580 כל עוד הוא יצר CardView ונתתי לו את המידע הנכון, 412 00:20:30,580 --> 00:20:31,987 הוא יכול להפוך כרטיס שלו. 413 00:20:31,987 --> 00:20:34,320 וכך בדרך זו, זה באמת דרך מגניב לך לבנות 414 00:20:34,320 --> 00:20:35,906 רכיבים המשתמשים אחד את השני, נכון? 415 00:20:35,906 --> 00:20:38,280 כרטיס זה, אני יכול לפרסם CardView זה באינטרנט, 416 00:20:38,280 --> 00:20:39,790 ואנשים יוכלו להשתמש בו. 417 00:20:39,790 --> 00:20:45,070 אז בעצם, זה כמו אחד מ פונקציות סטנדרטיים בספריית C. 418 00:20:45,070 --> 00:20:47,280 >> זוהי פונקציה שבי מישהו כתב את זה. 419 00:20:47,280 --> 00:20:48,419 אתה נותן קלט מסוים. 420 00:20:48,419 --> 00:20:49,710 זה יהיה לייצר תפוקה מסוימת. 421 00:20:49,710 --> 00:20:50,890 לא אכפת לך איך זה עובד באופן פנימי. 422 00:20:50,890 --> 00:20:53,790 כל עוד אתה נותן לו את הזכות קלט, זה יהיה להפוך את הפלט הנכון. 423 00:20:53,790 --> 00:20:57,850 >> ורכיב יכול להיות חשב על אותה הדרך. 424 00:20:57,850 --> 00:21:00,280 CardView זה כמו פונקצית ספרייה. 425 00:21:00,280 --> 00:21:03,400 אם אתה נותן לו כמה כרטיס כרכוש, זה ימצא 426 00:21:03,400 --> 00:21:05,095 להדפיס את התוכן של כרטיס ש. 427 00:21:05,095 --> 00:21:16,820 כמו אם אני משנה את הכרטיס שלי ל במקום להיות כמו מה הוא 5 בתוספת 37, 428 00:21:16,820 --> 00:21:19,210 זה יעדכן בהתאם. 429 00:21:19,210 --> 00:21:21,955 אז פשוט על ידי שינוי הקלט, הוא מקבל פלט מסוים. 430 00:21:21,955 --> 00:21:24,830 אז אתה יכול לחשוב על רכיבים כמעט כפונקציות בדרך זו, ש 431 00:21:24,830 --> 00:21:25,920 אתה יכול להרכיב. 432 00:21:25,920 --> 00:21:29,440 אתה מקבל קלט, כמו CardView זה כקלט, אתה מקבל פלט. 433 00:21:29,440 --> 00:21:31,900 במקרה זה, פלט הוא HTML. 434 00:21:31,900 --> 00:21:34,404 הגיוני עד כה? 435 00:21:34,404 --> 00:21:36,890 מגניב, אז שוב, מאפייניהם איך אתה יכול להעביר את המידע 436 00:21:36,890 --> 00:21:40,900 לתוך ומחוץ לרכיבים. 437 00:21:40,900 --> 00:21:42,740 >> אוקיי, אז בואו נעשה את זה דבר אינטראקטיבי. 438 00:21:42,740 --> 00:21:44,450 כרגע זה סוג של משעמם. 439 00:21:44,450 --> 00:21:45,520 מה הוא [לא ברור]? 440 00:21:45,520 --> 00:21:48,210 אתה יכול להדפיס את חלק, אבל זה כל מה שהוא יכול לעשות. 441 00:21:48,210 --> 00:21:51,550 >> אז בואו נחזור ל שאלה ישנה רק לעת עתה. 442 00:21:51,550 --> 00:21:54,405 אוקיי, אז עכשיו רכיבים אלה משעממים כי כולם עושים, 443 00:21:54,405 --> 00:21:55,030 הם מקבלים קלט. 444 00:21:55,030 --> 00:21:56,100 הם עושים פלט, נכון? 445 00:21:56,100 --> 00:21:57,049 זה סוג של משעמם. 446 00:21:57,049 --> 00:21:59,090 אנחנו רוצים שנהיה לנו רכיבים כדי להיות מסוגלים לי 447 00:21:59,090 --> 00:22:02,150 איזה מצב פנימי, כמו להיזכר במשהו. 448 00:22:02,150 --> 00:22:05,320 >> לflashcard, ל למשל, איזה סוג של מדינה 449 00:22:05,320 --> 00:22:07,550 אולי כדאי לך זוכר לflashcard? 450 00:22:07,550 --> 00:22:09,740 מה מעמד ארעי ייתכן שתרצה לזכור 451 00:22:09,740 --> 00:22:12,491 לflashcard ביישום flashcard? 452 00:22:12,491 --> 00:22:13,990 קהל: בין אם זה כבר התהפך? 453 00:22:13,990 --> 00:22:14,990 ניל מהטה: כן, נכון. 454 00:22:14,990 --> 00:22:17,665 אז אולי כדאי לך לשמור על מסלול שלך הוא עם הפנים כלפי מעלה או 455 00:22:17,665 --> 00:22:19,100 אתה עם פנים כלפי מטה על הכרטיס. 456 00:22:19,100 --> 00:22:23,420 בפייסבוק, למשל, שהיית רוצה להיזכר איפה בהזנה החדשות 457 00:22:23,420 --> 00:22:25,870 אתה אוהב או שזה פרופיל אתה עושה עכשיו. 458 00:22:25,870 --> 00:22:30,127 >> בMessenger, כמו מה טקסט ש הקלד בתיבת הקלט, נכון? 459 00:22:30,127 --> 00:22:31,710 אם אתה לרענן את הדף, זה הולך משם. 460 00:22:31,710 --> 00:22:32,793 אבל לא אכפת לך באמת. 461 00:22:32,793 --> 00:22:33,770 זה רק זמני. 462 00:22:33,770 --> 00:22:34,548 כֵּן? 463 00:22:34,548 --> 00:22:36,152 >> קהל: [לא ברור] 464 00:22:36,152 --> 00:22:38,360 ניל מהטה: כמו הבזק כרטיס, כמו שאתה יכול להיות שראית 465 00:22:38,360 --> 00:22:40,290 בצד השאלה או צד התשובה? 466 00:22:40,290 --> 00:22:41,070 >> קהל: אישור. 467 00:22:41,070 --> 00:22:43,270 >> ניל מהטה: כמו שני-צדדיים flashcard, נכון? 468 00:22:43,270 --> 00:22:46,370 כן, אז אתה רוצה יש את הרעיון הזה של החברה 469 00:22:46,370 --> 00:22:50,370 יש לי נכסים, שהוא כמו תשומות, אבל מדינה, שהוא זמני, אה, 470 00:22:50,370 --> 00:22:51,839 היכן אתה נמצא בדף, נכון? 471 00:22:51,839 --> 00:22:54,380 שוב, אמרתי בפייסבוק שליח, יש לי כמו שאדם 472 00:22:54,380 --> 00:22:56,550 אתה צופה בפייסבוק או שזה פרופיל, נכון? 473 00:22:56,550 --> 00:22:58,030 >> זה הוא זמני בלבד. 474 00:22:58,030 --> 00:23:01,200 חשוב להראות למשתמש מה קורה, אבל לרענן את הדף. 475 00:23:01,200 --> 00:23:02,250 זה לא משנה באמת. 476 00:23:02,250 --> 00:23:04,530 אז זה מצב זמני, כך כולנו המצב שבו. 477 00:23:04,530 --> 00:23:06,250 >> אז, שוב, יש מדינה ואבזרים. 478 00:23:06,250 --> 00:23:09,084 אבזרים ניתן קלט ממקור הנתונים שלך. 479 00:23:09,084 --> 00:23:10,250 מדינה היא בדיוק כמו ברירת מחדל. 480 00:23:10,250 --> 00:23:13,700 זה בדיוק כמו דברים ש עושה הדבר אינטראקטיבי. 481 00:23:13,700 --> 00:23:17,720 >> אז בנו CardView-- בואו שלנו CardView-- אז זה היה נחמד. 482 00:23:17,720 --> 00:23:21,420 מה שאנחנו הולכים לעשות כאן, אנחנו הולכים לגעת CardView ורק CardView. 483 00:23:21,420 --> 00:23:25,105 וכך חבר שלי שקיבל את זה, הם לא הבחין בשום הבדל. 484 00:23:25,105 --> 00:23:27,230 הם לא צריכים לשנות כל הקוד שלהם, 485 00:23:27,230 --> 00:23:29,410 אבל הם היינו רואים אותם CardView יש משופר עד. 486 00:23:29,410 --> 00:23:31,270 זה חלק נחמד על רכיבים. 487 00:23:31,270 --> 00:23:35,290 >> אוקיי, אז בCardView, בואו ננסה ו לעקוב אחר אם אנחנו לשלב את 488 00:23:35,290 --> 00:23:36,560 או עם פנים כלפי מטה. 489 00:23:36,560 --> 00:23:40,480 במגיב אנחנו עושים את זה על ידי ראשון המפרט את המצב ההתחלתי. 490 00:23:40,480 --> 00:23:42,070 איפה הכרטיס להתחיל? 491 00:23:42,070 --> 00:23:48,480 >> אז להיות פונקציה שנקראת getInitialState לתפקד, ואנחנו חוזרים אובייקט. 492 00:23:48,480 --> 00:23:53,310 אובייקט זה מכיל כמה מדינה, ו מדינה היא רק זוג מפתחות-ערך. 493 00:23:53,310 --> 00:23:56,950 כמו ביורה, יש לך מפתח ו ערך, יש לך כמו שם הוא מחרוזת. 494 00:23:56,950 --> 00:24:01,410 >> במקרה זה, נניח מול נכון. 495 00:24:01,410 --> 00:24:03,760 זה אומר שיש לנו מדינה. 496 00:24:03,760 --> 00:24:06,570 מרכיב אחד של המדינה היא תכונה שנקראת קדמי. 497 00:24:06,570 --> 00:24:09,649 [לא ברור], ולכן כברירת מחדל, אנחנו בחזית הכרטיס, 498 00:24:09,649 --> 00:24:11,440 ואנחנו יכולים לשנות את זה כפי שאנו להעיף את הכרטיס. 499 00:24:11,440 --> 00:24:13,380 הגיוני? 500 00:24:13,380 --> 00:24:18,190 >> אוקיי, אז בלדקלם, עכשיו, אנחנו מראה את השאלה ואת התשובה. 501 00:24:18,190 --> 00:24:20,860 עכשיו מה שאנחנו צריכים לעשות הוא מציג את השאלה 502 00:24:20,860 --> 00:24:24,370 אם אנחנו בחזית של הכרטיס כך התשובה היא לחלק האחורי של הכרטיס. 503 00:24:24,370 --> 00:24:26,850 בגלל זה כל מה שאתה עושה הכרטיס אינטראקטיבי. 504 00:24:26,850 --> 00:24:28,100 אז בואו ננסה וזה כאן. 505 00:24:28,100 --> 00:24:31,600 506 00:24:31,600 --> 00:24:33,620 ובכן, ראשון פשוט להפוך משתנה. 507 00:24:33,620 --> 00:24:37,790 אנחנו יכולים לשאול עכשיו this.state.front. 508 00:24:37,790 --> 00:24:42,010 שלנו גישה המדינה את אותו אבזרי גישה, כך this.state.front. 509 00:24:42,010 --> 00:24:45,870 >> אם אנחנו קדמי, אז טקסט הוא this.props.card.question. 510 00:24:45,870 --> 00:24:48,777 511 00:24:48,777 --> 00:24:51,360 אם אנחנו בחזית כרטיס, אנחנו הולכים לנסות ולתפוס 512 00:24:51,360 --> 00:24:52,485 השאלה מהכרטיס. 513 00:24:52,485 --> 00:24:54,782 514 00:24:54,782 --> 00:24:57,240 אחרת, אם אנחנו בגב של הכרטיס, מה עושים? 515 00:24:57,240 --> 00:25:01,830 516 00:25:01,830 --> 00:25:02,750 >> קהל: התשובה? 517 00:25:02,750 --> 00:25:05,041 >> ניל מהטה: כן, כך טקסט שווה this.props.card.answer. 518 00:25:05,041 --> 00:25:08,472 519 00:25:08,472 --> 00:25:10,930 אבל אם תשים לב, אנחנו משתמשים המדינה צריכה לקבל החלטה 520 00:25:10,930 --> 00:25:14,420 כי עכשיו הרכיב ייראה אחר 521 00:25:14,420 --> 00:25:16,710 המבוסס על הנחה כיצד אלה אינטראקציה עם זה. 522 00:25:16,710 --> 00:25:20,355 אז במקום להדפיס את זה, אנחנו פשוט להדפיס את הטקסט. 523 00:25:20,355 --> 00:25:25,270 524 00:25:25,270 --> 00:25:28,650 מגניב, אז עכשיו, כפי שאתה רואה, אנו רואים רק את השאלה. 525 00:25:28,650 --> 00:25:37,720 ואם אני משנה את המצב כאן באופן ידני לחזית היא שקר שאנו מקבלים 42 בחזרה. 526 00:25:37,720 --> 00:25:39,720 >> אז, שוב, רכיב זה יש מדינה משלו. 527 00:25:39,720 --> 00:25:43,440 כמו כפתור יודע אם זה כבר לחץ או לא, 528 00:25:43,440 --> 00:25:46,080 הדבר הזה יודע מה הוא ב החזית או בגב. 529 00:25:46,080 --> 00:25:48,320 כברירת מחדל, זה שבחזית. 530 00:25:48,320 --> 00:25:50,840 ואז אם זה בחזית, אנו נדפיס את השאלה. 531 00:25:50,840 --> 00:25:53,106 אם זה על הגב, אנחנו להדפיס את התשובה. 532 00:25:53,106 --> 00:25:54,980 אז, שוב, את המידע נתתי אותו. 533 00:25:54,980 --> 00:25:59,090 זה פשוט נראה אחר מבוסס על איך אתה לתכנת אותו. 534 00:25:59,090 --> 00:26:02,670 כך, למשל, פייסבוק Messenger, גם אם אתה מקבל אותו מקור המידע, 535 00:26:02,670 --> 00:26:05,170 זה עשוי להיראות שונה משום שהמדינה היא שונה. 536 00:26:05,170 --> 00:26:08,421 אתה מחפש ב ההודעה של האדם אחר. 537 00:26:08,421 --> 00:26:10,930 >> אוקיי, אז כל זה טוב ו טוב, אבל עכשיו מה בעצם 538 00:26:10,930 --> 00:26:15,940 לגרום לנו נוכל לשנות, אם הכרטיס שלנו הוא קדמי או אחורי. 539 00:26:15,940 --> 00:26:19,010 אנחנו יכולים לעשות את זה על ידי הוספה להעיף כפתור, כפתור לכרטיס ש 540 00:26:19,010 --> 00:26:22,950 יהיה להעיף את הכרטיס אם זה [לא ברור] זה. 541 00:26:22,950 --> 00:26:31,770 אז בואו להוסיף כפתור כאן, זה כפתור, והכפתור הזה יגיד להעיף. 542 00:26:31,770 --> 00:26:35,650 >> וכך עכשיו, זה לא עושה כלום. 543 00:26:35,650 --> 00:26:37,075 זה פשוט נראה נחמד. 544 00:26:37,075 --> 00:26:43,650 מה אנחנו יכולים לעשות הוא שאנחנו יכולים להוסיף לחצו מטפל, onClick שווה this.flip, 545 00:26:43,650 --> 00:26:44,820 ואנו מגדירים להעיף מאוחר יותר. 546 00:26:44,820 --> 00:26:47,120 אבל בעצם, onClick היא פונקציה ש 547 00:26:47,120 --> 00:26:48,675 מקבל נקרא כאשר המשתמש לוחץ אותו. 548 00:26:48,675 --> 00:26:52,330 >> אז על הכפתור תדע כאשר זה כבר לחץ. 549 00:26:52,330 --> 00:26:54,750 הלך זה כבר לחץ, זה יהיה להעיף את הכרטיס. 550 00:26:54,750 --> 00:26:58,382 זה כמו סוג שלך שליח פיצה, בחור. 551 00:26:58,382 --> 00:27:01,590 אתה כמו, בסדר, בכל פעם שמישהו קורא לי, אני לספק פיצה, נכון? 552 00:27:01,590 --> 00:27:03,420 >> אתה נרשם מאזין זה. 553 00:27:03,420 --> 00:27:04,530 אתה מקשיב לאירוע. 554 00:27:04,530 --> 00:27:07,657 אתה מקבל בשם, וכש אירוע שקורה, אתה עושה משהו. 555 00:27:07,657 --> 00:27:08,240 אתה מקבל פיצה. 556 00:27:08,240 --> 00:27:11,480 במקרה זה, כשאתה לחץ, אתה להעיף את הכרטיס. 557 00:27:11,480 --> 00:27:14,560 >> וכך אנחנו צריכים להגדיר פונקציה שיהיה להעיף את הכרטיס, 558 00:27:14,560 --> 00:27:17,930 כדי שנכתוב תקין ש כאן, להעיף פונקציה. 559 00:27:17,930 --> 00:27:20,850 560 00:27:20,850 --> 00:27:23,680 ואז מה אתה חושב להעיף תעשה? 561 00:27:23,680 --> 00:27:27,180 שוב זה מקבל נקרא כאשר אנו לחצו על לחצן להעיף. 562 00:27:27,180 --> 00:27:29,406 מה צריך לעשות להעיף הפונקציה? 563 00:27:29,406 --> 00:27:34,136 >> קהל: שינוי this.state.front מאמיתי לכוזב, כוזב לאמיתי. 564 00:27:34,136 --> 00:27:38,420 >> ניל מהטה: כן, אז קח את כל מה ש this.front הוא-- המדינה הקדמית. 565 00:27:38,420 --> 00:27:40,930 קח את המדינה הקדמית, אם זה נכון, לעשות את זה שקר. 566 00:27:40,930 --> 00:27:42,530 אם זה שקר, לעשות את זה נכון, נכון? 567 00:27:42,530 --> 00:27:45,330 אז בואו ננסה את זה. 568 00:27:45,330 --> 00:27:48,240 >> אתה לא יכול לשנות את המצב רק על ידי עושה this.state. 569 00:27:48,240 --> 00:27:50,380 אתה לא יכול לעשות את זה. 570 00:27:50,380 --> 00:27:52,030 אתה לא יכול לעשות את זה. 571 00:27:52,030 --> 00:27:55,810 אתה צריך להשתמש בפונקציה נקרא this.setState. 572 00:27:55,810 --> 00:28:03,230 >> אז אתה יכול לומר this.setState קדמי המעי הגס שבו זה, שוב, הקריאה 573 00:28:03,230 --> 00:28:04,330 נקודה אומרת את ההפך. 574 00:28:04,330 --> 00:28:07,420 אני מניח שאם זה. state.front נכון, זה יהיה להפוך את השקר. 575 00:28:07,420 --> 00:28:09,170 אז אנחנו להגדיר את המדינה מאמיתי לכוזב. 576 00:28:09,170 --> 00:28:11,430 אם זה שקר, אנחנו להגדיר אותו כוזב לאמיתי. 577 00:28:11,430 --> 00:28:17,210 >> רק שמתי לב שהצבנו ולקבל מעט אחרת, ואז בואו ננסה את זה. 578 00:28:17,210 --> 00:28:18,675 בינג Bada, להסתכל על זה. 579 00:28:18,675 --> 00:28:21,810 הכפתור להעיף יהיה עכשיו לעבור קדימה ואחורה מדינה. 580 00:28:21,810 --> 00:28:24,990 >> ואז הנה איפה אתה רואה קצת מהקסם של להגיב. 581 00:28:24,990 --> 00:28:28,420 כמו שאף פעם לא אמרו לו את זה לעבד מחדש. 582 00:28:28,420 --> 00:28:30,910 אנחנו אף פעם לא אמרו לו שום דבר מחדש. 583 00:28:30,910 --> 00:28:32,630 אם אתה עושה את זה ללא להגיב, שהיית 584 00:28:32,630 --> 00:28:34,588 יש צריכה-- אוהב כש הכפתור להעיף לוחץ, 585 00:28:34,588 --> 00:28:37,290 היית צריכה לספר את זה ל ידני לעבד מחדש, נכון? 586 00:28:37,290 --> 00:28:43,050 >> מגיב ממש מגניב שבאם אתה נותן לו מדינה ומאפיינים מסוימים, 587 00:28:43,050 --> 00:28:45,760 זה תמיד יעבד את אותו הדבר בדיוק. 588 00:28:45,760 --> 00:28:48,690 ולכן כאשר אנו אי פעם לשנות המדינה והנכסים, 589 00:28:48,690 --> 00:28:50,819 מגיב רק מחדש הופך את כל העניין. 590 00:28:50,819 --> 00:28:52,860 הוא יודע שיש התכתבות אחד-על-אחד 591 00:28:52,860 --> 00:28:57,270 בין המדינה והפרמטר ו- HTML. 592 00:28:57,270 --> 00:29:00,110 אז או של אלה בכל פעם ש שינויים על ידי דרך מדינת סט, 593 00:29:00,110 --> 00:29:03,750 זה יהיה לשנות את האופן ש תשלום הוא מחדש שניתנו. 594 00:29:03,750 --> 00:29:06,650 וכך בעצם מגיב כמו מחכה לך לשנות. 595 00:29:06,650 --> 00:29:09,870 >> בכל פעם שהוא משנה משהו, זה יהיה לעבד מחדש את הדף כולו. 596 00:29:09,870 --> 00:29:12,480 ואם זה נשמע לא יעיל, זה בגלל שזה יהיה, 597 00:29:12,480 --> 00:29:15,050 אבל להגיב משתמש דבר נקרא DOM צל. 598 00:29:15,050 --> 00:29:19,950 במקום להסיק את הדף ישירות, זה שומר על עץ HTML הווירטואלי בזיכרון. 599 00:29:19,950 --> 00:29:23,620 >> אתה יודע, HTML הוא כמו עץ, כמו מבנה נתונים היררכי. 600 00:29:23,620 --> 00:29:28,990 זה שומר על עץ מזויף בזיכרון, ובכל פעם שתעדכן את הדף, 601 00:29:28,990 --> 00:29:31,940 זה יהיה לצייר מזויף אחר עץ, וזה יהיה לחשב 602 00:29:31,940 --> 00:29:35,120 מה לשנות את זה צריך לעשות דף לעשות שני העצים שווים. 603 00:29:35,120 --> 00:29:38,540 אז בעצם, זה כמעט מחדש הופך הרבה. 604 00:29:38,540 --> 00:29:41,540 ואז זה רק אוהב שינויים הדף בtweaks הקטן בהתאם לצורך, 605 00:29:41,540 --> 00:29:44,240 כך שזה מאוד, מאוד, מאוד יעיל. 606 00:29:44,240 --> 00:29:46,970 >> אז בעצם מגיבים יהיה בכל פעם שאתה משנה משהו, 607 00:29:46,970 --> 00:29:49,010 זה יהיה לעבד מחדש את הדף כמעט. 608 00:29:49,010 --> 00:29:52,830 זה יהיה להבין מה אני צריך לעשות כדי לשנות כדי להפוך את הדף האמיתי משקף 609 00:29:52,830 --> 00:29:55,602 הדף הווירטואלי, וזה יעשה את זה. 610 00:29:55,602 --> 00:29:56,560 זה DOM הווירטואלי. 611 00:29:56,560 --> 00:29:59,350 זה אחד הגדול תכונות של להגיב. 612 00:29:59,350 --> 00:30:00,880 >> האם זה הגיוני? 613 00:30:00,880 --> 00:30:01,540 יש שאלות? 614 00:30:01,540 --> 00:30:02,040 כֵּן? 615 00:30:02,040 --> 00:30:05,568 616 00:30:05,568 --> 00:30:08,969 >> קהל: איך עושה להשוות עדיין לMVC 617 00:30:08,969 --> 00:30:10,760 שדיברנו על לפני משאבים כמו. 618 00:30:10,760 --> 00:30:13,527 >> ניל מהטה: כן, השאלה הוא איך זה בהשוואה לMVC? 619 00:30:13,527 --> 00:30:14,610 אתה שאלת על משאבים. 620 00:30:14,610 --> 00:30:16,445 ובכן, בואו נדבר על איך זה עובד. 621 00:30:16,445 --> 00:30:18,190 >> בMVC, היית לעדכן את המודל. 622 00:30:18,190 --> 00:30:20,560 במקרה זה יהיה לנו מודל כרטיס. 623 00:30:20,560 --> 00:30:24,540 התצוגה הייתה כפתור שני, והשליטה 624 00:30:24,540 --> 00:30:26,310 תהיה הפונקציה להעיף. 625 00:30:26,310 --> 00:30:28,450 אז הייתי אומרת לי התצוגה בקר כדי להעיף להעיף. 626 00:30:28,450 --> 00:30:30,370 הרצאות היינו אומרות לי מודל לשינוי, נכון? 627 00:30:30,370 --> 00:30:33,915 >> ולכן כאשר אתה עושה MVC, להקשיב למודל לשינוי, 628 00:30:33,915 --> 00:30:37,150 ואתה לעבד מחדש את הנוף בהתאם. 629 00:30:37,150 --> 00:30:39,210 או שאתה פשוט חייב לאהוב יש לי בקר. 630 00:30:39,210 --> 00:30:42,418 חכה למודל לשינוי, ולאחר מכן לבחור חלק מכמו דבר 631 00:30:42,418 --> 00:30:44,032 לשנות. 632 00:30:44,032 --> 00:30:45,740 כאן יש לנו דבר אחד, אבל ביישום גדול, 633 00:30:45,740 --> 00:30:48,510 אתה צריך לאהוב את זוכר מה השינוי בכל מקום, 634 00:30:48,510 --> 00:30:50,290 אז זה קצת מעצבן. 635 00:30:50,290 --> 00:30:53,670 וכך להגיב הוא נחמד כי יש לו דום צל. 636 00:30:53,670 --> 00:30:56,040 זה יכול להרשות לעצמו רק לשכתב את הדבר כולו. 637 00:30:56,040 --> 00:30:58,680 אתה לא צריך באופן סלקטיבי כמו לנחש מה לעדכן. 638 00:30:58,680 --> 00:31:02,186 >> בפייסבוק, אם תרצו מקבל הודעה חדשה, בMVC, 639 00:31:02,186 --> 00:31:04,060 היית צריך לזכור, אישור, לשנות את הדברים 640 00:31:04,060 --> 00:31:06,260 בחלק העליון של דף, סמל ההודעה. 641 00:31:06,260 --> 00:31:08,290 גם פופ חלון חדש בתחתית. 642 00:31:08,290 --> 00:31:10,070 גם לעשות דבר חדש בחלון ש. 643 00:31:10,070 --> 00:31:11,060 גם להשמיע צליל. 644 00:31:11,060 --> 00:31:13,150 >> זה הרבה דברים יוצא באותו הזמן. 645 00:31:13,150 --> 00:31:15,320 ולכן אם אין לך יש לי Dom צל, שהיית 646 00:31:15,320 --> 00:31:18,740 צריך לעשות את זה באופן ידני כי אתה לא יכול להיפטר מכל הדף. 647 00:31:18,740 --> 00:31:21,430 אתה לא יכול להרשות לעצמו, אז יש לך לשנות כל דבר באופן ידני, 648 00:31:21,430 --> 00:31:23,990 וזה באמת מעצבן בMVC. 649 00:31:23,990 --> 00:31:27,640 >> אז כדי להיות חסכן, הם באופן סלקטיבי 650 00:31:27,640 --> 00:31:30,750 לעדכן את הדף, שהוא יעיל, אלא גם מעצבנים. 651 00:31:30,750 --> 00:31:34,002 בלהגיב, בגלל הצל Dom, אתה מקבל שני הדברים בחינם. 652 00:31:34,002 --> 00:31:35,710 זה יעיל, כי של Dom הצל. 653 00:31:35,710 --> 00:31:37,210 צוואר הבקבוק מעדכן את הדף. 654 00:31:37,210 --> 00:31:40,292 זה לא עושה המניפולציה העץ. 655 00:31:40,292 --> 00:31:41,250 אתה מקבל את היעילות. 656 00:31:41,250 --> 00:31:45,420 אתה גם מקבל את קלות שימוש, כי אם אתה רק לשכתב את הדף כולו, 657 00:31:45,420 --> 00:31:48,970 אבל אתה פשוט יודע, בסדר, הדברים הולך להיות בדף איפשהו. 658 00:31:48,970 --> 00:31:51,180 זה יכול להיות במקום אחר, אבל זה הולך להיות בדף, נכון? 659 00:31:51,180 --> 00:31:52,860 אז אתה פשוט מחדש שניתנו כל הדבר כמעט, 660 00:31:52,860 --> 00:31:55,540 ואתה עלול להפוך את בני זוג שינויים בדף עצמו. 661 00:31:55,540 --> 00:31:57,850 >> אז, שוב, בMVC היה צריך לבחור 662 00:31:57,850 --> 00:32:01,840 בין קלות שימוש ויעילות, ולהגיב, אתה מקבל את שניהם. 663 00:32:01,840 --> 00:32:04,020 אז זה טוב יותר. 664 00:32:04,020 --> 00:32:05,220 הגיוני? 665 00:32:05,220 --> 00:32:06,676 מוּצָק. 666 00:32:06,676 --> 00:32:12,080 >> אוקיי, אז בואו לראות בואו נדבר קצת על שלב 4, 667 00:32:12,080 --> 00:32:14,740 איך אנחנו יכולים להטביע רכיבים. 668 00:32:14,740 --> 00:32:16,260 אז יש לנו את זה עכשיו. 669 00:32:16,260 --> 00:32:19,420 יש לנו הכפתור הקטן מגניב שלנו. 670 00:32:19,420 --> 00:32:23,157 אנחנו יכולים להפוך אותו בחזרה ו הלאה, וזה כל מה שהיא עושה. 671 00:32:23,157 --> 00:32:24,990 נניח שאנחנו רוצים יש מרכיב נוסף. 672 00:32:24,990 --> 00:32:28,730 בואו נגיד שצריכה האפליקציה flashcard מכיל רשימה של כל הכרטיסים 673 00:32:28,730 --> 00:32:31,520 שיש לך, אז זה אומר שאנחנו צריך רכיב אחר. 674 00:32:31,520 --> 00:32:32,970 טוב, אולי קורא לזה תצוגת רשימה. 675 00:32:32,970 --> 00:32:36,200 בואו לעשות תצוגת רשימה ש מתקיים לצד CardView, 676 00:32:36,200 --> 00:32:39,680 ותצוגת רשימה זו וCardView יאהב את העבודה ביחד. 677 00:32:39,680 --> 00:32:43,190 ואתה יכול לשלב אותם כדי להפוך את האפליקציה שלנו עבורך. 678 00:32:43,190 --> 00:32:45,160 >> אז קודם כל, בואו נעשה עוד כמה כרטיסים תקין. 679 00:32:45,160 --> 00:32:46,370 בואו נגיד, מה כרטיסים? 680 00:32:46,370 --> 00:32:49,619 681 00:32:49,619 --> 00:32:51,910 ורק אז אין לי ל שעמם אותך עם הקלדה בזה, 682 00:32:51,910 --> 00:32:53,410 אני רק הולך להעתיק אותו מכאן. 683 00:32:53,410 --> 00:33:01,664 684 00:33:01,664 --> 00:33:03,580 ואז אני הולך ללא נותן לו רק כרטיס אחד. 685 00:33:03,580 --> 00:33:06,910 אני הולך לתת לו מערך של כרטיסים. 686 00:33:06,910 --> 00:33:10,240 אז קודם כל היישומים הולך לשבור לעת עתה. 687 00:33:10,240 --> 00:33:14,717 בסדר, אז אנחנו הולכים לעשות זה מסוגל להתמודד עם מספר רב של כרטיסים. 688 00:33:14,717 --> 00:33:17,800 אז קודם כל, אנחנו הולכים לתת לו, לא רק כרטיס אחד, אבל מערך של כרטיסים, 689 00:33:17,800 --> 00:33:18,700 כמו רשימה של כרטיסים. 690 00:33:18,700 --> 00:33:20,980 ובמקרה הזה, יש לנו שלושה מהם. 691 00:33:20,980 --> 00:33:27,280 >> בסדר, כל כך כל כך אפליקציה היא הולך לקבל כרטיסי רשימה, 692 00:33:27,280 --> 00:33:29,870 וזה הולך להחליט ש אחד להראות לCardView. 693 00:33:29,870 --> 00:33:33,740 CardView יכול רק להבהיר כרטיס אחד, אבל האפליקציה 694 00:33:33,740 --> 00:33:37,610 מקבל רשימה של כל הכרטיסים, נכון? 695 00:33:37,610 --> 00:33:40,820 >> לכן, כאשר אתה להבין אחד כרטיס לתת לCardView, 696 00:33:40,820 --> 00:33:44,660 איך היית מניח שאולי תוכל כדי לקבל החלטה על איזה כרטיס 697 00:33:44,660 --> 00:33:47,064 להציג? 698 00:33:47,064 --> 00:33:49,980 כדי לתת לכם רמז, זה באופן זמני אתה תהיה צפייה מסוימת כרטיס. 699 00:33:49,980 --> 00:33:53,260 אם אתה לרענן את הדף, תוכל רק לחזור לכרטיס הראשון. 700 00:33:53,260 --> 00:33:55,464 זה בסדר כי זה זמני. 701 00:33:55,464 --> 00:33:56,630 מה טכניקה שאנו עשויים להשתמש? 702 00:33:56,630 --> 00:34:02,534 703 00:34:02,534 --> 00:34:08,760 >> קהל: אתה יכול לעשות משתנה כל כך פשוט כמו שהיה לך לפני. 704 00:34:08,760 --> 00:34:11,989 האם זה נכון, אתה יכול יש לי נוכחית כרטיס שווה 1? 705 00:34:11,989 --> 00:34:14,150 >> ניל מהטה: כן, כדי ש רוצה להיות מדינה, נכון? 706 00:34:14,150 --> 00:34:16,080 היית להשתמש במדינה רכיב להבין 707 00:34:16,080 --> 00:34:17,288 איזה כרטיס לעשות אנחנו רוצים להגיע. 708 00:34:17,288 --> 00:34:19,290 כמו שיש לנו רשימה של כל הכרטיסים, אנחנו 709 00:34:19,290 --> 00:34:21,630 להשתמש מדינה כדי להבין אחד ראשוני הכרטיס, 710 00:34:21,630 --> 00:34:23,710 שני כרטיס, כרטיס שלישי, וכן הלאה. 711 00:34:23,710 --> 00:34:28,760 >> אז אפליקציה כך אפליקציה תקבל יש פונקצית getInitialState, 712 00:34:28,760 --> 00:34:35,020 תמורת פונקצית getInitialState. 713 00:34:35,020 --> 00:34:39,929 ואנחנו רק נגיד activeIndex 0. 714 00:34:39,929 --> 00:34:42,889 אז עכשיו יש לנו המדינה משל האפליקציה שלה. 715 00:34:42,889 --> 00:34:47,179 >> ואז עכשיו על לדקלם, כדי להבין כרטיס, בואו פשוט ללכת למערך 716 00:34:47,179 --> 00:34:49,969 ולתפוס את הדבר במדד זה. 717 00:34:49,969 --> 00:34:53,580 this.props.cards בחר כרטיס שווה this.state.activeIndex. 718 00:34:53,580 --> 00:34:56,469 719 00:34:56,469 --> 00:35:00,162 אז כפי שאתם רואים כאן, האביזרים ו המדינה באמת עובדת יחד. 720 00:35:00,162 --> 00:35:08,990 אז עכשיו שיש לנו activeCard, אנחנו קוראים לזה activeCard, 721 00:35:08,990 --> 00:35:10,470 ובואו נראה אם ​​זה עובד. 722 00:35:10,470 --> 00:35:20,320 723 00:35:20,320 --> 00:35:20,820 [לא ברור] 724 00:35:20,820 --> 00:35:41,504 725 00:35:41,504 --> 00:35:44,900 >> הו, זה היה שגיאת טקסט. 726 00:35:44,900 --> 00:35:45,400 אה. 727 00:35:45,400 --> 00:35:51,420 728 00:35:51,420 --> 00:35:54,840 >> מגניב, כן, אז עכשיו שחזרנו לאיפה שהיינו לפני, נכון? 729 00:35:54,840 --> 00:35:57,100 תכנית ישנה אותו פרט עכשיו אנחנו יכולים לתמוך 730 00:35:57,100 --> 00:35:59,390 רשימה של כרטיסים, לא רק כרטיס אחד. 731 00:35:59,390 --> 00:36:04,130 ועכשיו, שוב, אם נשנינו את activeIndex, אנחנו יכולים ללכת 0-1, 732 00:36:04,130 --> 00:36:07,330 ועכשיו ששני כרטיס, ואז הלכנו ל0. 733 00:36:07,330 --> 00:36:10,390 אז הנה חדש משופר, גרסה שלנו. 734 00:36:10,390 --> 00:36:16,000 >> אוקיי, אז עכשיו בואו תצוגת רשימה ש מציג את כל הקלפים בתכנית שלך, 735 00:36:16,000 --> 00:36:19,980 כך אנחנו נעשה חדשים רכיב הנקרא ListView. 736 00:36:19,980 --> 00:36:22,155 בואו ListView שווה react.createClass. 737 00:36:22,155 --> 00:36:32,890 738 00:36:32,890 --> 00:36:38,800 אז אנחנו רוצים להבהיר לא מסודרות רשימה עם פריט ברשימה לכל כרטיס. 739 00:36:38,800 --> 00:36:41,490 ולכן יש לנו חבורה של כרטיסים. 740 00:36:41,490 --> 00:36:44,990 אנחנו רוצים פריט ברשימה אחת לכל כרטיס, נכון? 741 00:36:44,990 --> 00:36:47,490 אנחנו יכולים לעשות עבור לולאה או משהו לעשות פריט ברשימה חדשה. 742 00:36:47,490 --> 00:36:50,522 אבל הדרך לעשות את זה ב להגיב, השתמש דבר שנקרא המפה. 743 00:36:50,522 --> 00:36:57,150 מפה היא כלי או פונקציה להשתמש כי עבור כל פריט, פועל כמה פונקציה, 744 00:36:57,150 --> 00:36:59,510 לוקח ערך החזרה, ו נותן לך את זה בחזרה. 745 00:36:59,510 --> 00:37:06,310 >> אז כדוגמא, יש לנו את המערך 1, 2, function-- 3.map וזה 746 00:37:06,310 --> 00:37:12,120 הוא קיצור ל function-- x חץ x פעמים x. 747 00:37:12,120 --> 00:37:16,110 זה אומר, לכל מספר ב 1, 2, 3, לקחת את זה. 748 00:37:16,110 --> 00:37:17,800 כיכר זה, ולתת לו בחזרה. 749 00:37:17,800 --> 00:37:22,090 אז מה אתה חושב 1, 2, X 3.map הולך פעמים x 750 00:37:22,090 --> 00:37:25,480 x מחזיר לך ניתנה פונקציה זו היא 751 00:37:25,480 --> 00:37:27,680 לרוץ על כל אלמנט של מערך זה. 752 00:37:27,680 --> 00:37:30,837 753 00:37:30,837 --> 00:37:32,190 >> קהל: 1, 4 9? 754 00:37:32,190 --> 00:37:35,709 >> ניל מהטה: כן, 1, 4, 9 בגלל שאתה עושה 1 פעמים 1. 755 00:37:35,709 --> 00:37:36,500 זה נותן לך אחד. 756 00:37:36,500 --> 00:37:37,690 זה האלמנט הראשון. 757 00:37:37,690 --> 00:37:38,530 >> 2 פעמים 2 היא 4. 758 00:37:38,530 --> 00:37:39,570 זה מרכיב שני. 759 00:37:39,570 --> 00:37:40,310 3 פעמים 3 היא 9. 760 00:37:40,310 --> 00:37:41,540 זה מרכיב שלישי. 761 00:37:41,540 --> 00:37:42,640 הגיוני? 762 00:37:42,640 --> 00:37:45,015 אז המפה יש טכניקתך להשתמש במתכנתים פונקציונליים, 763 00:37:45,015 --> 00:37:48,090 הסגנון החדש של תכנות לעשות משהו 764 00:37:48,090 --> 00:37:50,500 לכל רכיב ברשימה שלך. 765 00:37:50,500 --> 00:37:51,970 וכך זה נשמע מוכר. 766 00:37:51,970 --> 00:37:53,370 יש לנו רשימה של כרטיסים. 767 00:37:53,370 --> 00:37:56,860 אנחנו רוצים לקבל פריט ברשימה לכל אחד, אז אנחנו פשוט להשתמש במפה כאן. 768 00:37:56,860 --> 00:38:00,250 אנחנו נגיד, בואו שווים רשימה this.props, כרטיסים, המפה. 769 00:38:00,250 --> 00:38:10,580 770 00:38:10,580 --> 00:38:15,070 >> וכך קיבל כרטיס, אנחנו הולך ליצור פריט רשימה 771 00:38:15,070 --> 00:38:17,580 עם צד התוכן של הכרטיס שלו. 772 00:38:17,580 --> 00:38:20,660 בואו נגיד שאנחנו רוצים לתת את כרטיסי שאלה כל כך card.question. 773 00:38:20,660 --> 00:38:24,990 774 00:38:24,990 --> 00:38:30,649 אז רשימה זו מכילה מערך של LI של או פריטים רשימה 775 00:38:30,649 --> 00:38:32,440 שבו יש רשימה אחת פריט עבור כל כרטיס, 776 00:38:32,440 --> 00:38:35,150 ושמכיל את שאלת כרטיסים. 777 00:38:35,150 --> 00:38:37,640 הגיוני? 778 00:38:37,640 --> 00:38:39,450 >> מגניב, אז עכשיו בואו למעשה להדפיס את זה. 779 00:38:39,450 --> 00:38:46,521 אז נחזור ul. 780 00:38:46,521 --> 00:38:49,020 בתוך שהרשימה לא מסודרת, אנחנו פשוט נישאר כל הרשימה 781 00:38:49,020 --> 00:38:49,890 שהם נתנו לנו. 782 00:38:49,890 --> 00:38:52,851 783 00:38:52,851 --> 00:38:53,350 מגניב. 784 00:38:53,350 --> 00:38:56,060 >> בסדר, אז עכשיו זה צפה ברשימת עבודות פשוט למצוא. 785 00:38:56,060 --> 00:38:59,842 כל שאלות על הנוף לרשימה? 786 00:38:59,842 --> 00:39:01,270 יש לך חבורה של כרטיסים. 787 00:39:01,270 --> 00:39:02,800 אתה גורם פריט ברשימה לכל כרטיס. 788 00:39:02,800 --> 00:39:05,466 ואתה שם אותם בתוך לא מסודרת רשימה, ואתה נותן לו בחזרה. 789 00:39:05,466 --> 00:39:09,410 אז עכשיו בואו לפעול לכך שאנו להטביע בתוך זה של האפליקציה שלנו, 790 00:39:09,410 --> 00:39:14,310 כדי שנוכל לעשות את זה, תצוגת רשימה. 791 00:39:14,310 --> 00:39:17,070 מה טיעון אנחנו עוברים לתצוגת רשימה? 792 00:39:17,070 --> 00:39:18,320 מה תכונות שאנחנו נותנים לו? 793 00:39:18,320 --> 00:39:25,111 794 00:39:25,111 --> 00:39:26,860 זכור, אם אתה נותן לי זה חבורה של כרטיסים, 795 00:39:26,860 --> 00:39:29,590 זה יהיה להפוך את הרשימה להציג עבור כרטיסים אלה. 796 00:39:29,590 --> 00:39:32,267 אז מה היה לנו לעבור כאן כטיעון? 797 00:39:32,267 --> 00:39:33,350 קהל: רשימה של כרטיסים? 798 00:39:33,350 --> 00:39:37,130 ניל מהטה: כן, אז כרטיסים שווה this.props.cards, נכון? 799 00:39:37,130 --> 00:39:39,850 800 00:39:39,850 --> 00:39:44,370 וכך הבעיה היחידה הוא שאתה רק יכול 801 00:39:44,370 --> 00:39:48,600 הפך רכיב ברמה עליון אחד בלדקלם, כך שיש לך לעטוף אותו בdiv. 802 00:39:48,600 --> 00:39:49,100 זה מוזר. 803 00:39:49,100 --> 00:39:56,190 804 00:39:56,190 --> 00:39:57,530 אז בואו לראות אם זה. 805 00:39:57,530 --> 00:40:09,790 806 00:40:09,790 --> 00:40:10,560 האם זה עובד? 807 00:40:10,560 --> 00:40:29,774 808 00:40:29,774 --> 00:40:31,030 >> כן, יש לך ללכת. 809 00:40:31,030 --> 00:40:33,700 אז עכשיו יש לנו רשימה כרטיסים בתחתית, 810 00:40:33,700 --> 00:40:36,180 ואז יש לנו שלנו CardView עצמו על גבי, 811 00:40:36,180 --> 00:40:40,486 ושיהיה להעיף בין שני הצדדים של הכרטיס. 812 00:40:40,486 --> 00:40:42,610 עכשיו האם זה הגיוני איך עשיתי את זה? 813 00:40:42,610 --> 00:40:45,165 814 00:40:45,165 --> 00:40:46,790 כן, אז שוב, יש לנו שני רכיבים. 815 00:40:46,790 --> 00:40:49,666 הדפסי הרכיב הראשונים מתוך כל כרטיס ברשימה. 816 00:40:49,666 --> 00:40:50,540 זה תצוגת הרשימה. 817 00:40:50,540 --> 00:40:54,770 והמרכיב השני מדפיס רק כרטיס ש. 818 00:40:54,770 --> 00:40:58,840 אם אתה נותן לו כרטיס מסוים, זה ימצא להדפיס את המידע על כרטיס ש 819 00:40:58,840 --> 00:41:01,870 ולתת לך להעיף קדימה ואחורה. 820 00:41:01,870 --> 00:41:05,850 >> אז אם אנחנו רוצים, אנחנו יכולים לנסות ולדבר על הוספה כמה תכונות חדשות לזה. 821 00:41:05,850 --> 00:41:09,482 אחרת אנחנו יכולים לדבר קצת יותר על של המהירות של כור, 822 00:41:09,482 --> 00:41:11,190 או שאנחנו יכולים לענות שאלות שאולי יש לך 823 00:41:11,190 --> 00:41:15,050 בגלל כל אלה הם חלקי הליבה של להגיב כי אני רוצה לדבר עליו. 824 00:41:15,050 --> 00:41:16,540 אנחנו יכולים ללכת קדימה. 825 00:41:16,540 --> 00:41:17,590 אנו יכולים לענות על שאלות. 826 00:41:17,590 --> 00:41:18,560 מה שאתה רוצה. 827 00:41:18,560 --> 00:41:21,694 828 00:41:21,694 --> 00:41:24,205 >> קהל: האם אתה יכול להשתמש JSX בJavaScript הנורמלי? 829 00:41:24,205 --> 00:41:27,150 או משהו ש הגיע עם [לא ברור]? 830 00:41:27,150 --> 00:41:30,760 >> ניל מהטה: השאלה היא פח אתה משתמש JSX עם JavaScript הנורמלי? 831 00:41:30,760 --> 00:41:32,620 התשובה היא כן. 832 00:41:32,620 --> 00:41:41,070 JSX הוא רק דרך שלו לוקחת JavaScript שיש HTML בתוכו, 833 00:41:41,070 --> 00:41:44,215 וזה הידור לJavaScript ש אין HTML בתוכו. 834 00:41:44,215 --> 00:41:47,880 אז שם לב לראות-- כך תבחין כאן. 835 00:41:47,880 --> 00:41:50,820 זה נראה כאילו יש לך כמו div ויש לך דברים בתוכו. 836 00:41:50,820 --> 00:41:54,970 >> כי הידור לJavaScript ש כמו מייצר את אותו הדבר. 837 00:41:54,970 --> 00:41:59,590 אני מניח מה שאני אומר הוא ש JSX הוא רק תחבירי, כמו זה 838 00:41:59,590 --> 00:42:03,530 עיבוד מוקדם לJavaScript הרבה כמו PHP הוא עיבוד מוקדם ל- HTML. 839 00:42:03,530 --> 00:42:05,490 JSC הוא preprocessor לJavaScript המאפשר לי 840 00:42:05,490 --> 00:42:12,970 אתה שם HTML בתוך JavaScript שלך. 841 00:42:12,970 --> 00:42:16,425 ולכן אם יש לך את השנאי תקין וזה דבר שנקרא [לא ברור], 842 00:42:16,425 --> 00:42:17,300 שיהפוך. 843 00:42:17,300 --> 00:42:19,360 בעיבוד המוקדם תקין, זה ייתן לך לעשות את זה. 844 00:42:19,360 --> 00:42:20,235 >> קהל: [לא ברור] 845 00:42:20,235 --> 00:42:23,026 ניל מהטה: בדרך כלל אתה לא צריך לשים HTML בתוך JavaScript 846 00:42:23,026 --> 00:42:24,110 אלא אם כן העשייה שלך להגיב. 847 00:42:24,110 --> 00:42:27,146 אבל אתה יכול לעשות את זה בכל מקרה. 848 00:42:27,146 --> 00:42:27,645 כֵּן? 849 00:42:27,645 --> 00:42:29,353 >> קהל: אני חושב שאתה תאר להגיב 850 00:42:29,353 --> 00:42:31,970 כשפת תכנות פונקציונלית. 851 00:42:31,970 --> 00:42:35,646 אנחנו כבר לומדים C בCS50. 852 00:42:35,646 --> 00:42:38,032 גם הוא C שפה פונקציונלית? 853 00:42:38,032 --> 00:42:39,990 ניל מהטה: אז השאלה הוא על תפקודי 854 00:42:39,990 --> 00:42:43,010 לעומת דבר אחר שנקרא תכנות הכרחי או פרוצדורלי. 855 00:42:43,010 --> 00:42:44,820 יש שני סוגים של תוכניות פופולריות. 856 00:42:44,820 --> 00:42:48,550 אחד נקרא פרוצדורליים, ש הוא על כל כמו פקודות עושים, 857 00:42:48,550 --> 00:42:51,510 ואחד הוא פונקציונלי, שהיא כל על כך פונקציות ושיש 858 00:42:51,510 --> 00:42:52,930 קלט ופלט של אלה. 859 00:42:52,930 --> 00:42:55,930 מגיב היא פרדיגמה פונקציונלית. 860 00:42:55,930 --> 00:42:58,010 C הוא פרדיגמה מאוד פרוצדורליים. 861 00:42:58,010 --> 00:43:02,360 >> וכדוגמה, C למשל, אתה לא עושה את הדרך הצהרתית זו 862 00:43:02,360 --> 00:43:04,390 של מה שהופך את התכנית, נכון? 863 00:43:04,390 --> 00:43:06,826 יש לך לומר, להדפיס את זה. 864 00:43:06,826 --> 00:43:07,950 לשנות את מבנה נתונים זה. 865 00:43:07,950 --> 00:43:08,530 הדפסה זו. 866 00:43:08,530 --> 00:43:10,160 זה הכול העניין של פקודות. 867 00:43:10,160 --> 00:43:12,640 >> בלהגיב, יש לא פקודות שרבות. 868 00:43:12,640 --> 00:43:15,145 זה הכול העניין של שיש רכיבים לך להרכיב. 869 00:43:15,145 --> 00:43:16,300 הם כמו פונקציות. 870 00:43:16,300 --> 00:43:26,360 יש לך כמו פונקציה נקרא CardView, 871 00:43:26,360 --> 00:43:28,680 שהיא פונקציה שיש קלט, פלט, 872 00:43:28,680 --> 00:43:30,660 וכך להגיב הוא כל על פילוסופיה זו 873 00:43:30,660 --> 00:43:32,700 שלנו של having-- יש לך נתונים. 874 00:43:32,700 --> 00:43:34,910 אתה עובר את זה דרך זה אלגוריתם, וזה יהיה 875 00:43:34,910 --> 00:43:36,800 פלט HTML ש רק הדפסתי את הדף, 876 00:43:36,800 --> 00:43:39,180 ולכן אתה צריך לבנות אותו חתיכה אחרי חתיכה. 877 00:43:39,180 --> 00:43:42,800 >> אז לצייר מטאפורה למה ש שאמרתי קודם, אתה יודע איך 878 00:43:42,800 --> 00:43:47,050 בפייסבוק, אם אתה מקבל הודעה, ואתה בוחר מה חלקים לעדכן, 879 00:43:47,050 --> 00:43:47,882 זה פרוצדורליים. 880 00:43:47,882 --> 00:43:48,840 זה הכרחי, נכון? 881 00:43:48,840 --> 00:43:49,806 אישור, יש לי הודעה. 882 00:43:49,806 --> 00:43:50,930 בואו לשנות את החשבון שם. 883 00:43:50,930 --> 00:43:52,110 >> בואו נקפוץ חלון כאן. 884 00:43:52,110 --> 00:43:52,780 בואו לשנות את החשבון שם. 885 00:43:52,780 --> 00:43:53,700 בואו לצייר את זה כאן. 886 00:43:53,700 --> 00:43:55,220 זה גישה פרוצדורליים. 887 00:43:55,220 --> 00:44:00,240 >> זה מה דברים כמו זוויתי, שפר, עמוד שדר, מסגרות אחרות להשתמש. 888 00:44:00,240 --> 00:44:01,200 מגיב הוא פונקציונלי. 889 00:44:01,200 --> 00:44:03,324 זוהי דרך שונה מאוד לחשוב על דברים. 890 00:44:03,324 --> 00:44:07,950 זה לוקח את הרעיון הזה של בואו פונקציות או אלגוריתמים שיהיו לך 891 00:44:07,950 --> 00:44:08,800 נותן לו נתונים. 892 00:44:08,800 --> 00:44:11,820 זה יהיה לירוק את מה ש צריך להיות, והמחשב 893 00:44:11,820 --> 00:44:13,490 ידאג למשקל החוצה. 894 00:44:13,490 --> 00:44:15,890 אתה לא מטפל בזה בעצמך. 895 00:44:15,890 --> 00:44:18,470 האם זה הופך את קצת תחושה? 896 00:44:18,470 --> 00:44:18,970 כֵּן? 897 00:44:18,970 --> 00:44:24,180 >> קהל: בשפה פונקציונלית, כל מה שקורה בבת אחת? 898 00:44:24,180 --> 00:44:26,800 >> ניל מהטה: לא, דברים קורים בצו. 899 00:44:26,800 --> 00:44:29,320 כמו כאן יש עדיין להזמין, אבל זה לא 900 00:44:29,320 --> 00:44:32,390 לקרות כדי כמו לשבח, הפקודה, הפקודה. 901 00:44:32,390 --> 00:44:36,459 זה קורה בצו של פונקציה נותנת לך פלט. 902 00:44:36,459 --> 00:44:37,750 שים את זה לפונקציה אחרת. 903 00:44:37,750 --> 00:44:39,550 שים את זה לעוד פונקציה, פונקציה אחרת. 904 00:44:39,550 --> 00:44:41,470 >> אם אתה עושה CS51, תמצאו ללמוד תוכניות פונקציונליות 905 00:44:41,470 --> 00:44:42,886 מתוך קטן של היקף זה. 906 00:44:42,886 --> 00:44:45,090 אבל בעצם, מה שעושה מגיב מגניב הוא לא רק 907 00:44:45,090 --> 00:44:46,840 זרימת הנתונים בכיוון אחד וDom הווירטואלי, 908 00:44:46,840 --> 00:44:48,700 אבל גם הרעיון הזה של תכנות פונקציונלי. 909 00:44:48,700 --> 00:44:51,720 ותכנות פונקציונלי הוא קל מאוד להלחין ולבצע דברים מגניבים מ, 910 00:44:51,720 --> 00:44:53,844 וזה קל מאוד לחשוב על סיבה ועל. 911 00:44:53,844 --> 00:44:55,450 אז זה עוד תיקו טוב של להגיב. 912 00:44:55,450 --> 00:44:58,489 913 00:44:58,489 --> 00:44:59,280 עוד שאלות? 914 00:44:59,280 --> 00:45:02,650 915 00:45:02,650 --> 00:45:03,150 כֵּן? 916 00:45:03,150 --> 00:45:06,840 >> קהל: אום, למה אתה משתמש בואו בניגוד לvar? 917 00:45:06,840 --> 00:45:10,450 >> ניל מהטה: אז השאלה היא למה אתה משתמש בוא במקום var? 918 00:45:10,450 --> 00:45:13,220 זה דבר שנקרא ES6 או ECMAScript 6. 919 00:45:13,220 --> 00:45:15,820 זה את הגרסה החדשה של JavaScript. 920 00:45:15,820 --> 00:45:19,050 יש חבורה של סיבות טכניות, אבל בואו היא גרסה טובה יותר של var. 921 00:45:19,050 --> 00:45:20,724 >> זה איך אתה מצהיר משתנים. 922 00:45:20,724 --> 00:45:21,390 אתה יכול להשתמש בוא. 923 00:45:21,390 --> 00:45:22,140 אתה יכול להשתמש בvar. 924 00:45:22,140 --> 00:45:23,825 יש לתת לחבורה של טכני reasons-- אתה יכול להסתכל להם 925 00:45:23,825 --> 00:45:25,610 עד later-- למה זה טוב יותר. 926 00:45:25,610 --> 00:45:28,780 בעיקרון, יש כמה נחמד ES6 תחביר חדש, כמה תכונות חדשות 927 00:45:28,780 --> 00:45:30,720 בחלק העליון של JavaScript הישן. 928 00:45:30,720 --> 00:45:32,782 >> אז יש לי כמו חמש דקות. 929 00:45:32,782 --> 00:45:34,990 אני רק רציתי לדבר על עוד דבר אחד ממש מהר. 930 00:45:34,990 --> 00:45:36,450 אם היה לך שאלות, בואו לדבר על זה אחרי זה. 931 00:45:36,450 --> 00:45:38,366 אבל רק כדי שזה מקבל נתפס במצלמה, אני רק 932 00:45:38,366 --> 00:45:41,550 רוצה לדבר קצת על איך אתה להשתמש דווקא מגיב ביישומים שלך. 933 00:45:41,550 --> 00:45:47,220 934 00:45:47,220 --> 00:45:58,640 >> אם אתה הולך כאן, Facebook.GitHub.IO/react, 935 00:45:58,640 --> 00:46:03,320 זה בדף הבית ללהגיב, ו זה יראו לך איך אתה בעצם להשתמש 936 00:46:03,320 --> 00:46:05,320 מגיב בדפים שלך. 937 00:46:05,320 --> 00:46:08,845 בעיקרון, זה קצת מסובך מנסה להתקין להגיב. 938 00:46:08,845 --> 00:46:12,300 זה לא קל כמו שאתה פשוט לגרור ושחרר JavaScript שם. 939 00:46:12,300 --> 00:46:15,890 >> אתה צריך שתהיה לך שנאי הקים, אשר, כפי שעשה בעבר, 940 00:46:15,890 --> 00:46:18,120 להפוך JSX ל JavaScript הנורמלי. 941 00:46:18,120 --> 00:46:21,030 יש לך דבר שימצאו לקמפל אתה ES6 לקדמותו. 942 00:46:21,030 --> 00:46:24,720 JavaScript יש הרבה נע חלקים שאתה צריך לעשות, אז יש דבר 943 00:46:24,720 --> 00:46:27,200 נקרא Yeoman, Yeoman.io. 944 00:46:27,200 --> 00:46:31,110 וזה הוא כלי שורת הפקודה שימצא לעזור לך פיגומים אותך להגיב 945 00:46:31,110 --> 00:46:32,380 פרויקטים בקלות. 946 00:46:32,380 --> 00:46:38,660 >> אז אתה יכול לקרוא על זה מאוחר יותר, אבל יש כמה כלים 947 00:46:38,660 --> 00:46:40,160 שYeoman מציע. 948 00:46:40,160 --> 00:46:43,280 הם מאפשרים לך ליצור להגיב אפליקציה עם כל מה שנבנה ב. 949 00:46:43,280 --> 00:46:46,030 כמו שזה בנה ב, רכיבים שנבנו ב. 950 00:46:46,030 --> 00:46:47,880 תהיה לו השנאי שלך נבנה ב. 951 00:46:47,880 --> 00:46:50,699 יש להם הרבה של מגניב נבנו באופן אוטומטי דברים 952 00:46:50,699 --> 00:46:52,240 באמצעות הדברים האלה נקראים גנרטורים. 953 00:46:52,240 --> 00:46:54,620 >> אז קרא על זה, אם תרצה. 954 00:46:54,620 --> 00:46:59,110 פשוט ללכת על איכר, Y-E-O-M-A-N, ו אתה יכול למצוא גנרטורים כמו אלה. 955 00:46:59,110 --> 00:47:01,263 ועם גנרטורים כמו אלה, אתה רק רוצה אחד 956 00:47:01,263 --> 00:47:03,010 הוא שורת פקודת זוג פקודות. 957 00:47:03,010 --> 00:47:05,530 זה יהיה פיגומים החוצה כל להגיב אפליקציה בשבילך. 958 00:47:05,530 --> 00:47:10,470 זה יהיה לקבל את כל הצנרת במדריך, והעבודה שחורה עשתה בשבילך, 959 00:47:10,470 --> 00:47:13,010 וזה למה אתה פשוט להתמקד על רק כותב במגיב. 960 00:47:13,010 --> 00:47:16,739 >> אז בעצם בנייה מגיב אפליקציה היא טריוויאלי. 961 00:47:16,739 --> 00:47:19,530 זה קווית כולם ביחד, אבל יש כלים שיעשו את זה בשבילך. 962 00:47:19,530 --> 00:47:23,070 אז אם אתה רוצה לעשות להגיב אפליקציה, נסה לעשות את זה ככה. 963 00:47:23,070 --> 00:47:26,360 אם אתה רק רוצה להתנסות, אתה יכול לנסות להשתמש CodePen זה 964 00:47:26,360 --> 00:47:28,550 בגלל זה יש CodePen כל חיווט להגיב. 965 00:47:28,550 --> 00:47:30,240 אני כבר עשיתי את כל העבודה בשבילך. 966 00:47:30,240 --> 00:47:34,610 >> אז אם אתה רוצה לעשות כמו ייצור לשחרר להגיב אפליקציה, 967 00:47:34,610 --> 00:47:37,220 נסה אחד מהמחוללים אלה. 968 00:47:37,220 --> 00:47:40,240 אם אתה רק רוצה לשחק מסביב, זה לעתים קרובות שווה רק 969 00:47:40,240 --> 00:47:44,490 כמו לנסות לשחק סביב על CodePen כאן. 970 00:47:44,490 --> 00:47:45,470 נשמע טוב? 971 00:47:45,470 --> 00:47:45,970 מגניב. 972 00:47:45,970 --> 00:47:47,890 >> אז זה כל מה שיש לי. 973 00:47:47,890 --> 00:47:52,470 שוב, כל הקוד ודוגמאות הם הולך להיות באתר זה כאן. 974 00:47:52,470 --> 00:47:55,509 אז, שוב, אנחנו לא מדברים על הרבה תחביר של להגיב, 975 00:47:55,509 --> 00:47:57,550 אבל כדי למצוא את כל אלה פרטים תחביריים קטנים, 976 00:47:57,550 --> 00:48:00,320 זה כל הולך להיות זמין באתר זה כאן. 977 00:48:00,320 --> 00:48:02,660 >> אז הייתי ממליץ כמו לעשות את הצעד הראשון. 978 00:48:02,660 --> 00:48:06,277 הכניס אותו לתוך CodePen. 979 00:48:06,277 --> 00:48:08,110 נסה עובד על ביצוע אותו לשלב השני. 980 00:48:08,110 --> 00:48:11,310 יש שלב רביעי, ורק רואה בו אתה מקבל מזה. 981 00:48:11,310 --> 00:48:14,840 >> יותר שאלות, לבדוק כי דף או שלח לי. 982 00:48:14,840 --> 00:48:16,490 זה הדוא"ל שלי. 983 00:48:16,490 --> 00:48:19,885 אבל אני אשמח לעזור לך עם כל שאלות שאולי יש לך על להגיב. 984 00:48:19,885 --> 00:48:21,010 אז, כן, זה כל מה שיש לי. 985 00:48:21,010 --> 00:48:23,410 תודה לכולכם הרבה מאוד ל צפייה או למטפל. 986 00:48:23,410 --> 00:48:26,820 ואני אקח את כל שאלות אולי יש לך אחרי זה עכשיו. 987 00:48:26,820 --> 00:48:29,140 אז תודה לכולכם על צפייה. 988 00:48:29,140 --> 00:48:31,270