1
00:00:00,000 --> 00:00:02,910
>> [CHWARAE CERDDORIAETH]

2
00:00:02,910 --> 00:00:04,850

3
00:00:04,850 --> 00:00:07,275
>> Neel Mehta: Yma mae'n mynd.

4
00:00:07,275 --> 00:00:11,070
>> Wel, mae pawb, croeso i we
apps ar gyfer y dyfodol gyda React.

5
00:00:11,070 --> 00:00:11,870
Mae hyn yn CS50.

6
00:00:11,870 --> 00:00:12,930
Fy enw i yw Neel.

7
00:00:12,930 --> 00:00:17,689
Rwy'n TA am CS50 a sophomore
yng Ngholeg Harvard ac yn iawn, iawn

8
00:00:17,689 --> 00:00:18,730
datblygwr y we angerddol.

9
00:00:18,730 --> 00:00:20,730
Felly rwy'n gyffrous iawn i
yn siarad â chi heddiw,

10
00:00:20,730 --> 00:00:24,550
p'un a ydych yma neu yn y cartref
gwylio, tua React, sydd, unwaith eto

11
00:00:24,550 --> 00:00:27,270
fel y dywedais, dyfodol apps we.

12
00:00:27,270 --> 00:00:29,055
>> Felly React yn fframwaith y we.

13
00:00:29,055 --> 00:00:30,930
Ac fel dw i wedi bod yn dweud wrth
i rai pobl yma,

14
00:00:30,930 --> 00:00:33,400
fframwaith yn unig yw
set o offer y gallwch eu defnyddio

15
00:00:33,400 --> 00:00:35,770
i strwythuro ac adeiladu eich app we.

16
00:00:35,770 --> 00:00:39,010
A apps we, unwaith eto, gwefannau
sydd yn rhyngweithiol fel Facebook,

17
00:00:39,010 --> 00:00:42,330
Twitter.com, Instagram.com, beth bynnag.

18
00:00:42,330 --> 00:00:45,590
>> Felly Facebook yn fframwaith y we
a ddatblygwyd gan Facebook

19
00:00:45,590 --> 00:00:48,060
cwpl o flynyddoedd back-- React yw.

20
00:00:48,060 --> 00:00:50,830
Gan ei fod wedi cael ei ddefnyddio mewn
Facebook ar eu apps symudol

21
00:00:50,830 --> 00:00:52,460
ac mae'r app we, Instagram.

22
00:00:52,460 --> 00:00:56,350
Academi Khan yn un arall
mabwysiadu cynnar amlwg o React.

23
00:00:56,350 --> 00:00:58,630
>> Mae wedi bod yn wir yn mynd
hynod boblogaidd.

24
00:00:58,630 --> 00:01:03,420
Os ydych chi erioed wedi defnyddio pethau fel onglog neu
Asgwrn cefn, mae hyn yn yr un teulu,

25
00:01:03,420 --> 00:01:05,830
ond mae wedi ers hynny bell
fwy na'r eu poblogrwydd.

26
00:01:05,830 --> 00:01:06,890
Mae'n y peth newydd poeth.

27
00:01:06,890 --> 00:01:09,590
Mae'n iawn, iawn enfawr.

28
00:01:09,590 --> 00:01:13,470
>> Ac felly React yn dda, nid yn unig fel
fframwaith we ar gyfer rhyngwynebau adeiladu.

29
00:01:13,470 --> 00:01:16,020
Mae'n dda ar gyfer adeiladu rhyngwynebau we.

30
00:01:16,020 --> 00:01:18,350
Mae hefyd yn beth
Gelwir React brodorol sy'n

31
00:01:18,350 --> 00:01:22,200
yn gadael i chi adeiladu rhyngwynebau
ar gyfer Android a iOS

32
00:01:22,200 --> 00:01:26,390
a llwyfannau efallai eraill yn y dyfodol
gan ddefnyddio dim ond un cod JavaScript.

33
00:01:26,390 --> 00:01:31,130
Gallech ddefnyddio'r union un fath
Cod JavaScript i rendro gwefannau,

34
00:01:31,130 --> 00:01:33,040
i rendro apps Android a iOS apps.

35
00:01:33,040 --> 00:01:35,000
>> Mae'n gyfnod hynod, yn gyffrous iawn.

36
00:01:35,000 --> 00:01:37,070
Mae'n gyfle 'n sylweddol,' n sylweddol oera.

37
00:01:37,070 --> 00:01:42,020
Mae'n wir yn we cyffredinol
offeryn datblygu rhyngwyneb,

38
00:01:42,020 --> 00:01:44,420
felly mae'n iawn, iawn
peth pwysig i'w gofio.

39
00:01:44,420 --> 00:01:46,949
Ac, fel yr oeddwn yn dweud wrth bobl
o'r blaen, mae hyn, yr wyf yn meddwl,

40
00:01:46,949 --> 00:01:48,990
yn mynd i newid sut yr ydym
adeiladu apps ar y we am byth.

41
00:01:48,990 --> 00:01:55,820
Felly mae'n efallai braidd yn gormodiaith, ond yr wyf yn
yn meddwl ei fod yn beth 'n bert da i wybod.

42
00:01:55,820 --> 00:01:57,580
>> Iawn, felly beth yw ReAct?

43
00:01:57,580 --> 00:02:01,020
React yn fframwaith y gallwch
defnyddio ar gyfer rhyngwynebau adeiladu.

44
00:02:01,020 --> 00:02:03,240
Mae rhyngwyneb yn, unwaith eto,
tudalen ar y we, dde?

45
00:02:03,240 --> 00:02:06,340
Felly dyma Instagram.com, defnyddiau React.

46
00:02:06,340 --> 00:02:08,740
>> React wedi ei adeiladu ar y
syniad o gydrannau.

47
00:02:08,740 --> 00:02:11,900
Un elfen yn HTML
Elfen ar steroidau,

48
00:02:11,900 --> 00:02:14,470
felly yn elfen HTML yn debyg i fotwm.

49
00:02:14,470 --> 00:02:15,250
Mae'n paragraff.

50
00:02:15,250 --> 00:02:17,500
Mae'n pennawd, dde?

51
00:02:17,500 --> 00:02:22,740
A bydd Instagram defnyddio'r rhain, ond mae'n
Bydd hefyd yn defnyddio cydrannau React.

52
00:02:22,740 --> 00:02:25,740
>> React cydrannau yn
elfennau HTML souped-up

53
00:02:25,740 --> 00:02:28,100
sydd wedi eu hymddygiad eu hunain
sydd ynddynt.

54
00:02:28,100 --> 00:02:31,800
Felly, fel enghraifft, gallem fod wedi
elfen amser, cydran amser,

55
00:02:31,800 --> 00:02:34,095
a fydd yn cynnwys fel
y stamp amser, chi'n gwybod,

56
00:02:34,095 --> 00:02:37,170
elfen proffil sy'n
bydd yn cynnwys y ddelwedd proffil

57
00:02:37,170 --> 00:02:38,820
ac enw'r person.

58
00:02:38,820 --> 00:02:42,930
Gall gael cownter tebyg, a oedd yn
gallu cyfrif fel y nifer o hoff bethau,

59
00:02:42,930 --> 00:02:45,610
ac os ydych yn cliciwch arno, mae'n chi helpu
cynyddu nifer y bobl fel.

60
00:02:45,610 --> 00:02:48,200
Un elfen yn unig yw
criw o HTML cod sy'n

61
00:02:48,200 --> 00:02:50,520
Mae gan rai functionality
wedi'i lapio tu mewn iddo.

62
00:02:50,520 --> 00:02:53,770
Felly mae fel elfen HTML
ar steroidau, fel y dywedais o'r blaen.

63
00:02:53,770 --> 00:02:56,270
Gallwch gymryd elfennau hyn,
a gallwch eu rhoi at ei gilydd

64
00:02:56,270 --> 00:02:59,060
i wneud cydrannau newydd, yn
yr achos hwn, yn elfen bost,

65
00:02:59,060 --> 00:03:00,505
sy'n cynnwys yr holl bethau hyn.

66
00:03:00,505 --> 00:03:04,050
Byddai'n cynnwys Time, Proffil,
LikeCounter, efallai y sylw

67
00:03:04,050 --> 00:03:06,100
ac efallai y ddelwedd ei hun.

68
00:03:06,100 --> 00:03:10,810
Ac felly apps ar y we yn unig a adeiladwyd gan gymryd
cydrannau a rhoi at ei gilydd.

69
00:03:10,810 --> 00:03:15,620
Porthiant Instagram yn ddim mwy na
criw o swyddi un ar ôl y llall,

70
00:03:15,620 --> 00:03:19,032
pob swydd yn cynnwys fel y Time,
Proffil, LikeCounter, ac yn y blaen.

71
00:03:19,032 --> 00:03:20,490
Mae'n fath o fel adeiladu tŷ.

72
00:03:20,490 --> 00:03:22,660
Nid ydych yn adeiladu'r
tŷ o'r brig i lawr.

73
00:03:22,660 --> 00:03:24,960
Byddwch yn cymryd components-- chi
cymryd fel yr ystafell ymolchi.

74
00:03:24,960 --> 00:03:28,320
Rydych yn cymryd y bedroom-- i chi eu cadw
gyda'i gilydd, ac mae gennych elfen newydd.

75
00:03:28,320 --> 00:03:29,760
Mae gennych ran newydd o'r tŷ.

76
00:03:29,760 --> 00:03:32,860
>> Felly Mae ReAct yn adeiladu o amgylch
syniad hwn o gydrannau sy'n

77
00:03:32,860 --> 00:03:36,600
yn rhyngweithiol, sy'n cael eu declarative.

78
00:03:36,600 --> 00:03:39,650
Fel chi jyst dweud beth mae
proffil yn, ac mae'n peri ei fod.

79
00:03:39,650 --> 00:03:40,600
Maent yn composable.

80
00:03:40,600 --> 00:03:43,880
Gallwch gymryd amser a phroffil, rhowch
gyda'i gilydd, yn gwneud rhywbeth yn well.

81
00:03:43,880 --> 00:03:47,770
Ac maen nhw'n gellir eu hailddefnyddio, felly os ydych
yn cael y cod ffynhonnell ar gyfer swydd,

82
00:03:47,770 --> 00:03:49,440
gallech ymgorffori hynny yn unrhyw le.

83
00:03:49,440 --> 00:03:53,160
>> Gallwch fewnosod yn Instagram
beth ar eich gwefan eich hun.

84
00:03:53,160 --> 00:03:56,830
Gallwch fewnosod yn Facebook, er enghraifft,
ar yr amod ei fod yn defnyddio React hefyd.

85
00:03:56,830 --> 00:04:00,360
Felly cydrannau yn iawn, iawn, iawn
blociau adeiladu pwerus y we

86
00:04:00,360 --> 00:04:04,180
y gellir eu defnyddio yn unrhyw le ac yn rhoi
gyda'i gilydd i wneud blociau adeiladu newydd.

87
00:04:04,180 --> 00:04:07,159
Dyna'r iawn, iawn
trosolwg lefel uchel.

88
00:04:07,159 --> 00:04:09,200
Felly, unwaith eto, os oes gennych
unrhyw gwestiynau ar unrhyw adeg

89
00:04:09,200 --> 00:04:14,470
am athroniaeth adweithydd, y
codio, i roi'r gorau i mi, a gadewch i mi wybod.

90
00:04:14,470 --> 00:04:18,420
>> Iawn, felly ymateb yn cŵl am ei fod yn
Mae ffordd wahanol o edrych

91
00:04:18,420 --> 00:04:19,870
ar sut yr ydych yn adeiladu apps ar y we.

92
00:04:19,870 --> 00:04:23,620
Mae'n debyg eich bod wedi clywed am MVC, mae
model chi reoli mewn CS50 neu beth bynnag

93
00:04:23,620 --> 00:04:25,940
dosbarthiadau treiddgar i chi ddefnyddio eraill.

94
00:04:25,940 --> 00:04:29,000
Ac yn y rhan fwyaf o fframweithiau'n
adeiladu o amgylch y syniad o MVC.

95
00:04:29,000 --> 00:04:30,410
React Nid yw.

96
00:04:30,410 --> 00:04:32,980
Yn ymateb yn cael ei adeiladu ar y syniad
llif data Uncyfeiriad

97
00:04:32,980 --> 00:04:36,510
fel y gwelir gan y siart hwn neu graffig yma.

98
00:04:36,510 --> 00:04:38,260
>> Yn y bôn, mae gennych ffynhonnell ddata.

99
00:04:38,260 --> 00:04:42,380
A bydd y ffynhonnell ddata yn penderfynu
sut i osod allan rai cydrannau.

100
00:04:42,380 --> 00:04:45,452
A fydd y cydrannau
Yna, pan fyddant yn newid,

101
00:04:45,452 --> 00:04:47,160
byddant yn dweud y
ffynhonnell ddata i newid.

102
00:04:47,160 --> 00:04:49,350
>> I ddefnyddio'r Instagram
enghraifft, efallai fod gennych

103
00:04:49,350 --> 00:04:52,050
rhestr o wrthrychau swydd fel
mewn cronfa ddata neu rywbeth.

104
00:04:52,050 --> 00:04:53,310
Bod y data.

105
00:04:53,310 --> 00:04:57,600
Ac yna mae ein cydrannau post
yn cymryd y data hwnnw,

106
00:04:57,600 --> 00:05:01,830
a defnyddio'r data hwnnw i rendro
yn beth ar y sgrin.

107
00:05:01,830 --> 00:05:04,300
Dyna beth y saeth
o ddata i gydran yw,

108
00:05:04,300 --> 00:05:07,930
ac yna bod un data yn cael ei ddefnyddio
i rendro bagad o gydrannau.

109
00:05:07,930 --> 00:05:10,290
>> Yn Facebook Messenger, am
enghraifft, sydd yn React,

110
00:05:10,290 --> 00:05:13,410
efallai y bydd gennych restr o
negeseuon fel eich ffynhonnell ddata.

111
00:05:13,410 --> 00:05:15,927
A fyddai nid yn gwneud
dim ond y rhestr o negesau

112
00:05:15,927 --> 00:05:17,510
ond hefyd y rhestr o ffrindiau sydd gennych.

113
00:05:17,510 --> 00:05:19,200
Mae gennych y cyfrif heb eu darllen.

114
00:05:19,200 --> 00:05:23,330
Efallai hefyd olygu bod y peth Facebook
dyna ar waelod Facebook.com.

115
00:05:23,330 --> 00:05:25,610
Mae'r un data yn
un ffynhonnell o wirionedd

116
00:05:25,610 --> 00:05:28,290
ac sy'n achosi llawer o
cydrannau gael eu rendro.

117
00:05:28,290 --> 00:05:30,290
A phryd bynnag un o'r rhai
cydrannau ei newid,

118
00:05:30,290 --> 00:05:32,320
mae'n mynd yn ôl ac
yn newid y ffynhonnell ddata.

119
00:05:32,320 --> 00:05:33,460
>> Rydych yn anfon neges, dde?

120
00:05:33,460 --> 00:05:34,780
Sy'n newid y ffynhonnell ddata.

121
00:05:34,780 --> 00:05:39,490
Rydych yn darllen eich negeseuon,
fel eich bod yn gosod heb eu darllen i 0.

122
00:05:39,490 --> 00:05:41,136
Sy'n newid y ffynhonnell ddata.

123
00:05:41,136 --> 00:05:44,010
Ac yn sylwi bod pob un o'r rhain o un
arrow mynd yn ôl at yr un data

124
00:05:44,010 --> 00:05:47,662
ffynhonnell, felly eich bod yn gwybod,
Rhoddir set ddata benodol,

125
00:05:47,662 --> 00:05:49,870
eich bod yn gwybod yn union yr hyn y mae'r
dudalen yn mynd i edrych fel.

126
00:05:49,870 --> 00:05:50,700
Mae'n benderfynedig.

127
00:05:50,700 --> 00:05:53,451
Rydych yn gwybod, o ystyried data penodol, beth
mae'r dudalen yn mynd i edrych fel.

128
00:05:53,451 --> 00:05:56,158
Gallwch rhagweld sut mae'n mynd i
ymddwyn a sut mae pethau'n mynd

129
00:05:56,158 --> 00:05:57,650
i weithio pan fyddant yn rhoi at ei gilydd.

130
00:05:57,650 --> 00:06:00,410
>> Ac os oedd gen miliwn o gydrannau
yma, byddai'n ymddwyn yr un fath, dde?

131
00:06:00,410 --> 00:06:02,290
Ni fyddai'n rhaid i unrhyw Chi
rhyng-gysylltiadau 'n annaearol.

132
00:06:02,290 --> 00:06:04,120
Rendro un data miliwn o gydrannau.

133
00:06:04,120 --> 00:06:06,879
Mae miliwn o cydrannau gallai
ewch yn ôl a golygu data.

134
00:06:06,879 --> 00:06:07,920
Ac felly mae hyn yn iawn 'n glws.

135
00:06:07,920 --> 00:06:10,870
Rydym yn adeiladu composable,
apps we scalable yn hawdd.

136
00:06:10,870 --> 00:06:13,150
>> Mae gennych un ffynhonnell ddata,
ffynhonnell o wirionedd.

137
00:06:13,150 --> 00:06:15,790
Sy'n dweud wrth eich cydrannau
sut i osod allan y dudalen,

138
00:06:15,790 --> 00:06:18,190
a bydd y cydrannau
trin rhyngweithio.

139
00:06:18,190 --> 00:06:20,150
Ac os bydd am newid
pethau, dim ond yn mynd yn ôl

140
00:06:20,150 --> 00:06:21,750
a dweud wrth y ffynhonnell ddata i newid.

141
00:06:21,750 --> 00:06:22,850
Gwneud synnwyr?

142
00:06:22,850 --> 00:06:26,010
Felly React yn ymwneud â dealltwriaeth
sut i adeiladu cydran

143
00:06:26,010 --> 00:06:29,540
a sut i wneud eich cydran
ryngweithio â'r byd y tu allan.

144
00:06:29,540 --> 00:06:31,850
>> Gwneud y gydran rhyngweithio
gyda'r byd y tu allan

145
00:06:31,850 --> 00:06:34,490
defnyddio technoleg arall
Gelwir Flux, a oedd yn

146
00:06:34,490 --> 00:06:36,872
yn fframwaith sy'n
Ychwanegodd ar ben React.

147
00:06:36,872 --> 00:06:38,330
Nid ydym yn mynd i siarad am hynny.

148
00:06:38,330 --> 00:06:42,990
Rydym yn mynd i siarad mwy am, o ystyried
data, sut y gallwch rendro gydran?

149
00:06:42,990 --> 00:06:47,010
>> Ac felly React yn wirioneddol cŵl oherwydd eich bod
Gall ei ddefnyddio gydag unrhyw ben yn ôl ydych ei eisiau.

150
00:06:47,010 --> 00:06:50,480
Os oes gennych chi fel pen ôl Python,
os gall eich Python boeri allan rhywfaint o ddata,

151
00:06:50,480 --> 00:06:51,610
React gall ei gwneud yn.

152
00:06:51,610 --> 00:06:54,700
Os ydych yn unrhyw allbynnau JS
o ddata, React peri ei fod.

153
00:06:54,700 --> 00:06:56,890
Ruby rheiliau i fyny gyda
data, React peri ei fod.

154
00:06:56,890 --> 00:07:01,860
>> Felly React yn y bôn yn we
view-- pen blaen gyda chydrannau

155
00:07:01,860 --> 00:07:03,910
ar gyfer unrhyw ffynhonnell ddata o gwbl.

156
00:07:03,910 --> 00:07:07,145
Ac felly yn mynd o ffynhonnell ddata i
ymateb cydrannau yn eithaf hawdd.

157
00:07:07,145 --> 00:07:08,770
Mynd y ffordd arall yn ychydig yn galetach.

158
00:07:08,770 --> 00:07:10,462
Sy'n defnyddio Flux fel y soniais o'r blaen.

159
00:07:10,462 --> 00:07:11,420
Ni fyddwn yn mynd i mewn i hynny.

160
00:07:11,420 --> 00:07:13,740
Byddwn yn canolbwyntio mwy ar y
data-i-gydran ochr.

161
00:07:13,740 --> 00:07:15,880
Fel hyn, gallwch wneud
, apps we hwyl oer.

162
00:07:15,880 --> 00:07:19,870
Ni fydd yn effeithio ar y byd y tu allan
am y tro, ond mae hynny'n stori arall.

163
00:07:19,870 --> 00:07:22,210
>> Iawn, felly os oeddech yma
ar gyfer fy seminar diwethaf

164
00:07:22,210 --> 00:07:26,610
byddwch yn gwybod bod pob un o'r cod ar gyfer
Sgwrs heddiw yn mynd i fod yn y URL yma

165
00:07:26,610 --> 00:07:29,320
yma, mae'n ddrwg gennyf, URL hwn yma.

166
00:07:29,320 --> 00:07:32,730
Ac yn y bôn rydym yn mynd i fynd
drwy pedwar cam, efallai pump,

167
00:07:32,730 --> 00:07:33,510
Mae'n debyg na phump.

168
00:07:33,510 --> 00:07:37,300
Byddwn yn symud drwy'r pedwar cam
o adeiladu sampl React app.

169
00:07:37,300 --> 00:07:39,550
Ac felly yr holl cod ffynhonnell
ar gyfer pob cam o'r ffordd

170
00:07:39,550 --> 00:07:42,216
yn mynd i fod yn iawn yma, felly os
eich bod yn dilyn ar hyd yn y cartref,

171
00:07:42,216 --> 00:07:43,991
croeso i ddarllen y cod hwn.

172
00:07:43,991 --> 00:07:46,740
Os ydych yn dilyn ar hyd yma,
byddwn yn dangos ar y sgrin,

173
00:07:46,740 --> 00:07:47,739
felly peidiwch â phoeni am y peth.

174
00:07:47,739 --> 00:07:50,930
Ond os ydych chi gartref, yn teimlo
rhad ac am ddim i ymweld â'r wefan hon.

175
00:07:50,930 --> 00:07:56,400
Ac, Yeah, dylech allu cael
yr holl cod byddech byth angen i chi yma.

176
00:07:56,400 --> 00:08:01,380
Felly mae'n taflen twyllo da yn ogystal
ar gyfer eich anturiaethau yn y dyfodol gyda ReAct.

177
00:08:01,380 --> 00:08:04,490
Cool, felly os bawb sydd sydd yma,
a hyd yn oed os ydych chi gartref,

178
00:08:04,490 --> 00:08:11,580
tynnu i fyny y wefan hon, is.gd/cs50react,
dim cyfalaf, dim tanlinellu, dim dim.

179
00:08:11,580 --> 00:08:15,849
>> Byddwch yn gweld tudalen sy'n edrych
ychydig bach fel hyn.

180
00:08:15,849 --> 00:08:17,140
Mae hyn yn beth a elwir yn CodePen.

181
00:08:17,140 --> 00:08:20,030
CodePen yn gydweithredol
amgylchedd codio

182
00:08:20,030 --> 00:08:23,364
Gallaf ysgrifennu cod yma â hwy, a
bydd yn cael ei hanfon atoch yn awtomatig.

183
00:08:23,364 --> 00:08:24,780
Ac i hyn, gall yr wyf yn ysgrifennu cod.

184
00:08:24,780 --> 00:08:26,920
Gallaf redeg cod yma.

185
00:08:26,920 --> 00:08:33,470
>> Ar gyfer example-- ac os yw'n gweld reloads--,
Im 'yn rhedeg cod JavaScript ar y dudalen

186
00:08:33,470 --> 00:08:36,390
i'r dde yma, ac mae'n chi helpu
rendr tudalen ar y we yn awtomatig

187
00:08:36,390 --> 00:08:37,980
gyda hyn cod JavaScript.

188
00:08:37,980 --> 00:08:40,039
Ac felly mae hyn yn ffordd
i ni roi cynnig ar cod

189
00:08:40,039 --> 00:08:43,089
'n sylweddol yn gyflym heb orfod defnyddio
ein ID neu ddefnyddio ein peiriant lleol

190
00:08:43,089 --> 00:08:44,290
neu beth bynnag.

191
00:08:44,290 --> 00:08:47,670
Mae'n ffordd gyflym iawn i chi mockup
ac yn profi gwahanol fathau o god.

192
00:08:47,670 --> 00:08:50,560
>> Felly dw i'n mynd i fod yn cymryd
Enghraifft cod, ei roi yma.

193
00:08:50,560 --> 00:08:52,374
Rydym yn mynd i fod yn gweithio drwyddo.

194
00:08:52,374 --> 00:08:54,540
Ac os ydych chi gartref, byddwch yn
Gall dynnu hyn i fyny hefyd.

195
00:08:54,540 --> 00:08:57,530
Ac yr wyf eisoes wedi gosod
React yma, felly gallwch yn unig

196
00:08:57,530 --> 00:09:00,770
ysgrifennu eich cod hunain yma, a
roi cynnig arni fel eich iard chwarae eich hun.

197
00:09:00,770 --> 00:09:04,940
>> Yeah, os yw pawb i
agor y ddolen yma.

198
00:09:04,940 --> 00:09:08,080
Os gwelwch yn dda roi sêl bendith i mi
i fyny ar ôl i chi wedi ei agor.

199
00:09:08,080 --> 00:09:10,960

200
00:09:10,960 --> 00:09:13,770
Cool oer, oer.

201
00:09:13,770 --> 00:09:16,914
Does dim byd yma am y tro, ond
byddwn yn newid yn fuan iawn.

202
00:09:16,914 --> 00:09:21,250
>> Iawn, felly React yw JavaScript
llyfrgell, ac fel y cyfryw,

203
00:09:21,250 --> 00:09:24,480
gofyn am wybodaeth am JavaScript,
sef y iaith raglennu we.

204
00:09:24,480 --> 00:09:27,660
Ac mae'n cael ei ddefnyddio ar gyfer pethau eraill
bellach yn rhy ond yn bennaf y we yn datblygu

205
00:09:27,660 --> 00:09:32,040
iaith, felly os ydych yn gyfarwydd â
hynny, darllenwch safle o'r enw JSforCats.com.

206
00:09:32,040 --> 00:09:32,700
Mae'n wych.

207
00:09:32,700 --> 00:09:34,240
Gallwch ddysgu JavaScript
mewn hanner awr.

208
00:09:34,240 --> 00:09:34,990
Mae'n anhygoel.

209
00:09:34,990 --> 00:09:36,420
>> Felly rhowch gynnig ddarllen.

210
00:09:36,420 --> 00:09:39,960
Rydym hefyd yn llawer o HTML yma oherwydd
rydym yn dylunio tudalennau gwe wrth gwrs.

211
00:09:39,960 --> 00:09:43,890
Felly os ydych yn anghyfarwydd â
HTML, atalfa i maes HTMLdog.com.

212
00:09:43,890 --> 00:09:46,520
Rwy'n credu ddysgu React yw
miliwn gwaith yn haws os ydych eisoes

213
00:09:46,520 --> 00:09:47,892
gwybod blociau adeiladu.

214
00:09:47,892 --> 00:09:50,600
Os oes gennych y cydrannau, 'i'
hawdd i wneud cydran fwy.

215
00:09:50,600 --> 00:09:51,860
Dyna React iaith ar eich cyfer chi.

216
00:09:51,860 --> 00:09:54,270
>> Felly mynd yn ei flaen ac yn rhoi
pethau hyn yn darllen.

217
00:09:54,270 --> 00:09:55,070
Saib y fideo.

218
00:09:55,070 --> 00:09:57,440
Rhowch gynnig darllen os ydych yn
gartref os nad ydych yn

219
00:09:57,440 --> 00:10:00,794
gyfarwydd â HTML neu JavaScript

220
00:10:00,794 --> 00:10:02,960
Iawn, felly beth rydyn ni'n mynd i
wneud yw ein bod yn mynd i wneud

221
00:10:02,960 --> 00:10:06,470
app cerdyn fflach sylfaenol iawn gan ddefnyddio React.

222
00:10:06,470 --> 00:10:08,210
Rydym yn mynd i gael cerdyn fflach.

223
00:10:08,210 --> 00:10:09,880
Gallwch troi cerdyn yn ôl ac ymlaen.

224
00:10:09,880 --> 00:10:12,399
A byddwn gennym hefyd restr o
yr holl gardiau sydd gennym,

225
00:10:12,399 --> 00:10:14,190
ac os ydym yn teimlo'n
uchelgeisiol, efallai y byddwn yn

226
00:10:14,190 --> 00:10:17,060
gallu i newid rhwng
ceir trwy glicio arnynt.

227
00:10:17,060 --> 00:10:20,360
>> Ond mae hyn yn, eich foel
esgyrn, React yn syml iawn app.

228
00:10:20,360 --> 00:10:22,560
Ac felly mae hyn mewn gwirionedd
Nid dibwys i'w gweithredu,

229
00:10:22,560 --> 00:10:26,030
ond rydym yn mynd i ddangos bod, os ydych yn gwneud
hyn, mae'n iawn, yn hawdd iawn i'w ymestyn

230
00:10:26,030 --> 00:10:27,680
os bydd pobl eraill eich helpu ag ef.

231
00:10:27,680 --> 00:10:33,750
Felly rydym yn mynd i fynd drwy bedwar cam
dechrau o'r dechrau i adeiladu hyn.

232
00:10:33,750 --> 00:10:36,740
>> OK, felly mae'r pedwar cam, yr ydym chi helpu
dechrau gyda'r cam cyntaf.

233
00:10:36,740 --> 00:10:39,790
Y cam cyntaf yn mynd i fod
adeiladu eich elfen gyntaf.

234
00:10:39,790 --> 00:10:44,830
Fel y dywedais o'r blaen, yn elfen mewn React
yn unig yw elfen HTML ar steroidau.

235
00:10:44,830 --> 00:10:49,660
Mae'n pennu'r HTML
a rhywfaint o ymddygiad, ac mae'n

236
00:10:49,660 --> 00:10:52,600
Bydd yn nodi sut mae pobl
Gall rhyngweithio ag ef sut

237
00:10:52,600 --> 00:10:54,270
byddai ganddo cyflwr mewnol.

238
00:10:54,270 --> 00:10:57,630
Fel y bydd botwm yn gwybod fel faint o
Amseroedd mae wedi cael ei glicio er enghraifft,

239
00:10:57,630 --> 00:11:01,010
a bydd yn gwybod sut i osod ei hun allan.

240
00:11:01,010 --> 00:11:04,430
>> Felly gadewch i ni fynd yn ei flaen ac yn adeiladu ein
elfen gyntaf gan ddefnyddio JavaScript.

241
00:11:04,430 --> 00:11:09,711
Felly, os y gystrawen yn edrych yn rhyfedd,
mae hynny oherwydd ei fod yn fath o.

242
00:11:09,711 --> 00:11:11,710
Felly, unwaith eto, rydym yn mynd
i wneud newidyn enw

243
00:11:11,710 --> 00:11:14,580
app ddefnyddio'r allweddair osod,
sy'n gwneud newidyn,

244
00:11:14,580 --> 00:11:18,210
gadewch App React.createClass gyfartal.

245
00:11:18,210 --> 00:11:22,609
>> React yn llyfrgell ac mae ganddo
y creu swyddogaeth dosbarth.

246
00:11:22,609 --> 00:11:24,400
Ac mae swyddogaeth hon yw
ychydig o cod sy'n chi

247
00:11:24,400 --> 00:11:29,090
Gall eu defnyddio i greu newydd
math o React gydran.

248
00:11:29,090 --> 00:11:32,780
Ac felly React.createClass
yn gwneud gydran,

249
00:11:32,780 --> 00:11:35,270
a bydd y gydran hon
yn gallu gwneud pethau.

250
00:11:35,270 --> 00:11:40,460
Y prif beth y gall ei wneud yw gwneud
rhywbeth, rendro fel swyddogaeth.

251
00:11:40,460 --> 00:11:44,500
>> Unwaith eto, os nad yw mynegai yw hyn yn amlwg i
chi, yr wyf yn argymell eich bod yn mynd ar JS gyfer cathod

252
00:11:44,500 --> 00:11:45,682
ac edrych arni.

253
00:11:45,682 --> 00:11:47,710
A yw bod chwyddo i mewn yn ddigon da?

254
00:11:47,710 --> 00:11:48,490
Cool.

255
00:11:48,490 --> 00:11:50,670
>> Felly pob anghenion cydran
i gael swyddogaeth rendr.

256
00:11:50,670 --> 00:11:53,010
Mae'r swyddogaeth rendr yn dweud,
beth ddylwn i ei argraffu ar y sgrin?

257
00:11:53,010 --> 00:11:54,760
Ond mae'r gydran yn
ddiwerth os nad yw'n gwneud

258
00:11:54,760 --> 00:11:58,060
gwybod beth i'w argraffu ar y sgrin, felly
mae angen i chi fod â swyddogaeth rendr.

259
00:11:58,060 --> 00:12:01,904
>> Felly, yn y peth rendr, chi
'Ch jyst angen i ddychwelyd rhywfaint o HTML.

260
00:12:01,904 --> 00:12:03,820
A beth cŵl yw bod
mae 'na beth a elwir yn

261
00:12:03,820 --> 00:12:08,660
JSX, sydd yn ymestyn
JavaScript a ddefnyddir gan ymateb.

262
00:12:08,660 --> 00:12:11,845
Mae'n gadewch i chi ysgrifennu HTML y tu mewn
eich JavaScript, a oedd yn

263
00:12:11,845 --> 00:12:13,970
synau fath o 'n annaearol pan
ydych yn meddwl yn gyntaf am y peth,

264
00:12:13,970 --> 00:12:15,553
ond mae'n gwneud llawer o synnwyr wedi hynny.

265
00:12:15,553 --> 00:12:17,430
Felly, gallwn wneud hyn.

266
00:12:17,430 --> 00:12:21,360
Os ydych yn gyfarwydd â HTML, rwy'n gwybod
mae gennym div gyda diben cyffredinol

267
00:12:21,360 --> 00:12:22,790
cynhwysydd ar gyfer stwff.

268
00:12:22,790 --> 00:12:26,380
Gallwn dychwelyd div, ac y tu mewn
div hwn, gallwn roi pethau.

269
00:12:26,380 --> 00:12:32,390
>> Felly, gadewch i ni ddweud ein bod am i rendro yn unig
mae cerdyn fflach yn syth i fyny am y tro.

270
00:12:32,390 --> 00:12:34,890
Mae'r cerdyn fflach, byddwn yn dweud,
Bydd yn rhaid i holi ac ateb.

271
00:12:34,890 --> 00:12:37,530
Felly, y tu mewn div hwn, gadewch i ni
argraffu paragraff

272
00:12:37,530 --> 00:12:42,155
sy'n dweud question-- Beth yw'r
ateb yn y pen draw i fywyd, y bydysawd?

273
00:12:42,155 --> 00:12:47,640

274
00:12:47,640 --> 00:12:50,345
Ac yna yr ateb yw
mynd i fod, wrth gwrs, 42.

275
00:12:50,345 --> 00:12:56,880

276
00:12:56,880 --> 00:12:59,730
>> Nad oedd yn dod i fyny yn dda o gwbl.

277
00:12:59,730 --> 00:13:04,164
Yeah, felly y bôn y gallwch mewn gwirionedd
ysgrifennu HTML tu mewn eich JavaScript.

278
00:13:04,164 --> 00:13:06,330
Ac mae hyn yn mynd i fod
hargraffu allan i'r sgrin.

279
00:13:06,330 --> 00:13:08,250
Felly gadewch i ni roi cynnig arni.

280
00:13:08,250 --> 00:13:09,520
>> Felly, rydym wedi ein cydran.

281
00:13:09,520 --> 00:13:12,210
Mae angen i ni ddweud wrth React i roi
y gydran ar y sgrin

282
00:13:12,210 --> 00:13:18,990
felly React.render, felly yn sylwi ein bod yn
trin app fel unrhyw elfen arall.

283
00:13:18,990 --> 00:13:21,010
Rydym yn ysgrifennu am ei fod yn elfen HTML.

284
00:13:21,010 --> 00:13:25,100
Fel yn lle dweud fel img
am ddelwedd neu p paragraff,

285
00:13:25,100 --> 00:13:28,120
chi ysgrifennu App, felly App yn
trin fel elfen HTML.

286
00:13:28,120 --> 00:13:30,380
Fel y dywedais o'r blaen, 'i'
elfen ar steroidau.

287
00:13:30,380 --> 00:13:32,870
>> Felly rydych rendr App, a ydych
roi cynnig lle i'w roi iddo.

288
00:13:32,870 --> 00:13:37,170
A dyma sut y gallwch
yn dweud ei fod lle i'w roi.

289
00:13:37,170 --> 00:13:46,200
Rwyf wedi creu div syml ar y
dudalen a elwir gyda ID y dudalen,

290
00:13:46,200 --> 00:13:48,300
a dyna lle mae'r
elfen yn mynd i fynd.

291
00:13:48,300 --> 00:13:49,841
>> Ac nid ydym yn mynd i redeg gyda HTML.

292
00:13:49,841 --> 00:13:53,145
Yn y bôn mae hyn yn mynd i gael
rhoi tu mewn yr elfen hon dudalen

293
00:13:53,145 --> 00:13:54,270
sydd gennym ar y sgrin.

294
00:13:54,270 --> 00:13:59,210
Felly mae'n rhedeg, cod hwn ac mae'n tynnu hyn
beth ar y sgrin, felly dyma ni.

295
00:13:59,210 --> 00:14:01,770
Rydym wedi gwneud ein cydran React cyntaf.

296
00:14:01,770 --> 00:14:08,000
>> Felly, yn union fel ailadrodd, rydym yn gwneud yn ysgafn
math newydd o gydran, dde?

297
00:14:08,000 --> 00:14:10,145
Dyna beth mae'r React.createClass.

298
00:14:10,145 --> 00:14:12,680
Ac yn y gydran honno, rydym yn
Dywedodd ei fod yr hyn y dylai ei wneud.

299
00:14:12,680 --> 00:14:15,590
Pryd bynnag y gydran hon yw
yn cael ei argraffu ar y sgrin,

300
00:14:15,590 --> 00:14:19,300
bydd yn argraffu'r div gyda
y ddau baragraff tu mewn iddo.

301
00:14:19,300 --> 00:14:24,460
>> A beth a wnaethom, gwnaethom app newydd
gan ddefnyddio'r nodiant braced ongl app.

302
00:14:24,460 --> 00:14:27,160
Rydym yn dweud hi i roi
y tu mewn i'r elfen dudalen.

303
00:14:27,160 --> 00:14:29,867
Ac felly yr hyn a wnaeth i mi, mae'n creu
app newydd gan y templed.

304
00:14:29,867 --> 00:14:31,200
Ac yna yr wyf yn dweud ei fod i'w wneud yn.

305
00:14:31,200 --> 00:14:33,680
Felly mae'n dweud, iawn, app,
beth ddylwn i argraffu?

306
00:14:33,680 --> 00:14:36,970
App yn dweud, ewch argraffu div
gyda dau baragraff tu mewn iddo.

307
00:14:36,970 --> 00:14:40,420
Ac voila, mae ein div gyda
ddau baragraff tu mewn iddo.

308
00:14:40,420 --> 00:14:43,180
Gwneud synnwyr hyd yn hyn?

309
00:14:43,180 --> 00:14:46,690
>> Felly, unwaith eto, yr her cyfan o React
yw dim ond gwybod sut i wneud cydrannau.

310
00:14:46,690 --> 00:14:48,500
Sut i wneud y
cydrannau yn gweithio gyda'i gilydd.

311
00:14:48,500 --> 00:14:51,780
Nawr ein bod yn wedi gwneud ein cyntaf
gydran, gadewch i ni fynd yn ôl

312
00:14:51,780 --> 00:14:54,284
ac yn gwneud cydrannau customizable.

313
00:14:54,284 --> 00:14:56,700
Felly rydych yn gwybod sut yr ydych yn HTML
Gall roi eich dosbarthiadau botymau?

314
00:14:56,700 --> 00:14:59,146
Gallwch roi y href eich angorau.

315
00:14:59,146 --> 00:15:00,770
Gallwch roi eich math mewnbynnau, dde?

316
00:15:00,770 --> 00:15:04,740
Gallwch roi mwy o arfer
eiddo i bob un o'ch elfennau

317
00:15:04,740 --> 00:15:06,490
i'w wneud yn fwy diddorol.

318
00:15:06,490 --> 00:15:09,030
Ac rydym mewn gwirionedd yn gallu ei wneud
yr un peth yn union.

319
00:15:09,030 --> 00:15:17,500
>> Felly, gadewch i ni ddweud ein bod am i'n
app i fynd rendr unrhyw gerdyn.

320
00:15:17,500 --> 00:15:19,630
Ar hyn o bryd rydym yn unig
rendro cerdyn hardcoded.

321
00:15:19,630 --> 00:15:22,530
Rydym yn gwybod dim ond un
cerdyn y gall ei wneud, felly rydym yn

322
00:15:22,530 --> 00:15:25,960
mynd i geisio newid hyn nawr felly
ein bod yn gallu jyst roi rhywfaint o gerdyn.

323
00:15:25,960 --> 00:15:27,410
Bydd yn argraffu'r cerdyn.

324
00:15:27,410 --> 00:15:29,380
>> Dylech geisio gwneud eich
cydrannau diben cyffredinol iawn.

325
00:15:29,380 --> 00:15:31,654
Felly, y ffordd hon gallwn i anfon e-bost
mae hyn fy ffrind a bod fel,

326
00:15:31,654 --> 00:15:33,820
beth bynnag cerdyn fflach sydd gennych,
dim ond yn bwydo i mewn i fan hyn,

327
00:15:33,820 --> 00:15:35,290
a bydd yn gwneud hynny drwy ei hun.

328
00:15:35,290 --> 00:15:37,650
Gallwch roi eraill
pethau yn eich app eich hun.

329
00:15:37,650 --> 00:15:40,600
>> Ond yn gyntaf, gadewch i ni dorri'r hwn
hyd yn ddwy gydran,

330
00:15:40,600 --> 00:15:44,500
ond rydym am i wahanu'r cerdyn
argraffu rhan o'r gwir ran app.

331
00:15:44,500 --> 00:15:46,660
Felly, yr hyn y gallwn ei wneud yw ein bod
Gall newid hyn o App

332
00:15:46,660 --> 00:15:51,300
i CardView, dim ond
enw newydd ar gyfer y app,

333
00:15:51,300 --> 00:15:54,450
a gallwn wneud newydd
a elwir yn gydran App,

334
00:15:54,450 --> 00:15:56,336
ni ddylid ei gymysgu gyda'r hen App.

335
00:15:56,336 --> 00:16:00,730
Rydym wedi cael y createClass,
ac fel yn HTML,

336
00:16:00,730 --> 00:16:03,590
gallwch nyth React cydrannau
y tu mewn i'w gilydd.

337
00:16:03,590 --> 00:16:16,430
>> Felly, yn y swyddogaeth rendro,
swyddogaeth CardView ddychwelyd,

338
00:16:16,430 --> 00:16:18,234
ac mae hyn yn yr un peth yn union.

339
00:16:18,234 --> 00:16:19,400
Gweler pam ei fod yn yr un peth?

340
00:16:19,400 --> 00:16:22,590
Yn hytrach na rendro dim ond y app sy'n
mae gan y div a paru tu mewn iddo,

341
00:16:22,590 --> 00:16:26,194
y app yn gwneud yr CardView, a'r
CardView renders y div a pharagraff.

342
00:16:26,194 --> 00:16:29,110
Felly, mae hyn yn ein enghraifft gyntaf o
elfennau nythu y tu mewn i'w gilydd.

343
00:16:29,110 --> 00:16:32,177
A yw hynny'n gwneud synnwyr?

344
00:16:32,177 --> 00:16:33,760
Felly, unwaith eto, mae gennym elfen CardView.

345
00:16:33,760 --> 00:16:37,250
Mae gennym elfennau app
ei fod yn fwy na.

346
00:16:37,250 --> 00:16:40,990
>> Iawn, felly rydym am i'n CardView-- os ydych
rhoi cerdyn penodol yn CardView da,

347
00:16:40,990 --> 00:16:43,370
bydd yn argraffu allan i chi, dde?

348
00:16:43,370 --> 00:16:48,050
Felly yn gyntaf, mae angen i ni wneud cerdyn,
felly gadewch i ni wneud gwrthrych cerdyn.

349
00:16:48,050 --> 00:17:02,930
Felly, gadewch i fy ngherdyn equal--
os ydych i gyd yn gyfarwydd,

350
00:17:02,930 --> 00:17:05,260
mae hyn yn unig yw gwneud nodiant
yn gwrthwynebu yn JavaScript.

351
00:17:05,260 --> 00:17:09,280
Mae'n fath o fel struct
yn C, felly rydym yn gwneud cerdyn,

352
00:17:09,280 --> 00:17:15,920
ac felly nawr gallwn drosglwyddo cerdyn hwn fel
eiddo neu fel priodoledd yn HTML

353
00:17:15,920 --> 00:17:17,290
terminoleg at ein app.

354
00:17:17,290 --> 00:17:20,210
Felly, gallwn wneud hyn, App
cerdyn hafal myCard.

355
00:17:20,210 --> 00:17:23,200
>> Rydych yn gwybod sut i mewnbwn, byddwch yn gwneud
Math o fewnbwn hafal testun neu fotwm

356
00:17:23,200 --> 00:17:25,240
dosbarth Equals BTN gyfer bootstrap ,?

357
00:17:25,240 --> 00:17:29,500
Un syniad, equals-- cerdyn App
mae'n rhaid i chi roi braces Yma--

358
00:17:29,500 --> 00:17:33,830
Cerdyn App hafal myCard, felly mae hyn
Dywed gennym y gwrthrych cerdyn.

359
00:17:33,830 --> 00:17:39,149
Rydw i'n mynd i basio fel
eiddo i'r gydran app.

360
00:17:39,149 --> 00:17:41,440
Ac mae hyn yn elfen app bydd
yn gallu cael mynediad iddo ac yn ei wneud

361
00:17:41,440 --> 00:17:43,580
stwff diddorol ag ef.

362
00:17:43,580 --> 00:17:47,650
>> Felly mae ein app yn mynd i fod
cael cerdyn, felly am y tro,

363
00:17:47,650 --> 00:17:49,980
gadewch i ni gael y app dim ond rhoi
y cerdyn at y CardView

364
00:17:49,980 --> 00:17:53,110
ei hun, oherwydd fel nad yw'r app yn
mynd i wybod beth i'w wneud ag ef,

365
00:17:53,110 --> 00:17:54,850
felly byddwn yn jyst roi i'r CardView.

366
00:17:54,850 --> 00:18:00,050
Felly byddwn yn ei throsglwyddo i'r
un ffordd, cerdyn hafal,

367
00:18:00,050 --> 00:18:05,426
ac felly gall pob cydran gael mynediad i'r
pethau sydd wedi cael ei roi iddo.

368
00:18:05,426 --> 00:18:07,800
Maent yn gallu cael mynediad i'r eiddo
a roddwyd iddo

369
00:18:07,800 --> 00:18:09,470
ddefnyddio cystrawen hwn, this.props.card.

370
00:18:09,470 --> 00:18:12,010

371
00:18:12,010 --> 00:18:14,920
>> Felly beth sy'n digwydd yma yw
mae gennych y gwrthrych myCard.

372
00:18:14,920 --> 00:18:18,250
Byddwch yn mynd heibio i mewn i'r app
gan ddefnyddio cerdyn App hafal myCard.

373
00:18:18,250 --> 00:18:21,420
Bod cerdyn gwrthrych yn cael ei roi at eich app.

374
00:18:21,420 --> 00:18:24,400
Gall y app mynediad iddo
fel this.props.card.

375
00:18:24,400 --> 00:18:28,780
Mae'n fath o fel ddelwedd
yn gwybod yr hyn y mae'n ei ffynhonnell yn.

376
00:18:28,780 --> 00:18:31,972
>> Mae hyn yn app yn gwybod beth 'i' cerdyn
yw, a gall wneud pethau ag ef.

377
00:18:31,972 --> 00:18:32,930
Gall wneud cyfrifiannau.

378
00:18:32,930 --> 00:18:35,290
Gall wneud penderfyniadau yn seiliedig i ffwrdd ohono.

379
00:18:35,290 --> 00:18:39,950
>> Am y tro, yr oeddwn yn mynd i basio
this.props.card ar y CardView.

380
00:18:39,950 --> 00:18:43,420
Gwneud synnwyr hyd yn hyn?

381
00:18:43,420 --> 00:18:45,210
Bydd yn gwneud mwy o synnwyr yn awr.

382
00:18:45,210 --> 00:18:46,990
>> Iawn, felly erbyn hyn rydym yn yn CardView.

383
00:18:46,990 --> 00:18:51,719
Mae ein CardView, o ystyried y cerdyn, dylai
argraffu ei holi ac ateb.

384
00:18:51,719 --> 00:18:54,510
Ar hyn o bryd rydym yn unig argraffu rhai
cwestiynau ac atebion hardcoded.

385
00:18:54,510 --> 00:18:57,720
Mae angen i chyfrif out-- mae angen
i ofyn i'r cerdyn y maent yn rhoi i ni

386
00:18:57,720 --> 00:19:01,360
beth yw'r cwestiwn ac ateb, a
Yna argraffu hwn allan i'r sgrin.

387
00:19:01,360 --> 00:19:02,470
>> Felly, gallwn wneud hyn yma.

388
00:19:02,470 --> 00:19:06,135
Yn rendrad begin-- gyntaf yn ei wneud yn gyfartal.

389
00:19:06,135 --> 00:19:08,710

390
00:19:08,710 --> 00:19:13,050
Felly, yr hyn yr ydym yn ei wneud yma yw ein bod yn gwybod bod
y cardiau yn cael eu rhoi i ni i eiddo,

391
00:19:13,050 --> 00:19:13,580
iawn?

392
00:19:13,580 --> 00:19:15,930
Mae wedi rhoi i ni fel mewnbwn.

393
00:19:15,930 --> 00:19:19,440
Fel 'i' bron fel
dadleuon i swyddogaeth.

394
00:19:19,440 --> 00:19:22,810
Mae'r cerdyn yn ddadl
bron i CardView hwn.

395
00:19:22,810 --> 00:19:25,239
>> Byddwn yn tynnu hynny, ac yn rhoi
i mewn i'r cwestiwn amrywiol.

396
00:19:25,239 --> 00:19:27,280
Gwnewch yn siwr bod yr ateb
at yr ateb amrywiol.

397
00:19:27,280 --> 00:19:31,130
Awgrymiadau bod gerdyn i'w ateb.

398
00:19:31,130 --> 00:19:35,072
Ac yn awr ein bod yn cael y rhain,
yn lle argraffu allan y testun,

399
00:19:35,072 --> 00:19:37,030
rydym yn mynd i'w hargraffu
beth bynnag y maent yn rhoi i ni.

400
00:19:37,030 --> 00:19:43,580
>> Felly, mae hyn stuff-- felly rydym yn mynd
i ddiffodd Cwestiwn Ateb.

401
00:19:43,580 --> 00:19:46,380
Gadewch i ni weld a yw hyn yn gweithio.

402
00:19:46,380 --> 00:19:52,800
Cool, felly gadewch i ni gamu trwyddo
un mwy o amser yn unig i fod yn sicr.

403
00:19:52,800 --> 00:20:00,470
>> Felly fy ngherdyn yn wrthrych cerdyn, ac yr ydym yn
yn rhoi y cerdyn at y app.

404
00:20:00,470 --> 00:20:04,790
Ac mae'r app yn mynd i gymryd y
cerdyn ac yn ei roi i'r CardView.

405
00:20:04,790 --> 00:20:09,190
Ac mae CardView hwn yn dweud, os ydych
rhoi unrhyw wrthrych flashcard mi,

406
00:20:09,190 --> 00:20:11,920
'N annhymerus' argraffu ei gwestiwn
ac mae ei ateb, dde?

407
00:20:11,920 --> 00:20:14,590
>> Felly, beth y gallwn ei wneud yw y gallaf
anfon y cod hwn, y cyntaf

408
00:20:14,590 --> 00:20:16,580
fel 10 llinell o fy cod, i fy ffrind.

409
00:20:16,580 --> 00:20:18,820
Gallai ymgorffori mewn
ei gais ei hun.

410
00:20:18,820 --> 00:20:27,200
Ac ar yr amod ei fod yn gwneud yr un peth,
fel cerdyn CardView hafal hyn,

411
00:20:27,200 --> 00:20:30,580
ar yr amod ei fod yn greodd y CardView
ac a'i rhoddes yr wybodaeth gywir,

412
00:20:30,580 --> 00:20:31,987
gallai olygu ei gerdyn ei hun.

413
00:20:31,987 --> 00:20:34,320
Ac felly y modd hwn, mae'n wir yn
ffordd oera i chi adeiladu

414
00:20:34,320 --> 00:20:35,906
cydrannau sy'n defnyddio ei gilydd, dde?

415
00:20:35,906 --> 00:20:38,280
Mae'r cerdyn hwn, gallwn i gyhoeddi
CardView hon ar y rhyngrwyd,

416
00:20:38,280 --> 00:20:39,790
a byddai pobl yn gallu ei ddefnyddio.

417
00:20:39,790 --> 00:20:45,070
Felly y bôn, mae o fel un o'r
swyddogaethau safonol yn y llyfrgell C.

418
00:20:45,070 --> 00:20:47,280
>> Mae'n swyddogaeth lle
rhywun wedi ei ysgrifennu.

419
00:20:47,280 --> 00:20:48,419
Rydych yn rhoi mewnbwn penodol.

420
00:20:48,419 --> 00:20:49,710
Bydd yn cynhyrchu allbwn penodol.

421
00:20:49,710 --> 00:20:50,890
Nid ydych yn poeni sut y mae'n gweithio yn fewnol.

422
00:20:50,890 --> 00:20:53,790
Cyn belled ag y byddwch yn rhoi hawl
mewnbwn, bydd yn gwneud y cynnyrch cywir.

423
00:20:53,790 --> 00:20:57,850
>> A gall cydran fod yn
meddwl am yr un ffordd.

424
00:20:57,850 --> 00:21:00,280
Mae'r CardView yn debyg
swyddogaeth llyfrgell.

425
00:21:00,280 --> 00:21:03,400
Os byddwch yn rhoi rhywfaint o gerdyn
fel eiddo, mae'n chi helpu

426
00:21:03,400 --> 00:21:05,095
argraffwch cynnwys y cerdyn.

427
00:21:05,095 --> 00:21:16,820
Fel os byddaf yn newid fy ngherdyn i
yn lle hynny fod fel yr hyn sy'n 5 ynghyd â 37,

428
00:21:16,820 --> 00:21:19,210
bydd yn rhoi'r wybodaeth ddiweddaraf yn unol â hynny.

429
00:21:19,210 --> 00:21:21,955
Felly, dim ond drwy newid y mewnbwn,
mae'n mynd allbwn penodol.

430
00:21:21,955 --> 00:21:24,830
Felly, gallwch chi feddwl am gydrannau bron
fel swyddogaethau yn y modd hwn, a oedd yn

431
00:21:24,830 --> 00:21:25,920
gallwch roi at ei gilydd.

432
00:21:25,920 --> 00:21:29,440
Byddwch yn cael mewnbwn, fel CardView hon
fel mewnbwn, byddwch yn cael allbwn.

433
00:21:29,440 --> 00:21:31,900
Yn yr achos hwn, allbwn yn y HTML.

434
00:21:31,900 --> 00:21:34,404
Gwneud synnwyr hyd yn hyn?

435
00:21:34,404 --> 00:21:36,890
Cool, felly unwaith eto, eiddo
sut y gallwch chi drosglwyddo gwybodaeth

436
00:21:36,890 --> 00:21:40,900
i mewn ac allan o gydrannau.

437
00:21:40,900 --> 00:21:42,740
>> Iawn, felly gadewch i ni wneud hyn
beth rhyngweithiol.

438
00:21:42,740 --> 00:21:44,450
Ar hyn o bryd mae'n fath o ddiflas.

439
00:21:44,450 --> 00:21:45,520
Beth yw [Anghlywadwy]?

440
00:21:45,520 --> 00:21:48,210
Gallwch argraffu rhai allan,
ond dyna i gyd y gall ei wneud.

441
00:21:48,210 --> 00:21:51,550
>> Felly gadewch i ni fynd yn ôl at y
hen gwestiwn yn unig am y tro.

442
00:21:51,550 --> 00:21:54,405
Iawn, felly ar hyn o bryd cydrannau hyn
yn ddiflas gan fod yr holl maent yn ei wneud,

443
00:21:54,405 --> 00:21:55,030
eu bod yn cael mewnbwn.

444
00:21:55,030 --> 00:21:56,100
Maent yn gwneud cynnyrch, dde?

445
00:21:56,100 --> 00:21:57,049
Dyna fath o ddiflas.

446
00:21:57,049 --> 00:21:59,090
Rydym am gael ein
cydrannau i allu cael

447
00:21:59,090 --> 00:22:02,150
rhyw fath o gyflwr mewnol,
fel cofio rhywbeth.

448
00:22:02,150 --> 00:22:05,320
>> Ar gyfer cerdyn fflach, ar gyfer
enghraifft, pa fath o wladwriaeth

449
00:22:05,320 --> 00:22:07,550
efallai y byddwch am i
cofiwch am cerdyn fflach?

450
00:22:07,550 --> 00:22:09,740
Beth statws dros dro
efallai y byddwch am gofio

451
00:22:09,740 --> 00:22:12,491
ar gyfer cerdyn fflach mewn app cerdyn fflach?

452
00:22:12,491 --> 00:22:13,990
GYNULLEIDFA: Boed yn cael ei flipped?

453
00:22:13,990 --> 00:22:14,990
Neel Mehta: Yeah, ar y dde.

454
00:22:14,990 --> 00:22:17,665
Felly efallai y byddwch am gadw
golwg ar a ydych yn wynebu i fyny neu maent

455
00:22:17,665 --> 00:22:19,100
byddwch yn eu hwynebu i lawr ar y cerdyn.

456
00:22:19,100 --> 00:22:23,420
Ar Facebook, er enghraifft, byddech
eisiau cofio ble yn y porthiant newyddion

457
00:22:23,420 --> 00:22:25,870
ydych chi neu hoffech pwy sydd proffil
ydych chi'n ei wneud ar hyn o bryd.

458
00:22:25,870 --> 00:22:30,127
>> Ar Messenger, fel beth destun yr ydych
teipiwch yn y blwch mewnbynnu, dde?

459
00:22:30,127 --> 00:22:31,710
Os byddwch yn adnewyddu'r dudalen, bydd yn mynd i ffwrdd.

460
00:22:31,710 --> 00:22:32,793
Ond nid ydych yn wir yn poeni.

461
00:22:32,793 --> 00:22:33,770
Dim ond dros dro.

462
00:22:33,770 --> 00:22:34,548
Yeah?

463
00:22:34,548 --> 00:22:36,152
>> GYNULLEIDFA: [Anghlywadwy]

464
00:22:36,152 --> 00:22:38,360
Neel Mehta: Fel fflach
cerdyn, fel y gallwch fod yn gweld

465
00:22:38,360 --> 00:22:40,290
yr ochr cwestiwn neu ochr ateb?

466
00:22:40,290 --> 00:22:41,070
>> GYNULLEIDFA: OK.

467
00:22:41,070 --> 00:22:43,270
>> Neel Mehta: Fel
dwy-ochrog cerdyn fflach, dde?

468
00:22:43,270 --> 00:22:46,370
Yeah, felly rydych am ei
cael syniad hwn o nawr

469
00:22:46,370 --> 00:22:50,370
Mae gen i briodweddau, sydd fel mewnbwn,
ond wladwriaeth, sy'n yn un dros dro, UH,

470
00:22:50,370 --> 00:22:51,839
ble ydych ar y dudalen, dde?

471
00:22:51,839 --> 00:22:54,380
Unwaith eto, yr wyf yn dweud yn Facebook
Cennad, yr wyf wedi hoffi pa berson

472
00:22:54,380 --> 00:22:56,550
ydych yn edrych ar Facebook
neu pwy yw proffil, dde?

473
00:22:56,550 --> 00:22:58,030
>> Mae hyn yn dim ond dros dro.

474
00:22:58,030 --> 00:23:01,200
Mae'n bwysig i ddangos y defnyddiwr
beth sy'n digwydd, ond adnewyddu'r dudalen.

475
00:23:01,200 --> 00:23:02,250
Nid oes llawer o bwys.

476
00:23:02,250 --> 00:23:04,530
Felly mae'n gyflwr dros dro,
felly rydym i gyd yn ei wladwriaeth.

477
00:23:04,530 --> 00:23:06,250
>> Felly, unwaith eto, mae wladwriaeth a phropiau.

478
00:23:06,250 --> 00:23:09,084
Propiau yn mewnbwn a roddir
oddi wrth eich ffynhonnell ddata.

479
00:23:09,084 --> 00:23:10,250
Wladwriaeth yn union fel ddiffygion.

480
00:23:10,250 --> 00:23:13,700
Mae'n union fel pethau sy'n
yn gwneud y peth rhyngweithiol.

481
00:23:13,700 --> 00:23:17,720
>> Felly, yn ein CardView-- gadewch i ni gael
ein CardView-- felly roedd yn braf.

482
00:23:17,720 --> 00:23:21,420
Yr hyn yr ydym yn mynd i wneud yma, rydym yn mynd
i gyffwrdd CardView a dim ond CardView.

483
00:23:21,420 --> 00:23:25,105
Ac felly fy ffrind a gafodd hyn, maent yn
Ni fyddai sylwi ar unrhyw wahaniaeth.

484
00:23:25,105 --> 00:23:27,230
Ni fyddai'n rhaid iddynt newid
unrhyw un eu cod eu hunain,

485
00:23:27,230 --> 00:23:29,410
ond byddent yn gweld eu
CardView got souped i fyny.

486
00:23:29,410 --> 00:23:31,270
Mae hynny'n rhan neis am gydrannau.

487
00:23:31,270 --> 00:23:35,290
>> Iawn, felly yn ein CardView, gadewch i ni geisio a
cadw golwg ar a ydym ni'n raddol i fyny

488
00:23:35,290 --> 00:23:36,560
neu wyneb i lawr.

489
00:23:36,560 --> 00:23:40,480
Yn React rydym yn gwneud hyn drwy yn gyntaf
gan nodi'r wladwriaeth cychwynnol.

490
00:23:40,480 --> 00:23:42,070
O ble y cerdyn yn dechrau?

491
00:23:42,070 --> 00:23:48,480
>> Felly fod yn swyddogaeth o'r enw getInitialState
weithredu, ac yn dychwelyd gwrthrych.

492
00:23:48,480 --> 00:23:53,310
Mae'r gwrthrych yn cynnwys rhywfaint o wladwriaeth, a
cyflwr yn unig yw pâr-werth allweddol.

493
00:23:53,310 --> 00:23:56,950
Fel yn cyfarwyddo, mae gennych allwedd a
gwerth, mae gennych fel enw i yw llinyn.

494
00:23:56,950 --> 00:24:01,410
>> Yn yr achos hwn, gadewch i ni ddweud blaen yn wir.

495
00:24:01,410 --> 00:24:03,760
Mae hyn yn dweud bod gennym wladwriaeth.

496
00:24:03,760 --> 00:24:06,570
Un elfen o'r wladwriaeth
yn nodwedd o'r enw flaen.

497
00:24:06,570 --> 00:24:09,649
[Anghlywadwy], felly yn ddiofyn,
rydym yn yn y flaen y cerdyn,

498
00:24:09,649 --> 00:24:11,440
a gallwn newid hyn
wrth i ni troi y cerdyn.

499
00:24:11,440 --> 00:24:13,380
Gwneud synnwyr?

500
00:24:13,380 --> 00:24:18,190
>> Iawn, felly yn rendro, ar hyn o bryd, rydym yn
gan ddangos y cwestiwn a'r ateb.

501
00:24:18,190 --> 00:24:20,860
Nawr beth ddylem ei wneud
yn dangos y cwestiwn

502
00:24:20,860 --> 00:24:24,370
os ydym ar flaen y cerdyn, felly
yr ateb yw i gefn y cerdyn.

503
00:24:24,370 --> 00:24:26,850
Dyna pam eich bod i gyd yn gwneud
y cerdyn rhyngweithiol.

504
00:24:26,850 --> 00:24:28,100
Felly gadewch i ni geisio ac i hyn yma.

505
00:24:28,100 --> 00:24:31,600

506
00:24:31,600 --> 00:24:33,620
Wel, yn gyntaf dim ond yn gwneud amrywiol.

507
00:24:33,620 --> 00:24:37,790
Gallwn ofyn yn awr this.state.front.

508
00:24:37,790 --> 00:24:42,010
Rydym yn cael mynediad datgan yr un yr ydym yn
propiau mynediad, felly this.state.front.

509
00:24:42,010 --> 00:24:45,870
>> Os ydym yn blaen, yna testun
yw this.props.card.question.

510
00:24:45,870 --> 00:24:48,777

511
00:24:48,777 --> 00:24:51,360
Os ein bod ar flaen y
cerdyn, rydyn ni'n mynd i geisio chrafangia

512
00:24:51,360 --> 00:24:52,485
y cwestiwn oddi wrth y cerdyn.

513
00:24:52,485 --> 00:24:54,782

514
00:24:54,782 --> 00:24:57,240
Fel arall, os ydym ar y cefn
y cerdyn, beth ydym yn ei wneud?

515
00:24:57,240 --> 00:25:01,830

516
00:25:01,830 --> 00:25:02,750
>> GYNULLEIDFA: Yr ateb?

517
00:25:02,750 --> 00:25:05,041
>> Neel Mehta: Yep, felly destun
yn dychwelyd this.props.card.answer.

518
00:25:05,041 --> 00:25:08,472

519
00:25:08,472 --> 00:25:10,930
Ond os byddwch yn sylwi, rydym yn defnyddio
y wladwriaeth i wneud penderfyniad

520
00:25:10,930 --> 00:25:14,420
oherwydd erbyn hyn y gydran
Bydd yn edrych yn wahanol

521
00:25:14,420 --> 00:25:16,710
seiliedig oddi sut mae'r rhain yn rhyngweithio ag ef.

522
00:25:16,710 --> 00:25:20,355
Felly, yn lle argraffu hwn,
byddwn yn jyst argraffwch y testun.

523
00:25:20,355 --> 00:25:25,270

524
00:25:25,270 --> 00:25:28,650
Cool, felly, yn awr, fel y gwelwch,
rydym yn gweld dim ond y cwestiwn.

525
00:25:28,650 --> 00:25:37,720
Ac os byddaf yn newid y cyflwr yma â llaw
i flaen yn ffug rydym yn cael 42 yn ôl.

526
00:25:37,720 --> 00:25:39,720
>> Felly, unwaith eto, yr elfen hon
Mae ei gyflwr ei hun.

527
00:25:39,720 --> 00:25:43,440
Fel botwm yn gwybod a yw
mae wedi cael ei wasgu neu beidio,

528
00:25:43,440 --> 00:25:46,080
y peth hyn yn gwybod beth sydd ar
y blaen neu ar y cefn.

529
00:25:46,080 --> 00:25:48,320
Yn ddiofyn, 'i' ar y tu blaen.

530
00:25:48,320 --> 00:25:50,840
Ac yna os yw'n ar y tu blaen,
byddwn yn argraffu'r cwestiwn.

531
00:25:50,840 --> 00:25:53,106
Os yw'n ar y cefn, yr ydym chi helpu
argraffu'r yr ateb.

532
00:25:53,106 --> 00:25:54,980
Felly, unwaith eto, mae'r wybodaeth
o ystyried yr un fath.

533
00:25:54,980 --> 00:25:59,090
'I jyst yn edrych yn wahanol
yn seiliedig ar sut yr ydych rhaglennu hynny.

534
00:25:59,090 --> 00:26:02,670
Felly, er enghraifft, Facebook Messenger,
hyd yn oed os ydych yn cael yr un ffynhonnell data,

535
00:26:02,670 --> 00:26:05,170
gallai edrych yn wahanol
oherwydd bod y cyflwr yn wahanol.

536
00:26:05,170 --> 00:26:08,421
Rydych yn edrych ar
Neges person gwahanol yn.

537
00:26:08,421 --> 00:26:10,930
>> Iawn, felly mae hyn i gyd yn dda ac
da, ond yn awr yr hyn sydd mewn gwirionedd

538
00:26:10,930 --> 00:26:15,940
yn ein gwneud yn gallu newid, boed
ein cerdyn yn blaen neu gefn.

539
00:26:15,940 --> 00:26:19,010
Gallwn wneud hyn drwy ychwanegu fflip
botwm, botwm i'r cerdyn sy'n

540
00:26:19,010 --> 00:26:22,950
Bydd troi y cerdyn os yw'n [Anghlywadwy].

541
00:26:22,950 --> 00:26:31,770
Felly gadewch i ni ychwanegu botwm yma, mae hyn yn
Bydd botwm, a botwm hwn yn dweud troi.

542
00:26:31,770 --> 00:26:35,650
>> Ac felly ar hyn o bryd, mae'n
nid yw'n gwneud unrhyw beth.

543
00:26:35,650 --> 00:26:37,075
'I jyst yn edrych yn neis.

544
00:26:37,075 --> 00:26:43,650
Yr hyn y gallwn ei wneud yw y gallwn ychwanegu clic
triniwr, onClick hafal this.flip,

545
00:26:43,650 --> 00:26:44,820
a byddwn yn diffinio fflip yn nes ymlaen.

546
00:26:44,820 --> 00:26:47,120
Ond yn y bôn, onClick
yn swyddogaeth sy'n

547
00:26:47,120 --> 00:26:48,675
cael ei alw pan fydd y defnyddiwr yn clicio arno.

548
00:26:48,675 --> 00:26:52,330
>> Felly, bydd y botwm yn gwybod
pan mae wedi cael ei glicio.

549
00:26:52,330 --> 00:26:54,750
Mynd mae wedi cael ei glicio,
bydd yn troi y cerdyn.

550
00:26:54,750 --> 00:26:58,382
Mae'n fath o fel eich
guy darparu pizza.

551
00:26:58,382 --> 00:27:01,590
Ydych chi fel, iawn, pryd bynnag y bydd rhywun
yn galw i mi, 'n annhymerus' yn cyflwyno pizza, dde?

552
00:27:01,590 --> 00:27:03,420
>> Rydych yn cofrestru gwrandäwr hwn.

553
00:27:03,420 --> 00:27:04,530
Rydych yn gwrando ar gyfer digwyddiad.

554
00:27:04,530 --> 00:27:07,657
Rydych yn cael eu galw, a phan fydd y
digwyddiad yn digwydd, byddwch yn gwneud rhywbeth.

555
00:27:07,657 --> 00:27:08,240
Byddwch yn cael pizza.

556
00:27:08,240 --> 00:27:11,480
Yn yr achos hwn, pan fyddwch yn
glicio, byddwch yn troi y cerdyn.

557
00:27:11,480 --> 00:27:14,560
>> Ac felly mae angen i ni ddiffinio
swyddogaeth a fydd yn troi y cerdyn,

558
00:27:14,560 --> 00:27:17,930
felly byddwn yn ysgrifennu bod hawl
yma, troi swyddogaeth.

559
00:27:17,930 --> 00:27:20,850

560
00:27:20,850 --> 00:27:23,680
Ac felly beth ydych chi'n meddwl y bydd troi yn ei wneud?

561
00:27:23,680 --> 00:27:27,180
Unwaith eto mae hyn a elwir yn cael pryd
rydym yn cliciwch y botwm troi.

562
00:27:27,180 --> 00:27:29,406
Beth ddylai'r fflip swyddogaeth yn ei wneud?

563
00:27:29,406 --> 00:27:34,136
>> GYNULLEIDFA: Newid this.state.front
o yn wir i ffug, ffug i'r gwir.

564
00:27:34,136 --> 00:27:38,420
>> Neel Mehta: Yep, felly cymerwch beth bynnag
this.front yw-- y cyflwr blaen yn.

565
00:27:38,420 --> 00:27:40,930
Cymerwch y wladwriaeth blaen, os
mae'n wir, yn ei gwneud yn ffug.

566
00:27:40,930 --> 00:27:42,530
Os yw'n anwir, yn ei gwneud yn wir, dde?

567
00:27:42,530 --> 00:27:45,330
Felly gadewch i ni geisio hynny.

568
00:27:45,330 --> 00:27:48,240
>> Ni allwch newid wladwriaeth
dim ond drwy wneud this.state.

569
00:27:48,240 --> 00:27:50,380
Ni allwch wneud hyn.

570
00:27:50,380 --> 00:27:52,030
Ni allwch wneud hynny.

571
00:27:52,030 --> 00:27:55,810
Rhaid i chi ddefnyddio swyddogaeth
Gelwir this.setState.

572
00:27:55,810 --> 00:28:03,230
>> Felly, gallwch ddweud this.setState blaen
colon lle mae hyn, unwaith eto, mae'r ebychnod

573
00:28:03,230 --> 00:28:04,330
pwynt yn golygu y gwrthwyneb.

574
00:28:04,330 --> 00:28:07,420
Amcana os yw hyn. state.front
yn wir, bydd yn troi ffug.

575
00:28:07,420 --> 00:28:09,170
Felly byddwn yn gosod y wladwriaeth
o wir at anwir.

576
00:28:09,170 --> 00:28:11,430
Os yw'n anwir, yr ydym chi helpu
ei osod yn anghywir i gwir.

577
00:28:11,430 --> 00:28:17,210
>> Dim ond yn sylwi ein bod yn gosod ac yn cael ychydig yn
yn wahanol, ac felly gadewch i ni geisio hyn.

578
00:28:17,210 --> 00:28:18,675
Bada Bing, edrych ar hyn.

579
00:28:18,675 --> 00:28:21,810
Mae'r botwm troi yn awr yn
newid y blaen i'r cefn wladwriaeth.

580
00:28:21,810 --> 00:28:24,990
>> Ac felly dyma ble byddwch yn gweld
ychydig bach o hud React.

581
00:28:24,990 --> 00:28:28,420
Fel yr ydym byth yn dweud ei fod i ail-rendro.

582
00:28:28,420 --> 00:28:30,910
Rydym byth yn dweud ei ail-lunio unrhyw beth.

583
00:28:30,910 --> 00:28:32,630
Os ydych chi'n gwneud hyn
heb React, byddech yn

584
00:28:32,630 --> 00:28:34,588
wedi canlynol-- hoffi pan fydd y
botwm troi ei glicio,

585
00:28:34,588 --> 00:28:37,290
byddai'n rhaid i chi roi gwybod i
llaw ail-rendro, dde?

586
00:28:37,290 --> 00:28:43,050
>> React yn wir yn oeri mewn, os ydych
roi cynnig wladwriaeth ac eiddo penodol,

587
00:28:43,050 --> 00:28:45,760
bydd bob amser rendrad
yr un peth yn union.

588
00:28:45,760 --> 00:28:48,690
Ac felly pan fyddwn byth ein bod yn newid
y wladwriaeth a'r eiddo,

589
00:28:48,690 --> 00:28:50,819
adweithio newydd ail-gwneud yr holl beth.

590
00:28:50,819 --> 00:28:52,860
Mae'n gwybod bod yna
un-i-un ohebiaeth

591
00:28:52,860 --> 00:28:57,270
rhwng wladwriaeth a paramedr a HTML.

592
00:28:57,270 --> 00:29:00,110
Felly, pryd bynnag y naill neu'r llall o'r rhai a
newidiadau erbyn trwy wladwriaeth set,

593
00:29:00,110 --> 00:29:03,750
bydd yn newid sut y mae'r
cyflog yn cael ei ail-rendro.

594
00:29:03,750 --> 00:29:06,650
Ac felly y bôn React yn debyg
aros i chi i newid.

595
00:29:06,650 --> 00:29:09,870
>> Pryd bynnag y mae'n newid rhywbeth,
bydd yn ail-wneud y dudalen gyfan.

596
00:29:09,870 --> 00:29:12,480
Ac os yw'n swnio'n aneffeithlon,
'i' oherwydd byddai'n,

597
00:29:12,480 --> 00:29:15,050
ond yn ymateb yn defnyddio beth
a elwir yn DOM Cysgodol.

598
00:29:15,050 --> 00:29:19,950
Yn hytrach na darlunio y dudalen yn uniongyrchol, mae'n
cadw'r goeden HTML rhithwir yn y cof.

599
00:29:19,950 --> 00:29:23,620
>> Rydych yn gwybod, HTML yn debyg i goeden,
fel strwythur data hierarchaidd.

600
00:29:23,620 --> 00:29:28,990
Mae'n cadw goeden ffug mewn cof,
a pryd bynnag y byddwch yn diweddaru'r dudalen,

601
00:29:28,990 --> 00:29:31,940
bydd yn tynnu ffug arall
coed, a bydd yn cyfrifo'r

602
00:29:31,940 --> 00:29:35,120
beth yn newid mae angen iddo wneud y
dudalen i wneud y ddwy goeden cyfartal.

603
00:29:35,120 --> 00:29:38,540
Felly y bôn, mae'n fwy neu lai
ail-renders llawer.

604
00:29:38,540 --> 00:29:41,540
Ac yna dim ond yn hoffi newid y
dudalen yn tweaks bach yn ôl yr angen,

605
00:29:41,540 --> 00:29:44,240
felly mae'n iawn, iawn, yn effeithlon iawn.

606
00:29:44,240 --> 00:29:46,970
>> Felly y bôn React bydd
pryd bynnag y byddwch yn newid rhywbeth,

607
00:29:46,970 --> 00:29:49,010
bydd yn ail-wneud y dudalen bron.

608
00:29:49,010 --> 00:29:52,830
Bydd yn chyfrif i maes beth sydd angen iddynt i mi
newid i wneud y dudalen go iawn yn adlewyrchu

609
00:29:52,830 --> 00:29:55,602
y dudalen rhithwir, a bydd yn gwneud hynny.

610
00:29:55,602 --> 00:29:56,560
Dyna'r DOM rhithwir.

611
00:29:56,560 --> 00:29:59,350
Mae'n un o'r mwyaf
nodweddion React.

612
00:29:59,350 --> 00:30:00,880
>> A yw hynny'n gwneud synnwyr?

613
00:30:00,880 --> 00:30:01,540
Unrhyw gwestiynau?

614
00:30:01,540 --> 00:30:02,040
Yeah?

615
00:30:02,040 --> 00:30:05,568

616
00:30:05,568 --> 00:30:08,969
>> GYNULLEIDFA: Sut mae
cymharu o hyd i'r MVC

617
00:30:08,969 --> 00:30:10,760
ein bod yn siarad am
cyn i adnoddau tebyg.

618
00:30:10,760 --> 00:30:13,527
>> Neel Mehta: Yeah, y cwestiwn
yw sut mae'n cymharu â MVC?

619
00:30:13,527 --> 00:30:14,610
Gofynasoch am adnoddau.

620
00:30:14,610 --> 00:30:16,445
Wel, gadewch i ni siarad am y ffordd y mae'n gweithredu.

621
00:30:16,445 --> 00:30:18,190
>> Yn MVC, byddech yn diweddaru'r model.

622
00:30:18,190 --> 00:30:20,560
Yn yr achos hwn byddai gennym fodel cerdyn.

623
00:30:20,560 --> 00:30:24,540
Byddai'r olygfa yn cael y
botwm troi, a rheoli

624
00:30:24,540 --> 00:30:26,310
byddai'n rhaid i'r swyddogaeth troi.

625
00:30:26,310 --> 00:30:28,450
Felly byddai'r olygfa yn dweud wrth y
rheolwr i troi troi.

626
00:30:28,450 --> 00:30:30,370
Byddai Flip dweud wrth y
model i newid, dde?

627
00:30:30,370 --> 00:30:33,915
>> Ac felly pan fyddwch yn gwneud MVC, chi
gwrando am y model i newid,

628
00:30:33,915 --> 00:30:37,150
ac yr ydych yn ail-wneud y farn yn unol â hynny.

629
00:30:37,150 --> 00:30:39,210
Neu oes gen ti i yn hoffi
yn cael y rheolwr.

630
00:30:39,210 --> 00:30:42,418
Arhoswch i'r model i newid, ac yna
dewis a dethol yn rhan o fel peth

631
00:30:42,418 --> 00:30:44,032
i newid.

632
00:30:44,032 --> 00:30:45,740
Yma, mae gennym un peth,
ond mewn app mawr,

633
00:30:45,740 --> 00:30:48,510
mae'n rhaid i chi ei hoffi gofio beth
y newid ym mhob un lle,

634
00:30:48,510 --> 00:30:50,290
felly mae'n ychydig yn blino.

635
00:30:50,290 --> 00:30:53,670
Ac felly React yn braf
oherwydd ei fod wedi Dom Cysgodol.

636
00:30:53,670 --> 00:30:56,040
Gall fforddio yn unig
ailysgrifennu'r y peth cyfan.

637
00:30:56,040 --> 00:30:58,680
Nid oes rhaid i Chi ddetholus
fel dyfalu beth i ddiweddaru.

638
00:30:58,680 --> 00:31:02,186
>> Ar Facebook os ydych yn hoffi
cael neges newydd, yn MVC,

639
00:31:02,186 --> 00:31:04,060
byddai'n rhaid i chi gofio,
OK, yn newid y pethau

640
00:31:04,060 --> 00:31:06,260
ar frig y
tudalen, yr eicon neges.

641
00:31:06,260 --> 00:31:08,290
Hefyd pop ffenestr newydd ar y gwaelod.

642
00:31:08,290 --> 00:31:10,070
Hefyd, gwnewch yn beth newydd yn y ffenestr.

643
00:31:10,070 --> 00:31:11,060
Hefyd yn chwarae sain.

644
00:31:11,060 --> 00:31:13,150
>> Mae hynny'n llawer o bethau
mynd allan ar yr un pryd.

645
00:31:13,150 --> 00:31:15,320
Ac felly os nad ydych yn ei wneud
fod â Dom Cysgodol, byddech yn

646
00:31:15,320 --> 00:31:18,740
rhaid i ni wneud hynny â llaw oherwydd bod
nad ydych yn gallu cael gwared ar y dudalen gyfan.

647
00:31:18,740 --> 00:31:21,430
Ni allwch fforddio, felly mae gennych
i newid pob peth â llaw,

648
00:31:21,430 --> 00:31:23,990
sydd mewn gwirionedd yn blino yn MVC.

649
00:31:23,990 --> 00:31:27,640
>> Felly, er mwyn bod yn
ddarbodus, maent yn ddetholus

650
00:31:27,640 --> 00:31:30,750
diweddaru'r dudalen, sydd yn
effeithlon, ond hefyd yn blino.

651
00:31:30,750 --> 00:31:34,002
Yn React, oherwydd y Cysgodol
Dom, byddwch yn cael y ddau beth am ddim.

652
00:31:34,002 --> 00:31:35,710
Mae'n effeithlon oherwydd
y Dom Cysgodol.

653
00:31:35,710 --> 00:31:37,210
Mae'r tagfeydd yn diweddaru'r dudalen.

654
00:31:37,210 --> 00:31:40,292
Dyw hi ddim yn gwneud y trin coed.

655
00:31:40,292 --> 00:31:41,250
Byddwch yn cael y effeithlonrwydd.

656
00:31:41,250 --> 00:31:45,420
Byddwch hefyd yn cael y rhwyddineb defnydd oherwydd
os ydych yn unig ailysgrifennu'r dudalen gyfan,

657
00:31:45,420 --> 00:31:48,970
ond 'ch jyst yn gwybod, i gyd yn iawn, y pethau
yn mynd i fod ar y dudalen rhywle.

658
00:31:48,970 --> 00:31:51,180
Gallai fod yn mewn lle gwahanol, ond
mae'n mynd i fod ar y dudalen, dde?

659
00:31:51,180 --> 00:31:52,860
Felly, ydych newydd ei ail-rendro
y peth cyfan bron,

660
00:31:52,860 --> 00:31:55,540
ac efallai y byddwch yn gwneud cwpl
newidiadau i'r dudalen ei hun.

661
00:31:55,540 --> 00:31:57,850
>> Felly, unwaith eto, yn MVC chi
Byddai'n rhaid i ddewis

662
00:31:57,850 --> 00:32:01,840
rhwng rhwyddineb defnydd ac effeithlonrwydd,
a React, byddwch yn cael y ddau.

663
00:32:01,840 --> 00:32:04,020
Felly mae'n well.

664
00:32:04,020 --> 00:32:05,220
Gwneud synnwyr?

665
00:32:05,220 --> 00:32:06,676
Solid.

666
00:32:06,676 --> 00:32:12,080
>> Iawn, felly gadewch i ni weld beth am siarad
ychydig am gam 4,

667
00:32:12,080 --> 00:32:14,740
sut y gallwn ymgorffori cydrannau.

668
00:32:14,740 --> 00:32:16,260
Felly, mae gennym hon ar hyn o bryd.

669
00:32:16,260 --> 00:32:19,420
Rydym wedi ein Ychydig botwm oer.

670
00:32:19,420 --> 00:32:23,157
Gallwn troi yn ôl a
allan, a dyna'r cyfan mae'n ei wneud.

671
00:32:23,157 --> 00:32:24,990
Lets 'ddeud rydym am
cael gydran arall.

672
00:32:24,990 --> 00:32:28,730
Lets 'ddeud dylai ein app cerdyn fflach
yn cynnwys rhestr o'r holl gardiau

673
00:32:28,730 --> 00:32:31,520
sydd gennych, felly mae hynny'n golygu ein bod
Dylai fod elfen arall.

674
00:32:31,520 --> 00:32:32,970
Wel, efallai ei alw'n golwg rhestr.

675
00:32:32,970 --> 00:32:36,200
Gadewch i ni wneud barn rhestr sy'n
cydfodoli gyda'r CardView,

676
00:32:36,200 --> 00:32:39,680
a rhestr hwn weld a CardView
Bydd hoffi gweithio gyda'i gilydd.

677
00:32:39,680 --> 00:32:43,190
A gallwch eu cyfuno
i wneud ein app ar eich cyfer.

678
00:32:43,190 --> 00:32:45,160
>> Felly yn gyntaf, gadewch i ni wneud
cwpl mwy o gardiau cywir.

679
00:32:45,160 --> 00:32:46,370
Gadewch i ni yn dweud, pa gardiau?

680
00:32:46,370 --> 00:32:49,619

681
00:32:49,619 --> 00:32:51,910
Ac yn union fel nad oes gennyf i
diflasu gyda deipio i mewn,

682
00:32:51,910 --> 00:32:53,410
Im 'jyst yn mynd i gopïo o'r fan hon.

683
00:32:53,410 --> 00:33:01,664

684
00:33:01,664 --> 00:33:03,580
Ac felly dwi'n mynd i beidio
rhoi un cerdyn yn unig.

685
00:33:03,580 --> 00:33:06,910
Rydw i'n mynd i roi amrywiaeth o gardiau.

686
00:33:06,910 --> 00:33:10,240
Felly, yn gyntaf y apps
mynd i dorri am y tro.

687
00:33:10,240 --> 00:33:14,717
Mae pob hawl, felly rydym yn mynd i wneud
hyn yn gallu delio cardiau lluosog.

688
00:33:14,717 --> 00:33:17,800
Felly gyntaf, rydym yn mynd i roi, nid
dim ond un cerdyn, ond amrywiaeth o gardiau,

689
00:33:17,800 --> 00:33:18,700
fel rhestr o gardiau.

690
00:33:18,700 --> 00:33:20,980
Ac yn yr achos hwn, mae gennym dri ohonynt.

691
00:33:20,980 --> 00:33:27,280
>> Mae pob hawl, felly felly app yn
mynd i gael cardiau rhestr,

692
00:33:27,280 --> 00:33:29,870
ac mae'n mynd i benderfynu pa
un i ddangos i'r CardView.

693
00:33:29,870 --> 00:33:33,740
Gall y CardView unig
rendro un cerdyn, ond mae'r app

694
00:33:33,740 --> 00:33:37,610
yn cael rhestr o'r holl gardiau, dde?

695
00:33:37,610 --> 00:33:40,820
>> Felly, pan fyddwch yn chyfrif i maes un
cerdyn i roi i CardView,

696
00:33:40,820 --> 00:33:44,660
sut y byddech yn dyfalu efallai y byddwch yn gallu
i wneud penderfyniad ynghylch pa gerdyn

697
00:33:44,660 --> 00:33:47,064
i ddangos?

698
00:33:47,064 --> 00:33:49,980
Er mwyn rhoi awgrym i chi, 'i' dros dro
Byddwch yn edrych ar gerdyn penodol.

699
00:33:49,980 --> 00:33:53,260
Os byddwch yn adnewyddu'r dudalen, wnewch chi helpu
dim ond yn mynd yn ôl at y cerdyn cyntaf.

700
00:33:53,260 --> 00:33:55,464
Mae hynny'n iawn oherwydd ei fod yn dros dro.

701
00:33:55,464 --> 00:33:56,630
Pa dechneg gallem ddefnyddio?

702
00:33:56,630 --> 00:34:02,534

703
00:34:02,534 --> 00:34:08,760
>> GYNULLEIDFA: Gallech wneud newidyn
felly yn union fel chi wedi flaen.

704
00:34:08,760 --> 00:34:11,989
A yw hyn yn wir, gallech
cael cerdyn cyfredol yn dychwelyd 1?

705
00:34:11,989 --> 00:34:14,150
>> Neel Mehta: Yeah, felly rydym yn
am gael wladwriaeth, dde?

706
00:34:14,150 --> 00:34:16,080
Byddech yn defnyddio'r wladwriaeth yn y
cydran at chyfrif i maes

707
00:34:16,080 --> 00:34:17,288
pa gerdyn ydym ni eisiau ei gael.

708
00:34:17,288 --> 00:34:19,290
Fel mae gennym restr o
yr holl gardiau, rydym chi helpu

709
00:34:19,290 --> 00:34:21,630
Defnyddiwch wladwriaeth at chyfrif i maes
un o'r cerdyn cyntaf,

710
00:34:21,630 --> 00:34:23,710
ail gerdyn, trydydd cerdyn, ac yn y blaen.

711
00:34:23,710 --> 00:34:28,760
>> Felly app felly bydd app yn cael
yn cael y swyddogaeth getInitialState,

712
00:34:28,760 --> 00:34:35,020
dychwelyd swyddogaeth getInitialState.

713
00:34:35,020 --> 00:34:39,929
A byddwn yn jyst dweud activeIndex 0.

714
00:34:39,929 --> 00:34:42,889
Felly nawr mae ein app wedi ei gyflwr ei hun.

715
00:34:42,889 --> 00:34:47,179
>> Ac felly yn awr ar rendr, at chyfrif i maes
cerdyn, gadewch i ni dim ond yn mynd i'r casgliad

716
00:34:47,179 --> 00:34:49,969
ac yn mynnu y peth ar y mynegai.

717
00:34:49,969 --> 00:34:53,580
Dewiswch gerdyn this.props.cards cyfartal
this.state.activeIndex.

718
00:34:53,580 --> 00:34:56,469

719
00:34:56,469 --> 00:35:00,162
Felly, fel y gwelwch yma, mae'r propiau a
y wladwriaeth yn mewn gwirionedd yn gweithio gyda'i gilydd.

720
00:35:00,162 --> 00:35:08,990
Felly nawr ein bod wedi ein activeCard,
byddwn yn ei alw'n activeCard,

721
00:35:08,990 --> 00:35:10,470
a gadewch i ni weld os yw hyn yn gweithio.

722
00:35:10,470 --> 00:35:20,320

723
00:35:20,320 --> 00:35:20,820
[Anghlywadwy]

724
00:35:20,820 --> 00:35:41,504

725
00:35:41,504 --> 00:35:44,900
>> O, a oedd yn gamgymeriad testun.

726
00:35:44,900 --> 00:35:45,400
Ah.

727
00:35:45,400 --> 00:35:51,420

728
00:35:51,420 --> 00:35:54,840
>> Cool, yep, felly erbyn hyn roeddem yn ôl
i lle'r oeddem o'r blaen, dde?

729
00:35:54,840 --> 00:35:57,100
Yr un hen raglen ar wahân
Erbyn hyn gallwn gefnogi

730
00:35:57,100 --> 00:35:59,390
rhestr o gardiau, nid un cerdyn yn unig.

731
00:35:59,390 --> 00:36:04,130
Ac yn awr, unwaith eto, os byddwn yn newid y
activeIndex, gallwn fynd 0-1,

732
00:36:04,130 --> 00:36:07,330
a nawr bod ail gerdyn,
ac yna aethom i 0.

733
00:36:07,330 --> 00:36:10,390
Felly dyma newydd
souped-up Fersiwn ein.

734
00:36:10,390 --> 00:36:16,000
>> Iawn, felly nawr gadewch i ni gael golwg rhestr sy'n
dangos yr holl gardiau yn eich rhaglen,

735
00:36:16,000 --> 00:36:19,980
felly byddwn yn gwneud newydd
Gelwir cydran listView.

736
00:36:19,980 --> 00:36:22,155
Gadewch listView hafal react.createClass.

737
00:36:22,155 --> 00:36:32,890

738
00:36:32,890 --> 00:36:38,800
Felly rydym am i rendro gael di-drefn
rhestru gydag eitem rhestr ar gyfer pob cerdyn.

739
00:36:38,800 --> 00:36:41,490
Ac felly mae gennym griw o gardiau.

740
00:36:41,490 --> 00:36:44,990
Rydym am un eitem rhestr
ar gyfer pob cerdyn, dde?

741
00:36:44,990 --> 00:36:47,490
Gallem wneud ar gyfer dolen neu
rhywbeth i wneud eitem rhestr newydd.

742
00:36:47,490 --> 00:36:50,522
Ond y ffordd yr ydych yn ei wneud yn
React, defnyddiwch beth a elwir map.

743
00:36:50,522 --> 00:36:57,150
Map yn offeryn neu swyddogaeth a ddefnyddiwch
hynny ar gyfer pob eitem, yn rhedeg rhywfaint o swyddogaeth,

744
00:36:57,150 --> 00:36:59,510
yn cymryd gwerth dychwelyd, ac
rhoi i'r cefn i chi.

745
00:36:59,510 --> 00:37:06,310
>> Felly, fel enghraifft, mae gennym yr amrywiaeth
1, 2, function-- 3.map ac mae hyn

746
00:37:06,310 --> 00:37:12,120
yn llaw-fer ar gyfer
function-- x arrow x amseroedd x.

747
00:37:12,120 --> 00:37:16,110
Mae hyn yn dweud, ar gyfer pob rhif
yn 1, 2, 3, mynd ag ef.

748
00:37:16,110 --> 00:37:17,800
Cysoni hynny, ac yn rhoi yn ôl.

749
00:37:17,800 --> 00:37:22,090
Felly, beth yn eich barn 1,
2, 3.map x yn mynd i'r x amseroedd

750
00:37:22,090 --> 00:37:25,480
x yn rhoi i chi yn ôl o ystyried
swyddogaeth honno hwn

751
00:37:25,480 --> 00:37:27,680
rhedeg ar bob elfen o'r rhesi.

752
00:37:27,680 --> 00:37:30,837

753
00:37:30,837 --> 00:37:32,190
>> GYNULLEIDFA: 1, 4 9?

754
00:37:32,190 --> 00:37:35,709
>> Neel Mehta: Yep, 1, 4, 9
oherwydd eich bod yn ei wneud 1 gwaith yn 1.

755
00:37:35,709 --> 00:37:36,500
Mae hynny'n rhoi un i chi.

756
00:37:36,500 --> 00:37:37,690
Dyna'r elfen gyntaf.

757
00:37:37,690 --> 00:37:38,530
>> 2 waith 2 yw 4.

758
00:37:38,530 --> 00:37:39,570
Dyna ail elfen.

759
00:37:39,570 --> 00:37:40,310
3 gwaith 3 yw 9.

760
00:37:40,310 --> 00:37:41,540
Dyna un rhan o dair elfen.

761
00:37:41,540 --> 00:37:42,640
Gwneud synnwyr?

762
00:37:42,640 --> 00:37:45,015
Felly map Mae techneg chi
defnyddio yn rhaglenwyr swyddogaethol,

763
00:37:45,015 --> 00:37:48,090
y math newydd o
rhaglennu i wneud rhywbeth

764
00:37:48,090 --> 00:37:50,500
i bob elfen yn eich rhestr.

765
00:37:50,500 --> 00:37:51,970
Ac felly mae hyn yn swnio'n gyfarwydd.

766
00:37:51,970 --> 00:37:53,370
Mae gennym restr o gardiau.

767
00:37:53,370 --> 00:37:56,860
Rydym yn awyddus i gael eitem rhestr ar gyfer pob
un, felly byddwn yn jyst arfer map yma.

768
00:37:56,860 --> 00:38:00,250
Byddwn yn dweud, gadewch hafal rhestr
this.props, cardiau, map.

769
00:38:00,250 --> 00:38:10,580

770
00:38:10,580 --> 00:38:15,070
>> Ac o ystyried cerdyn, felly, rydym yn
mynd i gynhyrchu eitem rhestr

771
00:38:15,070 --> 00:38:17,580
gyda chynnwys ochr y cerdyn ohono.

772
00:38:17,580 --> 00:38:20,660
Gadewch i 'jyst dweud rydym am roi allan
y cardiau cwestiynu hynny card.question.

773
00:38:20,660 --> 00:38:24,990

774
00:38:24,990 --> 00:38:30,649
Felly rhestr hon yn cynnwys
amrywiaeth o LI neu Restr Eitemau

775
00:38:30,649 --> 00:38:32,440
lle mae un rhestr
eitem ar gyfer pob cerdyn,

776
00:38:32,440 --> 00:38:35,150
ac sy'n cynnwys y cwestiwn cardiau.

777
00:38:35,150 --> 00:38:37,640
Gwneud synnwyr?

778
00:38:37,640 --> 00:38:39,450
>> Cool, felly nawr gadewch i ni
mewn gwirionedd print that allan.

779
00:38:39,450 --> 00:38:46,521
Felly, byddwn yn dychwelyd yn ul.

780
00:38:46,521 --> 00:38:49,020
Y tu mewn y rhestr di-drefn,
byddwn yn jyst cadw y rhestr gyfan

781
00:38:49,020 --> 00:38:49,890
eu bod yn rhoi i ni.

782
00:38:49,890 --> 00:38:52,851

783
00:38:52,851 --> 00:38:53,350
Cool.

784
00:38:53,350 --> 00:38:56,060
>> Mae pob hawl, felly, yn awr mae hyn
Rhestr barn gwaith yn unig yn dod o hyd.

785
00:38:56,060 --> 00:38:59,842
Unrhyw gwestiynau am yr olwg rhestr?

786
00:38:59,842 --> 00:39:01,270
Mae gennych griw o gardiau.

787
00:39:01,270 --> 00:39:02,800
Yr ydych yn gwneud eitem rhestr ar gyfer pob cerdyn.

788
00:39:02,800 --> 00:39:05,466
A ydych yn eu rhoi y tu mewn di-drefn
rhestr, ac yr ydych yn rhoi yn ôl.

789
00:39:05,466 --> 00:39:09,410
Felly nawr gadewch i ni weithredu felly rydym yn ymgorffori
tu hon o'n app,

790
00:39:09,410 --> 00:39:14,310
fel y gallwn wneud hyn, rhestr olygfa.

791
00:39:14,310 --> 00:39:17,070
Pa ddadl yr ydym yn pasio restru barn chi?

792
00:39:17,070 --> 00:39:18,320
Pa eiddo ydym yn ei roi?

793
00:39:18,320 --> 00:39:25,111

794
00:39:25,111 --> 00:39:26,860
Cofiwch, os byddwch yn rhoi
ei fod criw o gardiau,

795
00:39:26,860 --> 00:39:29,590
bydd yn gwneud y rhestr
gweld ar gyfer cardiau hynny.

796
00:39:29,590 --> 00:39:32,267
Felly beth y byddem yn pasio
yma fel y ddadl?

797
00:39:32,267 --> 00:39:33,350
GYNULLEIDFA: Mae rhestr o gardiau?

798
00:39:33,350 --> 00:39:37,130
Neel Mehta: Yeah, felly cardiau
hafal this.props.cards, dde?

799
00:39:37,130 --> 00:39:39,850

800
00:39:39,850 --> 00:39:44,370
Ac felly yr unig broblem
yw eich bod dim ond

801
00:39:44,370 --> 00:39:48,600
Trodd un elfen lefel uchaf yn rendr,
felly mae'n rhaid i chi lapio mewn div.

802
00:39:48,600 --> 00:39:49,100
Mae'n rhyfedd.

803
00:39:49,100 --> 00:39:56,190

804
00:39:56,190 --> 00:39:57,530
Felly, gadewch i ni weld os hynny.

805
00:39:57,530 --> 00:40:09,790

806
00:40:09,790 --> 00:40:10,560
A yw hynny'n gweithio?

807
00:40:10,560 --> 00:40:29,774

808
00:40:29,774 --> 00:40:31,030
>> Yep, dyna ni.

809
00:40:31,030 --> 00:40:33,700
Felly, erbyn hyn mae gennym restr
o gardiau ar y gwaelod,

810
00:40:33,700 --> 00:40:36,180
ac yna rydym wedi ein
CardView ei hun ar ei ben,

811
00:40:36,180 --> 00:40:40,486
a fydd yn troi rhwng
y ddwy ochr y cerdyn.

812
00:40:40,486 --> 00:40:42,610
Nawr mae hynny'n gwneud synnwyr sut yr wyf yn gwneud hynny?

813
00:40:42,610 --> 00:40:45,165

814
00:40:45,165 --> 00:40:46,790
Yeah, felly unwaith eto, mae gennym ddau cydrannau.

815
00:40:46,790 --> 00:40:49,666
Mae'r printiau elfen gyntaf
allan bob cerdyn yn y rhestr.

816
00:40:49,666 --> 00:40:50,540
Dyna farn rhestr.

817
00:40:50,540 --> 00:40:54,770
A'r ail gydran
brintiau allan yn union hynny cerdyn.

818
00:40:54,770 --> 00:40:58,840
Os byddwch yn rhoi cynnig cerdyn benodol, mae'n chi helpu
argraffu'r wybodaeth am y cerdyn

819
00:40:58,840 --> 00:41:01,870
ac yn gadael i chi droi yn ôl ac ymlaen.

820
00:41:01,870 --> 00:41:05,850
>> Felly os ydym am, gallwn geisio sgwrs
am ychwanegu rhai nodweddion newydd i hyn.

821
00:41:05,850 --> 00:41:09,482
Fel arall, gallwn ni siarad ychydig yn fwy
am y cyflymder o adweithydd,

822
00:41:09,482 --> 00:41:11,190
neu gallwn ateb
gwestiynau sydd gennych

823
00:41:11,190 --> 00:41:15,050
gan fod y rhain i gyd o rannau craidd
o ymateb yr wyf am siarad am.

824
00:41:15,050 --> 00:41:16,540
Gallwn fynd yn ei flaen.

825
00:41:16,540 --> 00:41:17,590
Gallwn ateb cwestiynau.

826
00:41:17,590 --> 00:41:18,560
Beth bynnag yr ydych ei eisiau.

827
00:41:18,560 --> 00:41:21,694

828
00:41:21,694 --> 00:41:24,205
>> GYNULLEIDFA: A allwch chi ddefnyddio
JSX yn JavaScript normal?

829
00:41:24,205 --> 00:41:27,150
Neu a yw hynny'n rhywbeth y
ddaeth gyda'r [Anghlywadwy]?

830
00:41:27,150 --> 00:41:30,760
>> Neel Mehta: Y cwestiwn yw y gall
ydych yn defnyddio JSX gyda JavaScript normal?

831
00:41:30,760 --> 00:41:32,620
Mae'r ateb yn gadarnhaol.

832
00:41:32,620 --> 00:41:41,070
JSX yn unig yn ffordd o mae'n ei gymryd eich
JavaScript sydd wedi HTML tu mewn iddo,

833
00:41:41,070 --> 00:41:44,215
ac mae'n casglu i mewn i JavaScript sy'n
Nid oes gan HTML tu mewn iddo.

834
00:41:44,215 --> 00:41:47,880
Felly sylwi that-- felly sylwi yma.

835
00:41:47,880 --> 00:41:50,820
Mae hyn yn edrych fel chi wedi hoffi div
a bod gennych bethau tu mewn iddo.

836
00:41:50,820 --> 00:41:54,970
>> Mae hynny'n llunio i JavaScript sy'n
fel cynhyrchu yr un peth.

837
00:41:54,970 --> 00:41:59,590
Amcana hyn rwy'n ei ddweud yw bod
JSX yn unig yw cystrawennol, fel ei fod yn

838
00:41:59,590 --> 00:42:03,530
yn Preprocessor ar gyfer JavaScript lawer
fel PHP yn Preprocessor i HTML.

839
00:42:03,530 --> 00:42:05,490
JSC yn Preprocessor
ar gyfer JavaScript sy'n gadael

840
00:42:05,490 --> 00:42:12,970
eich rhoi HTML tu mewn eich JavaScript.

841
00:42:12,970 --> 00:42:16,425
Ac felly os oes gennych y newidydd cywir
sy'n beth o'r enw [Anghlywadwy],

842
00:42:16,425 --> 00:42:17,300
a fydd yn trawsnewid.

843
00:42:17,300 --> 00:42:19,360
Yr Preprocessor yn iawn,
bydd yn gadael i chi wneud hynny.

844
00:42:19,360 --> 00:42:20,235
>> GYNULLEIDFA: [Anghlywadwy]

845
00:42:20,235 --> 00:42:23,026
Neel Mehta: Nid Fel arfer dim angen i chi
i roi HTML tu mewn JavaScript

846
00:42:23,026 --> 00:42:24,110
oni bai fydd eich gwneud React.

847
00:42:24,110 --> 00:42:27,146
Ond gallwch chi ei wneud beth bynnag.

848
00:42:27,146 --> 00:42:27,645
Yep?

849
00:42:27,645 --> 00:42:29,353
>> GYNULLEIDFA: Yr wyf yn meddwl eich bod
wedi disgrifio React

850
00:42:29,353 --> 00:42:31,970
fel iaith Programing swyddogaethol.

851
00:42:31,970 --> 00:42:35,646
Rydym wedi bod yn dysgu C yn CS50.

852
00:42:35,646 --> 00:42:38,032
A yw C hefyd yn iaith swyddogaethol?

853
00:42:38,032 --> 00:42:39,990
Neel Mehta: Felly, y cwestiwn
yn ymwneud â swyddogaethol

854
00:42:39,990 --> 00:42:43,010
yn erbyn beth arall o'r enw
rhaglennu hanfodol neu weithdrefnol.

855
00:42:43,010 --> 00:42:44,820
Mae dau fath o raglenni poblogaidd.

856
00:42:44,820 --> 00:42:48,550
Mae un ei alw gweithdrefnol, a oedd yn
yn ymwneud fel gwneud gorchmynion,

857
00:42:48,550 --> 00:42:51,510
ac mae un yn swyddogaethol, sy'n gyd
am gael swyddogaethau a chael

858
00:42:51,510 --> 00:42:52,930
mewnbwn ac allbwn o'r rheiny.

859
00:42:52,930 --> 00:42:55,930
React yn batrwm swyddogaethol.

860
00:42:55,930 --> 00:42:58,010
C yn batrwm trefniadol iawn.

861
00:42:58,010 --> 00:43:02,360
>> Ac fel enghraifft, C er enghraifft,
nad ydych yn gwneud y ffordd hon declarative

862
00:43:02,360 --> 00:43:04,390
o wneud y rhaglen, dde?

863
00:43:04,390 --> 00:43:06,826
Mae'n rhaid i chi ddweud, argraffu hwn.

864
00:43:06,826 --> 00:43:07,950
Newid y strwythur data.

865
00:43:07,950 --> 00:43:08,530
Argraffu'r dudalen hon.

866
00:43:08,530 --> 00:43:10,160
Mae'n ymwneud â gorchmynion.

867
00:43:10,160 --> 00:43:12,640
>> Yn React, nid oes
bod llawer o orchmynion.

868
00:43:12,640 --> 00:43:15,145
Mae hyn i gyd am gael
cydrannau rydych roi at ei gilydd.

869
00:43:15,145 --> 00:43:16,300
Maent yn hoffi swyddogaethau.

870
00:43:16,300 --> 00:43:26,360
Mae gennych fel swyddogaeth
Gelwir CardView,

871
00:43:26,360 --> 00:43:28,680
sydd yn swyddogaeth
sydd â mewnbwn, allbwn,

872
00:43:28,680 --> 00:43:30,660
ac felly React i gyd
am athroniaeth hon

873
00:43:30,660 --> 00:43:32,700
i ni am having-- gennych data.

874
00:43:32,700 --> 00:43:34,910
Byddwch yn mynd heibio iddo drwy hyn
algorithm, ac mae'n fe

875
00:43:34,910 --> 00:43:36,800
HTML allbwn sy'n chi
dim ond printiedig y dudalen,

876
00:43:36,800 --> 00:43:39,180
ac felly mae'n rhaid i chi
adeiladu yn dipyn.

877
00:43:39,180 --> 00:43:42,800
>> Felly, i dynnu trosiad i'r hyn
Dywedais o'r blaen, eich bod yn gwybod sut

878
00:43:42,800 --> 00:43:47,050
ar Facebook os ydych yn cael neges,
a ydych yn dewis pa rannau i ddiweddaru,

879
00:43:47,050 --> 00:43:47,882
mae hynny'n trefniadol.

880
00:43:47,882 --> 00:43:48,840
Mae'n hanfodol, dde?

881
00:43:48,840 --> 00:43:49,806
OK, Cawn neges.

882
00:43:49,806 --> 00:43:50,930
Gadewch i ni newid cyfrif yno.

883
00:43:50,930 --> 00:43:52,110
>> Gadewch i pop ffenestr yma.

884
00:43:52,110 --> 00:43:52,780
Gadewch i ni newid cyfrif yno.

885
00:43:52,780 --> 00:43:53,700
Gadewch i ni tynnu hyn yma.

886
00:43:53,700 --> 00:43:55,220
Dyna ddull drefniadol.

887
00:43:55,220 --> 00:44:00,240
>> Dyna beth pethau fel onglog,
Hwb, asgwrn cefn, fframweithiau eraill eu defnyddio.

888
00:44:00,240 --> 00:44:01,200
React yn swyddogaethol.

889
00:44:01,200 --> 00:44:03,324
Mae'n ffordd wahanol iawn
o feddwl am bethau.

890
00:44:03,324 --> 00:44:07,950
Mae'n cymryd y syniad hwn o gadewch i ni gael
swyddogaethau neu algorithmau a fydd chi

891
00:44:07,950 --> 00:44:08,800
rhoi data.

892
00:44:08,800 --> 00:44:11,820
Bydd yn boeri allan yr hyn y mae'n
Dylai fod, ac mae'r cyfrifiadur

893
00:44:11,820 --> 00:44:13,490
Bydd yn gofalu am bwyso allan.

894
00:44:13,490 --> 00:44:15,890
Nid ydych yn trin eich hun.

895
00:44:15,890 --> 00:44:18,470
A yw hynny'n gwneud ychydig o synnwyr?

896
00:44:18,470 --> 00:44:18,970
Yeah?

897
00:44:18,970 --> 00:44:24,180
>> GYNULLEIDFA: Mewn iaith swyddogaethol,
popeth yn digwydd ar yr un pryd?

898
00:44:24,180 --> 00:44:26,800
>> Neel Mehta: Na, mae pethau'n digwydd mewn trefn.

899
00:44:26,800 --> 00:44:29,320
Fel yma mae dal
archebu, ond nid yw'n gwneud

900
00:44:29,320 --> 00:44:32,390
yn digwydd mewn trefn fel
yn cymeradwyo, gorchymyn, gorchymyn.

901
00:44:32,390 --> 00:44:36,459
Mae'n digwydd yn nhrefn
swyddogaeth yn rhoi allbwn chi.

902
00:44:36,459 --> 00:44:37,750
Rhoi hynny ar swyddogaeth arall.

903
00:44:37,750 --> 00:44:39,550
Rhoi hynny i mewn i un arall
swyddogaeth, swyddogaeth arall.

904
00:44:39,550 --> 00:44:41,470
>> Os byddwch yn gwneud CS51, wnewch chi helpu
dysgu rhaglenni swyddogaethol

905
00:44:41,470 --> 00:44:42,886
ychydig y tu allan i gwmpas hyn.

906
00:44:42,886 --> 00:44:45,090
Ond yn y bôn, yr hyn sy'n gwneud
React oer yw nid yn unig

907
00:44:45,090 --> 00:44:46,840
unffordd llif data
a'r Dom rhithwir,

908
00:44:46,840 --> 00:44:48,700
ond hefyd y syniad hwn o
rhaglennu swyddogaethol.

909
00:44:48,700 --> 00:44:51,720
A rhaglennu swyddogaethol yn hawdd iawn
i gyfansoddi a gwneud pethau oer y tu allan i,

910
00:44:51,720 --> 00:44:53,844
ac mae'n hawdd iawn i feddwl
am a rheswm am.

911
00:44:53,844 --> 00:44:55,450
Felly mae'n tynnu da arall o React.

912
00:44:55,450 --> 00:44:58,489

913
00:44:58,489 --> 00:44:59,280
Unrhyw mwy o gwestiynau?

914
00:44:59,280 --> 00:45:02,650

915
00:45:02,650 --> 00:45:03,150
Yeah?

916
00:45:03,150 --> 00:45:06,840
>> GYNULLEIDFA: Um, pam y byddech
defnyddio gadael yn hytrach na var?

917
00:45:06,840 --> 00:45:10,450
>> Neel Mehta: Felly, y cwestiwn yw
pam ydych chi'n defnyddio gadael yn lle var?

918
00:45:10,450 --> 00:45:13,220
Mae hyn yn beth a elwir yn
ES6 neu ECMAScript 6.

919
00:45:13,220 --> 00:45:15,820
Mae'n y fersiwn newydd o JavaScript.

920
00:45:15,820 --> 00:45:19,050
Mae criw o resymau technegol,
ond osod yn fersiwn gwell o var.

921
00:45:19,050 --> 00:45:20,724
>> Mae'n sut yr ydych yn datgan newidynnau.

922
00:45:20,724 --> 00:45:21,390
Gallwch ddefnyddio adael.

923
00:45:21,390 --> 00:45:22,140
Gallwch ddefnyddio var.

924
00:45:22,140 --> 00:45:23,825
Gadewch Mae criw o technegol
reasons-- gallwch eu edrych

925
00:45:23,825 --> 00:45:25,610
i fyny later-- am pam ei bod yn well.

926
00:45:25,610 --> 00:45:28,780
Yn y bôn, ES6 wedi rhai 'n glws
cystrawen newydd, mae rhai nodweddion newydd

927
00:45:28,780 --> 00:45:30,720
ar ben yr hen JavaScript.

928
00:45:30,720 --> 00:45:32,782
>> Felly, rydym wedi hoffi bum munud.

929
00:45:32,782 --> 00:45:34,990
Fi jyst eisiau siarad am
un peth yn fwy real gyflym.

930
00:45:34,990 --> 00:45:36,450
Os oedd gennych unrhyw gwestiynau,
gadewch i ni siarad am y peth ar ôl hyn.

931
00:45:36,450 --> 00:45:38,366
Ond dim ond felly mae hyn yn cael
dal ar gamera, Fi jyst

932
00:45:38,366 --> 00:45:41,550
am siarad ychydig am sut yr ydych yn
yn ei ddefnyddio React yn eich apps.

933
00:45:41,550 --> 00:45:47,220

934
00:45:47,220 --> 00:45:58,640
>> Os byddwch yn mynd yma,
Facebook.GitHub.IO/react,

935
00:45:58,640 --> 00:46:03,320
dyma'r dudalen gartref ar gyfer ReAct, ac
bydd yn dangos i chi sut yr ydych yn ei ddefnyddio

936
00:46:03,320 --> 00:46:05,320
Ymateb mewn eich tudalennau.

937
00:46:05,320 --> 00:46:08,845
Yn y bôn, mae'n ychydig yn
gymhleth ceisio at gorsedda React.

938
00:46:08,845 --> 00:46:12,300
Dyw hi ddim mor hawdd ag y byddwch jyst ddragia
ac yn gollwng JavaScript i mewn 'na.

939
00:46:12,300 --> 00:46:15,890
>> Mae'n rhaid i chi gael eich newidydd
sefydlu, a fydd, fel y gwnaeth o'r blaen,

940
00:46:15,890 --> 00:46:18,120
droi eich JSX i mewn
yr JavaScript arferol.

941
00:46:18,120 --> 00:46:21,030
Mae'n rhaid i chi beth y chi helpu
llunio chi ES6 i normal.

942
00:46:21,030 --> 00:46:24,720
JavaScript mae llawer o symud
rhannau rhaid i chi wneud, felly mae 'na beth

943
00:46:24,720 --> 00:46:27,200
Gelwir Yeoman, Yeoman.io.

944
00:46:27,200 --> 00:46:31,110
Ac mae hyn yn arf gorchymyn llinell y chi helpu
eich helpu i sgaffaldio eich React

945
00:46:31,110 --> 00:46:32,380
prosiectau yn hawdd.

946
00:46:32,380 --> 00:46:38,660
>> Felly, gallwch ddarllen am hyn
yn ddiweddarach, ond mae rhai offer

947
00:46:38,660 --> 00:46:40,160
bod Yeoman gynnig.

948
00:46:40,160 --> 00:46:43,280
Byddant yn gadael i chi greu React
app gyda phopeth a adeiladwyd yn.

949
00:46:43,280 --> 00:46:46,030
Fel y bydd yn wedi adeiladu
i mewn, cydrannau a adeiladwyd yn.

950
00:46:46,030 --> 00:46:47,880
Bydd yn cael eich newidydd a adeiladwyd yn.

951
00:46:47,880 --> 00:46:50,699
Mae ganddynt lawer o oer
pethau a adeiladwyd yn awtomatig

952
00:46:50,699 --> 00:46:52,240
gan ddefnyddio y pethau hyn a elwir generaduron.

953
00:46:52,240 --> 00:46:54,620
>> Felly darllen am hyn os ydych yn dymuno.

954
00:46:54,620 --> 00:46:59,110
Dim ond yn mynd ar Yeoman, Y-E-O-M-A-N, a
gallwch ddod o hyd generaduron fel y rhain.

955
00:46:59,110 --> 00:47:01,263
A gyda generaduron fel
hyn, 'ch jyst yn hoffi un

956
00:47:01,263 --> 00:47:03,010
yn llinell orchymyn cwpl gorchmynion.

957
00:47:03,010 --> 00:47:05,530
Bydd yn sgaffaldio allan
cyfan React app ar eich cyfer chi.

958
00:47:05,530 --> 00:47:10,470
Bydd yn cael yr holl pibellau â llaw,
a gwaith grunt wneud i chi,

959
00:47:10,470 --> 00:47:13,010
a dyma pam yr ydych yn unig yn canolbwyntio
ar ddim ond yn ysgrifennu yn React.

960
00:47:13,010 --> 00:47:16,739
>> Felly adeiladu bôn yn
React app yn nontrivial.

961
00:47:16,739 --> 00:47:19,530
Mae wedi gwifrau i gyd gyda'i gilydd, ond mae
yn arfau bydd yn gwneud hynny ar eich rhan.

962
00:47:19,530 --> 00:47:23,070
Felly, os ydych am wneud React
app, ceisiwch wneud yn y ffordd honno.

963
00:47:23,070 --> 00:47:26,360
Os ydych chi eisiau i arbrofi,
gallwch roi cynnig ar ddefnyddio'r CodePen hwn

964
00:47:26,360 --> 00:47:28,550
gan fod CodePen gan hyn
yr holl ymateb gwifrau.

965
00:47:28,550 --> 00:47:30,240
Rydw i wedi gwneud yr holl waith i chi yn barod.

966
00:47:30,240 --> 00:47:34,610
>> Felly, os ydych am wneud fel
cynhyrchu i ryddhau React app,

967
00:47:34,610 --> 00:47:37,220
roi cynnig ar un o'r generaduron hyn.

968
00:47:37,220 --> 00:47:40,240
Os ydych chi eisiau chwarae
o gwmpas, mae'n aml yn werth ychydig

969
00:47:40,240 --> 00:47:44,490
fel ceisiwch chwarae o gwmpas ar CodePen yma.

970
00:47:44,490 --> 00:47:45,470
Swnio'n dda?

971
00:47:45,470 --> 00:47:45,970
Cool.

972
00:47:45,970 --> 00:47:47,890
>> Felly dyna i gyd gennyf.

973
00:47:47,890 --> 00:47:52,470
Unwaith eto, yr holl cod ac enghreifftiau yn
mynd i fod ar y wefan hon fan hyn.

974
00:47:52,470 --> 00:47:55,509
Felly, unwaith eto, rydym yn nid oedd yn siarad
golygu llawer cystrawen React,

975
00:47:55,509 --> 00:47:57,550
ond i ddod o hyd i bawb
Ychydig o fanylion cystrawennol,

976
00:47:57,550 --> 00:48:00,320
mae'r cyfan yn mynd i fod ar gael
ar y wefan hon fan hyn.

977
00:48:00,320 --> 00:48:02,660
>> Felly, byddwn i'n argymell hoffi
gymryd y cam cyntaf.

978
00:48:02,660 --> 00:48:06,277
Rhowch ef mewn i'ch CodePen.

979
00:48:06,277 --> 00:48:08,110
Ceisiwch weithio ar wneud
i'r ail gam.

980
00:48:08,110 --> 00:48:11,310
Mae pedwerydd cam, a dim ond
gweld lle rydych yn cael o hynny.

981
00:48:11,310 --> 00:48:14,840
>> Unrhyw mwy o gwestiynau, edrychwch
allan y dudalen neu e-bost ataf.

982
00:48:14,840 --> 00:48:16,490
Dyna fy e-bost.

983
00:48:16,490 --> 00:48:19,885
Ond Byddwn wrth fy modd i chi helpu gydag unrhyw
gwestiynau sydd gennych am ReAct.

984
00:48:19,885 --> 00:48:21,010
Felly, yep, dyna i gyd gennyf.

985
00:48:21,010 --> 00:48:23,410
Diolch yn fawr iawn i chi i gyd
gwylio neu am fynychu.

986
00:48:23,410 --> 00:48:26,820
A byddaf yn cymryd unrhyw gwestiynau
allai fod gennych ar ôl hyn yn awr.

987
00:48:26,820 --> 00:48:29,140
Felly, diolch i chi gyd am wylio.

988
00:48:29,140 --> 00:48:31,270