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
>> NEEL 메타는 : 여기 간다.

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과 학년을위한 TA 해요
하버드 대학과 매우를에

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
및 웹 응용 프로그램, 인스 타 그램.

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
미래에 어쩌면 다른 플랫폼
그냥 같은 자바 스크립트 코드를 사용하여.

33
00:01:26,390 --> 00:01:31,130
당신은 동일한을 사용할 수 있습니다
자바 스크립트 코드는 웹 사이트를 렌더링

34
00:01:31,130 --> 00:01:33,040
안드로이드 앱과 아이폰 OS 앱을 렌더링한다.

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
및 인스 타 그램이 사용하지만이를 것
또한 반작용의 구성 요소를 사용합니다.

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
인스 타 그램 피드보다 아무것도 더있다
게시물의 무리 차례,

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
그들은 작성 가능합니다.

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
>> 당신은 인스 타 그램을 포함 할 수 있습니다
자신의 웹 사이트에 일.

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
>> 인스 타 그램을 사용하려면
예를 들어, 당신은 할 수 있습니다

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
>> 페이스 북 메신저에 대한
반작용이다 예를 들면,

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
우리는 작성 가능 구축하고
쉽게 확장 웹 응용 프로그램.

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
당신은 파이썬 백 엔드처럼이있는 경우,
파이썬은 일부 데이터를 뱉어 수 있다면,

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
당신이 할 수있는이 방법
시원하고 재미 웹 애플 리케이션.

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
당신에 대한 코드의 모든 것을 알 수 있습니다
오늘의 이야기는 다음 URL에서 될 것입니다

165
00:07:26,610 --> 00:07:29,320
여기에, 죄송합니다, 여기에 URL을.

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-- 및 IT 볼 reloads-- 경우,
나는 페이지에 자바 스크립트 코드를 실행하는거야

186
00:08:33,470 --> 00:08:36,390
바로 여기, 그것은거야
자동으로 웹 페이지를 렌더링

187
00:08:36,390 --> 00:08:37,980
이 자바 스크립트 코드.

188
00:08:37,980 --> 00:08:40,039
그래서이 방법입니다
우리는 코드를 시도하는

189
00:08:40,039 --> 00:08:43,089
사용하지 않고도 빠른 정말로
우리의 ID 또는 우리 지역의 기계를 사용

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
>> 좋아, 그럼 자바 스크립트입니다 반작용
라이브러리와 같은,

203
00:09:21,250 --> 00:09:24,480
자바 스크립트의 지식이 필요합니다
어느 웹 프로그래밍 언어이다.

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
당신은 자바 스크립트를 배울 수 있습니다
30 분.

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이나 자바 스크립트에 익숙

220
00:10:00,794 --> 00:10:02,960
좋아, 그래서 우리는가는 건지
이렇게 우리가 만들려고하고있다

221
00:10:02,960 --> 00:10:06,470
반작용 사용하여 아주 기본적인 플래시 카드 앱.

222
00:10:06,470 --> 00:10:08,210
우리는 플래시 카드가 될 것입니다.

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
>> 그럼 가서 만들어 보자 우리
자바 스크립트를 사용하여 첫 번째 구성 요소.

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을 할 수 있습니다.

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,
에서 사용되는 자바 스크립트는 반응.

262
00:12:08,660 --> 00:12:11,845
그것은 당신이 내부 HTML을 작성하자
자바 스크립트, 어떤

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에 익숙하다면, 나는 알고있다
우리는 일반 목적 사업부가

267
00:12:21,360 --> 00:12:22,790
물건에 대한 컨테이​​너입니다.

268
00:12:22,790 --> 00:12:26,380
우리는 내부 사업부를 반환 할 수 있습니다
이 DIV, 우리는 물건을 넣을 수 있습니다.

269
00:12:26,380 --> 00:12:32,390
>> 그럼 우리가 렌더링하고 싶은 말은하자
지금 바로 업 플래시 카드.

270
00:12:32,390 --> 00:12:34,890
플래시 카드, 내가 말할 것
질문과 답변이있을 것이다.

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을 작성합니다.

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처럼 말처럼
단락의 이미지 또는 페이지에 대한,

285
00:13:25,100 --> 00:13:28,120
응용 프로그램이 그래서 당신은 응용 프로그램을 작성
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
나는에 간단한 사업부를 만들었습니다
페이지의 ID로 호출 페이지,

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
이 사업부와를 인쇄합니다
그 안에 두 단락.

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
응용 프로그램은 사업부를 인쇄 이동 말한다
그 안에 두 단락으로.

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
지금 우리 단지
하드 카드를 렌더링합니다.

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
당신은 어떤 플래시 카드,
여기로 공급,

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
그리고 우리는 새로운을 만들 수 있습니다
구성 요소는 응용 프로그램을 호출

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
대신 응용 프로그램을 렌더링의
그것의 내부 사업부와 페어링이

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
이 단지 표기법 결정이다
자바 스크립트 객체.

351
00:17:05,260 --> 00:17:09,280
이 구조체 같은 종류의
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
그래서 우리는이, 응용 프로그램을 수행 할 수 있습니다
카드 myCard 같습니다.

355
00:17:20,210 --> 00:17:23,200
>> 당신은 입력에, 당신이 할 방법을 알고
입력 유형은 텍스트 나 버튼과 동일

356
00:17:23,200 --> 00:17:25,240
클래스는 부트 스트랩을 위해 BTN 일치 한,?

357
00:17:25,240 --> 00:17:29,500
같은 생각, 앱 카드 equals--
당신은 괄호를 넣어 가지고 here--

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
당신은 응용 프로그램으로 전달
앱 카드를 사용하는 것은 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
>> 지금, 나는 통과 할 거라고
CardView에 this.props.card.

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
지금 우리가 인쇄 일부
하드 질문과 답변.

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
>> 그래서 이것은 우리가려고하고도 가능해
질문 답변을 넣어.

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는 경우, 말한다
나에게 어떤 플래시 카드 객체를 제공

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
>> 플래시 카드의 경우, 대한
국가의 예를 들면, 어떤 종류의

449
00:22:05,320 --> 00:22:07,550
당신은 할 수 있습니다
플래시 카드에 대한 기억 나?

450
00:22:07,550 --> 00:22:09,740
무엇 일시적인 상태
당신은 기억 할 수 있습니다

451
00:22:09,740 --> 00:22:12,491
플래시 카드 앱에서 플래시 카드 하시나요?

452
00:22:12,491 --> 00:22:13,990
청중 :이 대칭되어하든?

453
00:22:13,990 --> 00:22:14,990
NEEL 메타 : 그래, 맞아.

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
>> 메신저에 어떤 텍스트를 같은
오른쪽 입력 상자에 입력?

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
NEEL 메타 : 플래시처럼
카드, 당신이 볼 수있는 것처럼

465
00:22:38,360 --> 00:22:40,290
질문 측 또는 응답면?

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

467
00:22:41,070 --> 00:22:43,270
>> NEEL 메타 :처럼
바로, 플래시 카드를 두 양면?

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
>> NEEL 메타 : 그래, 그래서 텍스트
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
따라서, 예를 들어, 페이스 북 메신저,
동일한 데이터 소스를 얻을 경우에도

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
사실에서 참으로 거짓 false로.

564
00:27:34,136 --> 00:27:38,420
>> NEEL 메타 : 그래, 그래서 가지고 어떤
this.front 전면 상태가 is--.

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
그래서 우리는 상태를 설정합니다
사실에서 false로.

576
00:28:09,170 --> 00:28:11,430
그것이 거짓이라면, 우리는거야
true로 false를 설정합니다.

577
00:28:11,430 --> 00:28:17,210
>> 그냥 우리가 설정하고 약간 얻을 것을 알 수
다르게, 그래서이 해 봅시다.

578
00:28:17,210 --> 00:28:18,675
우루루 빙은, 이것 좀 봐.

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
그리고 그것은 단지 등이 변경
작은 비틀기 페이지는 필요에 따라,

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
>> NEEL 메타 : 네, 질문
이 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
그리고 당신은하지 않도록 경우
그림자 돔을 가지고, 당신은 좋겠

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
에 있기 때문에 그림자의 반작용
돔, 당신은 무료로 두 가지를 얻을.

652
00:31:34,002 --> 00:31:35,710
그것은 효율적 때문에
그림자 돔의.

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
이제 우리의 플래시 카드 애플 리케이션해야한다고 가정 해 봅시다
모든 카드리스트를 포함

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
>> NEEL 메타 : 네, 그래서
오른쪽 상태를 갖고 싶어?

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
알아 내기 위해 상태를 사용
제 1 카드의 하나,

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
그래서 우리는 새로운 만들어 줄게
구성 요소 목록보기를했다.

736
00:36:19,980 --> 00:36:22,155
리스트 뷰가 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, 3.map의 function-- 본

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, 3.map의 X는 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
>> NEEL 메타 : 그래, 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
NEEL 메타 : 네, 카드 때문에
오른쪽 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
렌더링 한 최상위 요소를 설정
그래서 당신은 사업부에서 포장 해.

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
제 1 컴포넌트 인화
아웃리스트에있는 모든 카드.

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?

829
00:41:24,205 --> 00:41:27,150
또는 뭔가입니다
[들림]와 함께?

830
00:41:27,150 --> 00:41:30,760
>> NEEL 메타는 : 문제는 깡통이다
당신은 일반 자바 스크립트 JSX를 사용합니까?

831
00:41:30,760 --> 00:41:32,620
대답은 '예입니다.

832
00:41:32,620 --> 00:41:41,070
JSX 그냥하는 방법이 걸립니다
그 안에 HTML을 가지고 자바 스크립트,

833
00:41:41,070 --> 00:41:44,215
그리고 자바 스크립트로 컴파일합니다
그 안에 HTML을 가지고 있지 않습니다.

834
00:41:44,215 --> 00:41:47,880
그래서 이렇게 여기에서 알 수 that-- 알 수 있습니다.

835
00:41:47,880 --> 00:41:50,820
당신이 DIV처럼 가지고있는 것처럼이 보인다
당신은 그 안에 물건을 가지고있다.

836
00:41:50,820 --> 00:41:54,970
>> 즉, 자바 스크립트로 컴파일 그
같은 같은 일을 생성합니다.

837
00:41:54,970 --> 00:41:59,590
나는 무슨 말인지하는 것으로 추측
이처럼 JSX, 그냥 구문입니다

838
00:41:59,590 --> 00:42:03,530
자바 스크립트 처리기 많은
PHP와 같은 HTML에 대한 처리기입니다.

839
00:42:03,530 --> 00:42:05,490
JSC는 처리기입니다
자바 스크립트를 그것은 수 있습니다

840
00:42:05,490 --> 00:42:12,970
당신은 당신의 자바 스크립트 내부 HTML을했습니다.

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
NEEL 메타 : 일반적으로 당신은 필요가 없습니다
자바 스크립트의 내부 HTML을 넣어

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
우리는 CS50에서 C를 배우고 있었어요.

852
00:42:35,646 --> 00:42:38,032
C는 또한 기능적인 언어인가?

853
00:42:38,032 --> 00:42:39,990
NEEL 메타 : 그래서 질문
기능에 관한 것입니다

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
>> NEEL 메타 : 아니, 일이 순서대로 일어난다.

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
단방향 데이터 흐름
가상 돔,

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
>> NEEL 메타 : 그래서 질문은
왜 대신 VAR의하자 사용합니까?

918
00:45:10,450 --> 00:45:13,220
이라는 것입니다
ES6 또는 ECMAScript를 6.

919
00:45:13,220 --> 00:45:15,820
그것은 자바 스크립트의 새 버전입니다.

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
기존 자바 스크립트의 상단에.

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
그냥 드래그 그것은는 쉬운 일이 아니다
거기에 자바 스크립트를 놓습니다.

939
00:46:12,300 --> 00:46:15,890
>> 당신은 당신의 변압기가 있어야
그것은 이전과 같이, 어떤이됩니다 설정,

940
00:46:15,890 --> 00:46:18,120
로 JSX을 설정
일반 자바 스크립트.

941
00:46:18,120 --> 00:46:21,030
당신은 그거야 일에이
당신이 정상으로 ES6 컴파일합니다.

942
00:46:21,030 --> 00:46:24,720
자바 스크립트는 이동이 많이있다
부품 당신이해야 할, 그래서 일이있다

943
00:46:24,720 --> 00:46:27,200
보좌관, 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
보좌관이 제공하는.

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
이 제 4 단계는, 그리고 단지
당신이 그에게서 얻는 경우를 참조하십시오.

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