[음악 재생] 

NEEL 메타는 : 여기 간다. 

음, 모두, 웹에 오신 것을 환영합니다 와 미래의 애플리케이션은 반응한다. 이 CS50입니다. 내 이름은 닐이다. 나는 CS50과 학년을위한 TA 해요 하버드 대학과 매우를에 열정적 인 웹 개발자. 그래서 나는 매우 흥분 해요 오늘 당신에게 얘기, 당신은 여기에서 또는 집에​​있어 여부 보고에 대해 다시, 인, 반작용 나는 웹 애플리케이션의 미래가 말했듯이. 

따라서 반작용이 웹 프레임 워크이다. 내가 봤는데으로 그리고 이야기 여기에 몇 가지 사람들에게, 프레임 워크는 단지입니다 당신이 사용할 수있는 도구 세트 구조 및 웹 응용 프로그램을 빌드합니다. 그리고 웹 애플리케이션은, 다시, 웹 사이트입니다 페이스 북과 같은 상호 작용이 있습니다, Twitter.com, Instagram.com, 뭐든간에. 

그래서 페이스 북은 웹 프레임 워크입니다 그는 페이스 북에 의해 개발되었다 반작용 back-- 몇 년이다. 그것은 이후에 사용되어 있어요 자신의 모바일 앱에 페이스 북 및 웹 응용 프로그램, 인스 타 그램. 칸 아카데미는 다른 것입니다 반작용의 저명한 얼리 어답터. 

정말 점점되었습니다 매우 인기. 혹시 각도 나 같은 것들을 사용하는 경우 백본이 동일한 패밀리이며, 하지만 이후 지금까지이 자신의 인기를 능가. 그것은 뜨거운 새로운 일이다. 정말, 정말 거대. 

그리고 반작용은 같은 단지 좋은 건물 인터페이스를위한 웹 프레임 워크. 그것은 웹 인터페이스를 구축하기위한 좋은. 물건도 있습니다 라는 기본 반응하는 당신은 인터페이스를 구축 할 수 있습니다 안드로이드와 iOS 용 미래에 어쩌면 다른 플랫폼 그냥 같은 자바 스크립트 코드를 사용하여. 당신은 동일한을 사용할 수 있습니다 자바 스크립트 코드는 웹 사이트를 렌더링 안드로이드 앱과 아이폰 OS 앱을 렌더링한다. 

그것은 매우, 매우 흥미로운 시간이다. 그것은 정말, 정말 멋진 기회입니다. 정말 보편적 인 웹이다 인터페이스 개발 도구, 그래서 그것은 매우이야 중요한 것은 알고 있습니다. 그리고, 나는 사람들을 말하고 있었다으로 이전에,이, 나는 생각한다, 우리는 방법을 바꿀 것입니다 영원히 웹 애플리케이션을 구축 할 수 있습니다. 그래서 어쩌면 약간의 과장,하지만 그것이 알고 꽤 좋은 것 같아요. 

좋아, 그럼 반작용 무엇인가? 반응 프레임 워크는 당신이 할 수있다 인터페이스를 구축하기위한 사용합니다. 인터페이스는, 다시, 인 오른쪽 웹 페이지? 그래서 여기 Instagram.com이야, 용도는 반응한다. 

를 기반으로 반응 구성 요소의 생각. 구성 요소는 HTML입니다 스테로이드 요소, 그래서 HTML 요소는 버튼과 같다. 이 단락입니다. 그것은 바로, 헤더입니까? 및 인스 타 그램이 사용하지만이를 것 또한 반작용의 구성 요소를 사용합니다. 

구성 요소는 반응 재미있게 HTML 요소 자신의 행동이 그 그 안에 포함되어 있습니다. 그래서, 예를 들어, 우리가 있었다 시각 요소, 시간 요소, 이는 같은 포함 타임 스탬프, 당신은 알고있다 프로파일 구성되는 프로필 이미지가 포함됩니다 및 사람의 이름. 이 같은 카운터를 가질 수있는 좋아하는 수처럼 셀 수, 당신이 그것을 클릭하면, 그것은거야 추천의 수를 증가시킨다. 구성 요소는 단지입니다 HTML 코드의 무리가 일부 기능이 있습니다 그것의 내부에 랩. 그래서 HTML 요소처럼 스테로이드, 내가 전에 말했듯이. 이러한 구성 요소를 취할 수 있습니다, 당신은 그들을 함께 넣을 수 있습니다 에, 새로운 구성 요소를 만들려면 이 경우, 포스트의 구성 요소, 있는 모든 물건을 포함한다. 그것은, 프로필 시간을 포함 할 것, LikeCounter, 어쩌면 코멘트 어쩌면 이미지 자체. 그래서 웹 애플 리케이션은 단지 고려하여 구축 구성 요소와 함께 이르렀. 인스 타 그램 피드보다 아무것도 더있다 게시물의 무리 차례, 각 게시물은, 시간과 같은 포함 그래서, LikeCounter 프로필합니다. 그것은 종류의 집을 짓는 같아요. 당신을 구축하지 않습니다 위에서 아래로 집. 당신은 당신을 components-- 받아 화장실처럼 가라. 당신은 당신이 그들을 스틱 bedroom--을 함께, 당신은 새 구성 요소를 가지고있다. 당신은 집의 새로운 부분이있다. 

그래서 모든 주위에 내장되어 반응 구성 요소의 생각이 선언되는, 대화 형입니다. 무엇 당신은 그냥 말처럼 프로파일이며, 그것을 렌더링한다. 그들은 작성 가능합니다. 당신은 시간과 프로필을 취할 수 넣어 그들 함께, 뭔가 더 나은합니다. 그리고 그들은 그래서 만약, 재사용있어 당신 포스트에 대한 소스 코드를 가지고 당신은 어디를 포함 할 수있다. 

당신은 인스 타 그램을 포함 할 수 있습니다 자신의 웹 사이트에 일. 당신은 페이스 북에 포함 할 수 있습니다, 예를 들어, 것이면 사용뿐만 아니라 반응한다. 따라서 구성 요소는 정말, 정말, 정말 웹의 강력한 빌딩 블록 그 어디서나 사용 넣을 수 있습니다 함께 새로운 빌딩 블록을 확인합니다. 즉, 매우, 매우있어 높은 수준의 개요. 그래서, 다시, 당신은 할 경우 어떤 점에서 질문 반응기의 철학에 대한 코딩은, 저를 중지하고 알려합니다. 

좋아, 그래서 때문에 멋진 반응입니다 보는 다른 방법이 당신이 웹 애플리케이션을 구축하는 방법에. 당신은 아마 MVC, 들었어요 모델 당신은 CS50 또는 어떤에서 제어 사용 프로빙 클래스 다른. 그리고 대부분의 프레임 워크는 MVC의 아이디어를 중심으로. 반응이 없습니다. 아이디어를 중심으로 구축되어 반응 단방향 데이터 흐름 여기에이 차트 또는 그래픽으로 볼 수있다. 

기본적으로, 데이터 소스를 갖는다. 및 상기 데이터 소스를 결정한다 어떻게 특정 구성 요소를 배치합니다. 상기 구성 요소는 것 그리고, 그것들이 변경 될 때, 그들은 말할 것이다 데이터 소스가 변경 될 수 있습니다. 

인스 타 그램을 사용하려면 예를 들어, 당신은 할 수 있습니다 포스트 같은 객체의리스트 데이터베이스 또는 뭔가. 데이터 그. 그리고 우리의 포스트 구성 요소 데이터를 취할 것입니다, 및 렌더링하기 위해 데이터를 사용 화면에 일. 그건 무엇 화살표 , 구성 요소가되는 데이터로부터 다음 같은 데이터가 사용됩니다 구성 요소의 무리를 렌더링합니다. 

페이스 북 메신저에 대한 반작용이다 예를 들면, 당신의 목록이있을 수 있습니다 데이터 소스로 메시지. 그리고 그것은하지 렌더링 것 메시지의 목록 뿐만 아니라 친구 목록, 당​​신은. 당신은 읽지 않은 수를 가지고있다. 아마 또한 페이스 북의 일을 렌더링 그 Facebook.com의 맨 아래에 있습니다. 동일한 데이터가 진리의 단일 소스 그리고 그 많은 원인 구성 요소를 렌더링합니다. 그리고 때마다 그 중 하나 구성 요소가 변경되고, 그것은 다시 간다 데이터 소스를 변경합니다. 

당신이 바로 메시지를 보내? 즉, 데이터 소스를 변경합니다. 당신은 당신의 메시지를 읽고, 그래서 당신은 0 읽지 설정합니다. 즉, 데이터 소스를 변경합니다. 그리고 하나의 이들의 모든 것을 알 수 화살표 동일한 데이터에 돌아 가지 소스, 당신이 알 수 있도록, 특정 데이터 세트를 주어진 당신은 정확하게 알고 페이지처럼 보이는 것입니다. 그것은 결정적이다. 당신은 주어진 특정 데이터를 알고, 무엇을 페이지처럼 보이는 것입니다. 당신은가는 어떻게 예측할 수 행동과 방법을 가지려고하고있다 그들이 함께 넣어 때 작동합니다. 

그리고 만 구성 요소가 있다면 여기에, 그것은 바로, 동일하게 동작까요? 당신은 어떤이없는 것 이상한 상호. 하나의 데이터 만 구성 요소를 렌더링합니다. 만 구성 요소 수 돌아가서 데이터를 편집 할 수 있습니다. 그리고 이것은 아주 좋은 것입니다. 우리는 작성 가능 구축하고 쉽게 확장 웹 응용 프로그램. 

하나의 데이터 소스를 가지고 진리의 근원. 즉 구성 요소를 알려줍니다 방법 페이지를 배치하고, 상기 구성 요소는 것 상호 작용을 처리합니다. 그리고 그들은 변경하려는 경우 일, 그냥 돌아가 및 데이터 소스 변경 말한다. 이해가? 그래서 반작용은 모든 이해에 관한 것입니다 방법 구성 요소를 구축 할 및 구성 요소를 만드는 방법 외부 세계와 상호 작용합니다. 

구성 요소의 상호 작용 만들기 외부 세계와 다른 기술을 사용하여 라는 플럭스, 어떤 인 프레임 워크는 반작용의 상단에 추가했다. 우리는 그것에 대해 얘기하지 않을거야. 우리는 주어진에 대한 자세한 이야기​​거야 데이터는 어떻게 구성 요소를 렌더링 할 수 있습니까? 

그리고 당신 때문에 정말 멋지다 반작용 원하는 백 엔드로 사용할 수 있습니다. 당신은 파이썬 백 엔드처럼이있는 경우, 파이썬은 일부 데이터를 뱉어 수 있다면, 를 렌더링 할 수있는 반응한다. 당신은 JS 출력이없는 경우 데이터의 반작용은 그것을 렌더링합니다. 루비와 레일 데이터는 반작용은 그것을 렌더링합니다. 

따라서 반작용 기본적 웹인 구성 요소와 프론트 엔드를 view-- 어떠한 데이터 소스. 그리고 데이터 소스로 이동 구성 요소를 반응하는 것은 매우 쉽습니다. 다른 방법으로가는 것은 조금 어렵습니다. 내가 전에 언급 한 바와 같이 그 플럭스를 사용합니다. 우리는 들어갈 수 없습니다. 우리는에 더 초점을 맞출 것 데이터 - 투 - 부품면. 당신이 할 수있는이 방법 시원하고 재미 웹 애플 리케이션. 그것은 외부 세계에 영향을주지 않습니다 지금은,하지만 그건 또 다른 이야기입니다. 

좋아, 그래서 만약 당신이 여기에 있었다 마지막 세미나 당신에 대한 코드의 모든 것을 알 수 있습니다 오늘의 이야기는 다음 URL에서 될 것입니다 여기에, 죄송합니다, 여기에 URL을. 그리고 기본적으로 우리는 갈거야 어쩌면 네 단계, 다섯을 통해, 아마 다섯. 우리는 네 단계를 통해 이동합니다 샘플을 건물의 응용 프로그램을 반응한다. 그리고 모든 소스 코드 방법의 모든 단계에 대한 그래서 만약, 바로 여기에있을 것입니다 당신은 집에서 함께 다음과 같은 것 이 코드를 정독 주시기 바랍니다. 여기에 따라 다음과 같은 경우, 우리는 화면에 표시됩니다 그래서 그것에 대해 걱정하지 마십시오. 그러나 만약 당신이 집에 있다면, 느낌 이 웹 사이트를 방문하여 무료. 그리고, 그래, 당신은 얻을 수 있어야합니다 만약 당신이 여기에서 필요로하는 것 모든 코드. 그래서 좋은 컨닝 페이퍼도의 와 미래의 모험 반응한다. 쿨, 그렇다면 여기 모든 사람, 당신이 집에있어 경우에도, is.gd/cs50react,이 웹 사이트를 올려, 어떤 자본도없고, 밑줄, 아니 아무것도. 

당신은 보이는 페이지를 볼 수 있습니다 이 같은 조금. 이 CodePen라는 것입니다. CodePen는 협력이다 코딩 환경 있는 내가 여기에 코드를 작성 할 수 있습니다 자동으로 발송됩니다. 그리고이 방법에, 나는 코드를 작성할 수 있습니다. 나는 여기에 코드를 실행할 수 있습니다. 

example-- 및 IT 볼 reloads-- 경우, 나는 페이지에 자바 스크립트 코드를 실행하는거야 바로 여기, 그것은거야 자동으로 웹 페이지를 렌더링 이 자바 스크립트 코드. 그래서이 방법입니다 우리는 코드를 시도하는 사용하지 않고도 빠른 정말로 우리의 ID 또는 우리 지역의 기계를 사용 또는 무엇이든. 그것은 당신이로 mockup 할 수있는 매우 빠른 방법 코드의 종류를 테스트합니다. 

그래서 복용 할거야 예제 코드, 여기에 넣어. 우리는 그것을 통해 일하게 될 것입니다. 그리고 당신이 집에 있다면, 당신 뿐만 아니라이를 끌어 할 수 있습니다. 그리고 난 이미 설치 한 여기에 반응, 그래서 당신은 할 수 있습니다 여기에 자신의 코드를 작성하고, 자신의 놀이터로보십시오. 

그래, 모두에있는 경우 여기에이 링크를 엽니 다. 나에게 엄지 손가락을주세요 당신이 열려 번까지. 쿨, 시원 시원한. 아무것도, 지금 여기에 없다하지만 우리는 곧 그 변경됩니다. 

좋아, 그럼 자바 스크립트입니다 반작용 라이브러리와 같은, 자바 스크립트의 지식이 필요합니다 어느 웹 프로그래밍 언어이다. 그리고 그것은 다른 것들에 사용되는 것 이제도하지만 주로 웹 개발 언어, 당신이 익숙하지 않은 경우 그래서 즉, JSforCats.com라는 사이트를 참조하십시오. 그것은 멋진입니다. 당신은 자바 스크립트를 배울 수 있습니다 30 분. 그것은 믿을 수. 

그래서 그것을 읽기를 제공합니다. 우리는 또한 여기에 있기 때문에 HTML의 많은입니다 우리는 물론 웹 페이지를 디자인하고있다. 당신이 익숙하지한다면 HTML은, HTMLdog.com를 확인하십시오. 나는 반작용한다 학습 생각 백만 배는 더 쉽게 이미있는 경우 빌딩 블록을 알고있다. 당신이 구성 요소를 가지고 있다면, 그건 쉽게 더 큰 구성 요소를 확인합니다. 그것은 당신의 언어 반응이다. 

그래서 가서 줄 이러한 것들을 읽기. 이 비디오를 일시 중지합니다. 당신이 경우 그것을 읽기를 줘 집에서 당신이하지 않은 경우 HTML이나 자바 스크립트에 익숙 좋아, 그래서 우리는가는 건지 이렇게 우리가 만들려고하고있다 반작용 사용하여 아주 기본적인 플래시 카드 앱. 우리는 플래시 카드가 될 것입니다. 당신은 앞뒤로 카드를 전환 할 수 있습니다. 그리고 우리는 또한 목록을해야합니다 우리가 가지고있는 모든 카드, 우리가 느끼는 경우 야심 찬, 우리는 할 수 있습니다 사이를 전환 할 수 그들을 클릭하여 자동차. 

그러나 이것은 당신의 맨발의입니다 뼈는 매우 간단한 앱을 반응한다. 그리고이 실제로 쉽게 구현할 수 없습니다, 그러나 우리는 당신이 경우에, 그 표시거야 이것은, 그것을 확장하는 매우 쉽다 다른 사람들이 당신을 도와합니다. 그래서 우리는 네 단계를 통해 갈거야 처음부터 시작하는이 빌드합니다. 

좋아, 그럼 네 단계, 우리는거야 첫 번째 단계로 시작. 첫 번째 단계가 될 것입니다 첫 번째 구성 요소를 구축. 내가 전에 말했듯이, 컴포넌트으로 반응 스테로이드에 바로 HTML 요소입니다. 그것은 HTML을 지정합니다 일부 동작하며 어떻게 사람을 지정합니다 그 방법과 상호 작용할 수 있습니다 그것은 내부 상태를 가질 것이다. 버튼이 얼마나 많은처럼 알처럼 그 시간은 예컨대 클릭 지났, 그것은 자신을 배치하는 방법을 알 수 있습니다. 

그럼 가서 만들어 보자 우리 자바 스크립트를 사용하여 첫 번째 구성 요소. 구문 이상한 보이는 경우에 따라서, 이 가지이기 때문이다. 그래서, 다시, 우리는거야 라는 변수를 만들려면 앱 키워드가하자를 사용, 어떤 변수를 만든다 앱 동일 React.createClass을 할 수 있습니다. 

반응은 라이브러리와이 클래스 함수를 만들 수 있습니다. 그리고이 기능은 코드의 비트 당신을 새를 만드는 데 사용할 수있는 구성 요소 반응의 유형입니다. 그래서 React.createClass 성분하게, 이 구성 요소는 것 물건을 할 수 있습니다. 이 할 수있는 중요한 것은 렌더링 뭔가, 함수로 렌더링합니다. 

다시 말하지만,이 지수는 명백하지 않은 경우 당신은, 당신이 고양이 JS 갈 추천 그것을 확인하십시오. 그게 충분히 확대되어 있습니까? 시원한. 

그래서 모든 구성 요소 요구 렌더링 기능을 가지고 있습니다. 렌더링 기능을 말한다 나는 화면에 어떻게 인쇄합니까? 그러나 구성 요소입니다 그렇지 않은 경우에 쓸모 그래서 화면에 무엇을 인쇄 알고 당신은 렌더링 기능이 필요합니다. 

당신에게 일을 렌더링에 그래서 그냥 HTML을 반환해야합니다. 그리고 어떤 멋진 것은이다 라는 일이있다 의 확장 JSX, 에서 사용되는 자바 스크립트는 반응. 그것은 당신이 내부 HTML을 작성하자 자바 스크립트, 어떤 때 이상한 종류의 소리 먼저 그것에 대해 생각, 하지만 이후 많은 이해된다. 그래서 우리는이 작업을 수행 할 수 있습니다. 당신이 HTML에 익숙하다면, 나는 알고있다 우리는 일반 목적 사업부가 물건에 대한 컨테이​​너입니다. 우리는 내부 사업부를 반환 할 수 있습니다 이 DIV, 우리는 물건을 넣을 수 있습니다. 

그럼 우리가 렌더링하고 싶은 말은하자 지금 바로 업 플래시 카드. 플래시 카드, 내가 말할 것 질문과 답변이있을 것이다. 그래서이 DIV 내부의하자 단락을 인쇄 즉, 무엇 question-- 말한다 삶에 대한 궁극적 인 해답, 우주? 그리고 대답은 42, 물론 될 것이다. 

그게 전부에 잘 오지 않았다. 그래, 그래서 기본적으로 당신은 정말 할 수 자바 스크립트 내부 HTML을 작성합니다. 그리고이 될 것입니다 화면에 인쇄. 그럼 그것을 밖으로 시도 할 수 있습니다. 

그래서 우리는 우리의 구성 요소를 가지고있다. 우리는 넣어 반응 말할 필요 화면 구성 요소 그래서 React.render, 그래서 알 우리 다른 요소와 같이 응용 프로그램을 처리합니다. 이 HTML 요소이었다로 우리는 물품. 대신 IMG처럼 말처럼 단락의 이미지 또는 페이지에 대한, 응용 프로그램이 그래서 당신은 응용 프로그램을 작성 HTML 요소처럼 취급. 내가 전에 말했듯이, 그것은이다 스테로이드 요소입니다. 

그래서 당신은 응용 프로그램을 렌더링하고 그것을 넣을 수있는 장소를 제공합니다. 그리고 이것은 어떻게 당신이 할 수있다 어디를 넣어하는 방법을 알려줍니다. 나는에 간단한 사업부를 만들었습니다 페이지의 ID로 호출 페이지, 그것은 어디 요소는 갈 것입니다. 

그리고 우리는 HTML을 실행하지 않을거야. 기본적으로이 얻을 것입니다 이 페이지 요소의 내부에 넣어 우리는 화면에 있는지. 그래서이 코드를 실행하고,이 무 화면에 일이, 그래서 여기에 우리가 있습니다. 우리는 우리의 첫번째 반작용 구성 요소를 만들었습니다. 

그래서 그냥 요점을 되풀이하다, 우리는 부드럽게 만든 구성 요소의 새로운 유형, 오른쪽? 즉 무엇 React.createClass입니다. 그리고 그 구성 요소에, 우리 이해야 할 일을했다. 때마다이 구성 요소가있다 화면에 인쇄, 이 사업부와를 인쇄합니다 그 안에 두 단락. 

그리고 우리가 무슨 짓을했는지, 우리는 새로운 응용 프로그램을 만든 꺾쇠 괄호 앱 표기법을 사용. 우리는 그것을 넣어 그것을 말했다 페이지 요소 내부. 그래서 내가 무슨 짓을했는지, 그것은 생성 그 템플릿을 사용하여 새 응용 프로그램. 그리고 나는 그것을 렌더링하는 데 말했다. 그래서 말했다 확인, 응용 프로그램, 나는 무엇을 인쇄해야? 응용 프로그램은 사업부를 인쇄 이동 말한다 그 안에 두 단락으로. 그리고 짜잔, 우리 DIV있다 그 안에 두 단락. 지금까지 이해? 

그래서, 다시, 전체 과제는 반작용 단지 구성 요소를 만드는 방법을 알고있다. 로 만들려면 구성 요소는 함께 작동합니다. 이제 우리는 우리의 첫 번째를 적용했지만 구성 요소의 돌아 가자 및 구성 요소를 사용자 정의합니다. 그래서 당신은 HTML에서 방법을 알고 당신 귀하의 버튼 클래스를 줄 수 있습니까? 당신은 당신의 앵커 HREF를 제공 할 수 있습니다. 당신이 바로, 당신의 입력 유형을 줄 수 있습니까? 당신은 더 많은 사용자 정의를 제공 할 수 있습니다 당신의 모든 요소에 대한 속성 더 흥미로운 확인합니다. 그리고 우리가 실제로 할 수있는 똑같은 일이. 

그래서 우리가 원하는 가정 해 봅시다 우리 응용 프로그램은 어떤 카드를 렌더링 이동합니다. 지금 우리 단지 하드 카드를 렌더링합니다. 우리는 하나가 알고 카드는 할 수있다, 그래서 우리는있어 시도하고 지금이 변경 예정 우리는 단지 몇 가지 카드를 줄 수있다. 이 카드를 인쇄 할 수 있습니다. 

당신은 시도하게한다고하여 구성 요소를 매우 일반적인 목적. 따라서이 방법은 내가 이메일을 보내 수 이 내 친구처럼, 당신은 어떤 플래시 카드, 여기로 공급, 그것은 그 자체로 그것을 할 수 있습니다. 당신은 다른 사람을 넣을 수 있습니다 자신의 응용 프로그램에서 일. 

그러나 먼저,이 휴식 할 수 두 개의 구성 요소들로, 그러나 우리는 카드를 분리 할 실제 응용 프로그램 부분에서 인쇄 부분. 그래서 우리는 무엇을 할 수 있는지 우리는 응용 프로그램에서 변경할 수 있습니다 CardView에, 단지 응용 프로그램에 대한 새 이름, 그리고 우리는 새로운을 만들 수 있습니다 구성 요소는 응용 프로그램을 호출 기존 응용 프로그램과 혼동하지. 우리는 createClass있어, 및 HTML처럼, 당신은 둥지 구성 요소를 반응 할 수 서로의 내부. 

이 렌더링 기능에 따라서 함수 반환 CardView, 이는 동일한 것입니다. 이 같은 일을 왜 보는가? 대신 응용 프로그램을 렌더링의 그것의 내부 사업부와 페어링이 앱이 CardView을 렌더링하고, CardView는 DIV 및 단락을 렌더링합니다. 그래서 이것은 우리의 첫 번째 예제입니다 서로의 내부에 중첩 요소. 말이 돼? 그래서, 다시, 우리는 CardView 요소를 가지고있다. 우리는 응용 프로그램의 요소가 그것보다 더 큰 것을. 

좋아, 그럼 우리가 원하는 우리의 CardView-- 당신 경우 좋은 CardView에게 어떤 카드를주고, 그것은 바로, 당신을 위해 인쇄거야? 그래서 첫 번째, 우리는 카드를 만들 필요, 그래서이 카드 객체를 만들어 보자. 그래서 내 카드를하자 equal-- 모든 익숙하다면, 이 단지 표기법 결정이다 자바 스크립트 객체. 이 구조체 같은 종류의 C에서, 그래서 우리는, 카드를 만든 그래서 지금 우리는이 카드를 전달할 수 있습니다 속성 또는 HTML의 속성으로 우리의 응용 프로그램에 대한 용어. 그래서 우리는이, 응용 프로그램을 수행 할 수 있습니다 카드 myCard 같습니다. 

당신은 입력에, 당신이 할 방법을 알고 입력 유형은 텍스트 나 버튼과 동일 클래스는 부트 스트랩을 위해 BTN 일치 한,? 같은 생각, 앱 카드 equals-- 당신은 괄호를 넣어 가지고 here-- 앱 카드 myCard에 해당하므로이 우리는이 카드 객체를 말한다. 나는로 전달거야 응용 프로그램 구성 요소에 대한 속성입니다. 그리고이 응용 프로그램 구성 요소는 것 액세스 할 수 있어야하고, 수행 그것은 흥미로운 물건. 

그래서 우리의 응용 프로그램이 될 것입니다 카드 주어, 지금은 그래서, 그냥 줄의이 앱을하자 CardView에 카드 자체 응용 프로그램이 아닌 좋아하기 때문에 그것으로 무엇을 해야할지 것, 그래서 우리는 단지 CardView에 줄 것이다. 그래서 우리는 그것을 전달합니다 같은 방법은, 카드, 동일 그리고 각각의 구성 요소에 접근 할 수 그에게 주어진 된 것. 그들은 속성에 액세스 할 수 있습니다 즉, 주어진 된 this.props.card,이 구문을 사용하여. 

그렇다면 여기에 발생 당신은 myCard 개체가 있습니다. 당신은 응용 프로그램으로 전달 앱 카드를 사용하는 것은 myCard 같습니다. 그 카드의 개체가 응용 프로그램에 제공됩니다. 응용 프로그램에 액세스 할 수 this.props.card있다. 그것은 이미지처럼 가지의 그것의 근원이 무엇인지 알고있다. 

이 응용 프로그램은 카드가 무엇을 알고 이며, 그것으로 물건을 할 수있다. 이 계산을 할 수 있습니다. 그것은 그것의 기반으로 결정을 내릴 수 있습니다. 

지금, 나는 통과 할 거라고 CardView에 this.props.card. 지금까지 이해? 이제 더 의미가 있습니다. 

좋아, 그럼 이제 우리는 CardView에있어. 카드를 주어 우리의 CardView,해야 그 질문과 답변을 인쇄 할 수 있습니다. 지금 우리가 인쇄 일부 하드 질문과 답변. 우리는 우리가 필요로 out-- 내야 그들이 우리에게 준 카드를 물어 어떤 질문에 답하고, 다음 화면에이를 인쇄 할 수 있습니다. 

그래서 우리는 여기에서이 작업을 수행 할 수 있습니다. 에서 첫 번째에 해당 할 begin-- 렌더링합니다. 그래서 우리가 여기에서하고있는 것은 우리가 알고있다 카드는 속성에 우리를 부여 권리? 그것은 입력으로 우리에게 주어진 것. 거의 같은처럼 함수에 인수. 이 카드는 인수입니다 거의이 CardView에. 

우리는을 추출하고, 놓을 게요 그 변수의 질문에. 확인 응답이 가서 확인 변수 대답. 카드가 응답 할 것을 요구합니다. 그리고 지금 우리는 이것들을 가지고, 대신 그 텍스트를 인쇄, 우리는 인쇄거야 무엇이든 그들은 우리를했다. 

그래서 이것은 우리가려고하고도 가능해 질문 답변을 넣어. 이 작동하는지 보자. 쿨, 그래서 그것을 통해 진행하자 한 번 더는해야합니다. 

그래서 내 카드는 카드 객체이며, 우리 응용 프로그램에 그 카드를 제공하고 있습니다. 그리고 앱이 걸릴 것입니다 카드 그것은 CardView에 제공합니다. 그리고이 CardView는 경우, 말한다 나에게 어떤 플래시 카드 객체를 제공 나는 그 질문을 인쇄 할 수 있습니다 그 대답은 바로? 

그래서 내가 할 수있는 것을 나는 할 수있다 첫 번째를이 코드를 전송 내 친구에게 내 코드의 10 라인, 등을들 수있다. 그는 그것을에 포함 할 수 자신의 응용 프로그램입니다. 그리고 그는 같은 일을했던만큼, , CardView 카드가이 동일 같은 그는 CardView을 만든만큼 그것에게 올바른 정보를 주었다, 그는 자신의 카드를 렌더링 할 수 있습니다. 그리고이 방법은, 그것은 정말이야 빌드하기위한 멋진 방법 바로, 서로를 사용하는 구성 요소? 이 카드는, 내가 게시 할 수 있습니다 인터넷에서이 CardView, 사람들이 사용할 수있을 것이다. 따라서 기본적으로, 하나처럼 C 라이브러리의 표준 기능. 

이 함수 곳이다 누군가를 작성했습니다. 당신은 특정 입력을 제공합니다. 그것은 특정 출력을 생성합니다. 당신은 내부적으로 어떻게 작동하는지 상관하지 않습니다. 만큼 당신이 그것에게 권리를 부여으로 입력, 그것은 바로 출력을 할 수 있습니다. 

그리고 구성 요소가 될 수 있습니다 같은 방식으로 생각했다. 이 CardView은 같다 라이브러리 함수. 당신은 몇 가지 카드를 제공하는 경우 속성으로, 그것은거야 해당 카드의 내용을 출력한다. 나는 내 카드를 변경하는 경우처럼 대신 5 플러스 37 무엇처럼, 그에 따라 업데이트됩니다. 따라서 단지 입력을 변경함으로써, 그것은 어떤 결과를 가져옵니다. 그래서 당신은 거의 구성 요소를 생각할 수 이와 같이 함수로서 어느 당신은 함께 넣을 수 있습니다. 이 CardView처럼 입력을받을 입력, 당신은 출력을 얻을. 이 경우, 출력은 HTML이다. 지금까지 이해? 쿨, 그래서 다시, 속성은 당신은 정보를 전달 할 수있는 방법 에와 구성 요소 중. 

좋아, 그럼이를 만들어 보자 일 상호 작용. 지금은 지루한 가지입니다. [들림] 무엇입니까? 당신은 일부를 인쇄 할 수 있습니다 하지만이 할 수있는 전부입니다. 

그럼으로 돌아 가자 다만 지금은 오래된 질문. 좋아, 그럼 지금 이러한 구성 요소 모든 그들이 있기 때문에 지루한된다, 그들은 입력을받을. 그들은 출력, 바로 만들어? 즉, 지루한 가지입니다. 우리는 우리가 할 구성 요소를 가질 수 있도록 내부 상태의 일종, 뭔가를 기억한다. 

플래시 카드의 경우, 대한 국가의 예를 들면, 어떤 종류의 당신은 할 수 있습니다 플래시 카드에 대한 기억 나? 무엇 일시적인 상태 당신은 기억 할 수 있습니다 플래시 카드 앱에서 플래시 카드 하시나요? 청중 :이 대칭되어하든? NEEL 메타 : 그래, 맞아. 그래서 당신은 계속 할 수 있습니다 추적은 당신이 직면되거나 있습니다 당신은 카드에 아래에 직면하고 있습니다. 페이스 북에, 예를 들어, 당신은 것 뉴스 피드에서 위치를 기억 할 당신을하거나 프로필을 누가 좋아 당신은 지금하고 있습니다. 

메신저에 어떤 텍스트를 같은 오른쪽 입력 상자에 입력? 페이지를 새로 고칠 경우 사라집니다. 하지만 당신은 정말 상관 없어. 그것은 단지 일시적이다. 네? 

청중 : [들리지] NEEL 메타 : 플래시처럼 카드, 당신이 볼 수있는 것처럼 질문 측 또는 응답면? 

청중 : OK. 

NEEL 메타 :처럼 바로, 플래시 카드를 두 양면? 그래, 그래서 당신은 원하는 지금의 생각이 나는, 입력과 같은 인 특성을 가지고 하지만 어, 일시적인 상태, 이 페이지에있는 경우, 오른쪽? 다시 말하지만, 나는 페이스 북에서 말했다 메신저, 나는 어떤 사람처럼있다 당신은 페이스 북을보고있는 또는 누가 오른쪽 프로필입니까? 

이것은 단지 일시적입니다. 이것은 사용자를 표시하는 것이 중요 무슨 일이 일어나고 있지만, 페이지를 새로 고침합니다. 정말 중요하지 않습니다. 그래서, 일시적인 상태이다 그래서 우리 모두 그 상태. 

그래서, 다시, 국가와 소품이있다. 소품은 입력이 주어집니다 데이터 소스에서. 국가는 기본적으로 같다. 그냥 물건처럼 그 일이 상호 작용한다. 

그렇게 우리의 CardView--의가 보자 우리의 CardView--이 좋았어요 그래서. 우리가 여기에서 무엇을 할 것인지, 우리는거야 CardView 만 CardView를 터치합니다. 그리고 내 친구는이 그들,을 가지고있는 사람 어떤 차이를 느끼지 못할 것입니다. 그들은 변경할 필요가 없습니다 것입니다 자신의 코드 중 어느 그러나 그들은 볼 것 그들의 CardView 최대 재미있게되었다. 즉, 구성 요소에 대한 좋은 부분입니다. 

확인을, 우리의 CardView에 자, 시도하자 우리가 단계적으로하고 있는지를 추적 아래에 직면하고 있습니다. 반작용에서 우리는 처음으로이 작업을 수행 초기 상태를 지정. 어디에서 카드를 시작합니까? 

그래서 getInitialState라는 함수를 수 기능, 우리는 객체를 반환합니다. 이 개체는 어떤 상태를 포함하고 상태는 키 - 값 쌍입니다. 지시한다에서와 마찬가지로, 당신은 키가 이름이 문자열처럼 값, 당신은. 

이 경우의 전면에 해당하는 가정 해 봅시다. 이것은 우리가 상태를 말한다. 국가의 한 구성 요소 전면라는 속성입니다. [들림], 기본적으로 그래서, 우리는 카드 전면에있어, 우리는이를 변경할 수 있습니다 로 우리는 카드를 뒤집습니다. 이해가? 

좋아, 그럼에 지금, 우리가있어, 렌더링 질문과 답변을 게재합니다. 이제 우리가해야 할 일 질문을 표시한다 우리는 카드 앞면에 있다면 그렇게 대답은 카드 뒷면입니다. 모두 만들 이유 카드 대화 형. 그럼이 여기를 해보자. 음, 첫 번째 단지 변수를 확인합니다. 우리는 this.state.front 지금 요청할 수 있습니다. 우리는 같은 우리를 상태에 액세스 액세스 소품, 그래서 this.state.front. 

우리가 앞에 있다면, 다음 텍스트 this.props.card.question입니다. 우리는 앞쪽에 있다면 카드, 우리가 시도하고 잡아거야 카드에서 질문입니다. 그렇지 않으면, 우리는 뒷면에 있다면 카드, 우리는 무엇을해야합니까? 

청중 : 대답? 

NEEL 메타 : 그래, 그래서 텍스트 this.props.card.answer 같습니다. 당신이 발견하는 경우에, 우리는 사용하고 상태는 결정을 내릴 이제 구성 요소 때문에 다르게 나타납니다 이 그것으로 상호 작용하는 방식을 기반으로. 그래서 그 대신이를 인쇄, 우리는 단지 텍스트를 인쇄 할 수 있습니다. 쿨, 지금, 당신이 보는대로, 우리는 질문을 참조하십시오. 그리고 여기에 직접 상태를 변경하는 경우 앞이 거짓에 우리는 42 다시 얻을. 

그래서, 다시,이 구성 요소 자신의 상태를 가지고있다. 버튼이 있는지 여부를 알고처럼 그것은, 가압 여부 지났 이 일이 켜져있는 것을 알고 앞면 또는 뒷면에. 기본적으로는 전면이다. 그리고이 전면에 있다면, 우리는 질문을 인쇄 할 수 있습니다. 그 뒷면에 있다면, 우리는거야 대답을 인쇄 할 수 있습니다. 그래서, 다시, 정보 주어진는 동일합니다. 그것은 단지 다른 모습 당신이 그것을 프로그래밍 방법에 따라. 따라서, 예를 들어, 페이스 북 메신저, 동일한 데이터 소스를 얻을 경우에도 그것은 다를 수 있습니다 상태가 다르기 때문에. 당신은보고있다 다른 사람의 메시지. 

좋아, 그럼이 모두 잘하고 좋은,하지만 지금 무슨 일이 사실이다 여부, 변경 우리가 할 수 있도록 우리 카드는 전면 또는 후면입니다. 우리는 플립을 추가하여이 작업을 수행 할 수 있습니다 버튼, 카드에 버튼이 그것은 [들리지]의 경우 카드를 뒤집어 것입니다. 그래서 여기,이 버튼을 추가 할 수 버튼이 버튼은 플립을 말할 것이다. 

그리고 지금, 그것을 아무것도하지 않습니다. 그냥 좋은 보인다. 우리가 할 수있는 것은 우리가 클릭을 추가 할 수있다 핸들러는, onClick에는 this.flip 동일 우리는 나중에 플립을 정의합니다. 그러나 기본적으로, onClick에 함수입니다 사용자가 클릭 할 때 호출됩니다. 

그래서 버튼을 알게 될 것이다 이를 클릭 한 때. 그것을 클릭하고있어 갔다, 이는 카드를 뒤집 것이다. 그것은 당신과 같은 종류의 피자 배달 남자. 당신은 같은 모든 권리, 때마다 사람 난 지금, 피자를 제공합니다, 저를 호출? 

이 리스너를 등록합니다. 당신은 이벤트를 수신. 당신이라고, 언제받을 이벤트 당신이 무언가를, 발생합니다. 당신은 피자를 얻을. 이 경우에는 경우에있어 클릭, 당신은 카드를 뒤집습니다. 

그래서 우리를 정의해야 카드를 플립 것 기능, 그래서 우리는 그 권리를 쓸 것이다 여기에, 기능을 플립. 그래서 당신은 플립이 어떤 작업을 수행하는지 생각하십니까? 또이 때 호출되는 우리는 플립 버튼을 클릭합니다. 기능 플립 어떻게해야합니까? 

청중 : 변경 this.state.front 사실에서 참으로 거짓 false로. 

NEEL 메타 : 그래, 그래서 가지고 어떤 this.front 전면 상태가 is--. 경우, 앞의 상태를 취할 그것은 거짓하게, 사실입니다. 그것이 거짓이라면, 오른쪽, 그것이 사실 확인? 그럼 그 시도 할 수 있습니다. 

당신은 상태를 변경할 수 없습니다 다만 this.state을 수행하여. 당신은이 작업을 수행 할 수 없습니다. 당신은 할 수 없습니다. 사용자는 기능을 사용해야 this.setState했다. 

그래서 당신은 this.setState 앞을 말할 수있다 콜론이 경우, 다시, 느낌표 점은 그 반대를 의미한다. 나는이 경우 같아요. state.front 사실, 그것은 잘못된 설정합니다. 그래서 우리는 상태를 설정합니다 사실에서 false로. 그것이 거짓이라면, 우리는거야 true로 false를 설정합니다. 

그냥 우리가 설정하고 약간 얻을 것을 알 수 다르게, 그래서이 해 봅시다. 우루루 빙은, 이것 좀 봐. 플립 버튼이 것 상태를 백업하는 전면 전환합니다. 

당신이 볼 경우 그리고 여기 반작용의 마법의 약간. 우리가 그것을 말한 적이처럼 다시 렌더링합니다. 우리는 무엇이든을 다시 그리기 말한 적이 없어요. 당신은이 일을하는 경우 반작용없이, 당신은 좋겠 때 이러시면 좋아했다 플립 버튼, 클릭 당신은 그것을 이야기해야 할 것이다 수동으로 오른쪽, 다시 렌더링? 

정말 시원 반응 당신 경우 그것을 특정 상태와 속성을 제공, 항상 렌더링 똑같은 일이. 그래서 우리가 이제까지 우리가 변경할 때 상태와 특성, 반응 단지 전체를 다시는 - 렌더링합니다. 그것은이 있다고 알고있다 일대일 대응 상태 및 매개 변수와 HTML 사이. 그래서 때마다 그 중 하나를 설정 상태를 통해에 의해 변경, 그것은 변경하는 방법 유료 다시 렌더링된다. 그래서 기본적으로 반작용은 같다 변경을 기다리고. 

때마다 뭔가를 변경, 이는 전체 페이지를 다시 렌더링하는 것. 그리고 그것은 비효율적 소리 경우, 이 것 때문에 그것은이다 하지만 반응은 물건을 사용 그림자 DOM했다. 대신 직접 페이지를 그리기, 그것을 메모리에 가상의 HTML 트리를 유지합니다. 

알다시피, HTML은 나무처럼, 계층 적 데이터 구조 등을 포함한다. 그것은 메모리에 가짜 나무를 유지 당신이 페이지를 업데이트 할 때마다, 또 다른 가짜를 그릴 것 트리, 그것은 계산 것 무엇은 할 필요가 변경 페이지는 두 그루의 나무가 동일하게합니다. 그러니까 기본적으로, 그것은 사실상 많은 재 - 렌더링합니다. 그리고 그것은 단지 등이 변경 작은 비틀기 페이지는 필요에 따라, 그래서 그것은 매우, 매우, 매우 효율적입니다. 

그래서 기본적으로 반응 때마다 당신이 뭔가를 변경, 그것은 재 렌더링 사실상 페이지를합니다. 내가 무엇을해야합니까 알아낼 것이다 실제 페이지를 반영하기 위해 변경 가상 페이지는, 그리고 그렇게 할 것입니다. 즉, 가상 DOM이다. 그것은 가장 큰 중 하나입니다 의 기능은 반응한다. 

말이 돼? 질문? 네? 

청중 : 어떻게 MVC에 여전히 비교 우리에 대한 이야기​​를하는 것이 같은 자원 이전. 

NEEL 메타 : 네, 질문 이 MVC에 비교하는 방법이다? 당신은 자원에 대해 물었다. 음,이 기능을하는 방법에 대해 얘기해 보자. 

MVC에서는 모델을 업데이트 할 것입니다. 이 경우 우리는 카드 모델이있을 것이다. 보기는있을 것입니다 플립 버튼, 제어 플립 기능을 가질 것이다. 그래서보기를 말할 것 컨트롤러는 플립 플립합니다. 플립을 말할 것 변경 모델, 오른쪽? 

그래서 당신은 MVC 당신, 작업을 수행 할 때 모델 변경을 수신, 당신은 다시 렌더링 따라보기. 아니면 그냥 좋아해야 컨트롤러가 있습니다. 다음 모델 변경 기다린 선택 및 물건 등의 부분을 선택 바꾸다. 여기서 우리는 한 가지를 가지고, 그러나 큰 응용 프로그램에서, 당신은 무엇을 기억하고 좋아해야 모든 단일 장소의 변화, 그래서 조금 짜증나. 그래서 좋은 반작용 그것은 그림자 돔을 가지고 있기 때문에. 그것은 단지에 감당할 수 전체 일을 다시 작성하십시오. 당신은 선택적으로 필요가 없습니다 같은 업데이트 할 것을 생각한다. 

페이스 북에서 당신이 좋아하는 경우 MVC에서, 새로운 메시지가, 당신이 기억해야 할 것이다 확인, 상황을 타개 상단의 페이지 메시지 아이콘. 또한 하단에 새 창을 팝업. 또한 해당 창에서 새 일을합니다. 또한 사운드를 재생합니다. 

즉 물건을 많이이다 같은 시간에 외출. 그리고 당신은하지 않도록 경우 그림자 돔을 가지고, 당신은 좋겠 그 때문에 수동으로 할 필요가 당신은 전체 페이지를 제거 얻을 수 없습니다. 당신은 여유가 없다, 그래서 당신은 수동으로 각각의 일을 변경하려면, 이는 MVC 정말 짜증나. 

그래서 순서대로하면 될 검소, 그들이 선택적으로 인 페이지를 업데이트 효율적으로, 또한 짜증나. 에 있기 때문에 그림자의 반작용 돔, 당신은 무료로 두 가지를 얻을. 그것은 효율적 때문에 그림자 돔의. 병목 페이지를 갱신한다. 그것은 나무의 조작을하고 아니에요. 당신은 효율성을 얻을. 또한 사용의 용이성 때문에 얻을 당신은 전체 페이지를 다시 작성하는 경우, 하지만 당신은, 좋아, 일을 알고있다 어딘가에 페이지에있을 것입니다. 그것은 다른 위치에있을 수도 있지만 그것은 바로, 페이지에있을거야? 그래서 당신은 다시 렌더링 전체 것은 사실상, 당신은 몇 가지를 만들 수 있습니다 페이지 자체를 변경. 

그래서, 다시, MVC 당신의 선택해야 사용 편의성과 효율성 사이 당신이 모두 얻을 반응한다. 그래서 좋습니다. 이해가? 고체. 

좋아, 그럼 이제 얘기해 보자 보자 4 단계에 대해 조금, 우리가 어떻게 구성 요소를 포함 할 수 있습니다. 그래서 우리는 지금이 권리가 있습니다. 우리는 우리의 멋진 작은 버튼이 있습니다. 우리는 그것을 다시 뒤집어 수 있으며, 앞으로, 그게이하는 모두이다. 의 우리가 원하는 가정 해 봅시다 다른 구성 요소를 가지고있다. 이제 우리의 플래시 카드 애플 리케이션해야한다고 가정 해 봅시다 모든 카드리스트를 포함 당신은, 그래서 우리를 의미 다른 구성 요소가 있어야합니다. 글쎄, 목록보기를 호출합니다. 이제 목록보기를 만들어 보자 그 CardView와 공존, 이 목록보기 및 CardView 함께 일을 좋아합니다. 그리고 당신은 그들을 결합 할 수 있습니다 당신을 위해 우리의 응용 프로그램을 확인합니다. 

그래서 먼저,을 만들어 보자 더 두개의 카드는 바로. 의 말을하자, 어떤 카드? 그리고 너무 난 필요 없어 그것의 입력에 구멍을, 난 그냥 여기에서 복사거야. 그래서 내가하지에 갈거야 그것을 하나의 카드를 제공합니다. 나는 그것을 카드의 배열을 줄거야. 그래서 먼저 애플 리케이션 지금은 휴식 것. 좋아, 그래서 우리는 할거야 이 수는 여러 개의 카드를 처리합니다. 그래서 첫 번째, 우리는 그것을 제공하지 않는거야 단 하나의 카드 만 카드의 배열, 카드 목록 등을들 수있다. 이 경우, 우리는 이들 세 가지가있다. 

좋아, 응용 프로그램이 그래서 그렇게 목록 카드를 얻기 위하여려고하고, 그것을 결정하는거야하는 하나는 CardView에 표시합니다. CardView 수 있습니다 만 하나의 카드 만 응용 프로그램을 렌더링 오른쪽, 모든 카드리스트를 얻는다? 

그래서 당신은 하나를 알아낼 때 카드, CardView에주는 당신은 당신이 할 수있을 것 같아요하는 방법 결정을 할 수있는 카드에 대한 보여? 당신에게 힌트를 제공하기 위해, 일시적이다 당신은 어떤 카드를 볼 수있을 것입니다. 페이지를 새로 고칠 경우에, 당신은거야 그냥 첫 번째 카드로 이동합니다. 그것은 일시적이기 때문에 그건 괜찮아요. 우리는 어떤 기술을 사용할 수 있는가? 

청중 : 당신은 변수를 만들 수 있습니다 그래서 당신은 앞을했다처럼. 이것이 사실, 당신은 할 수 현재 카드 1에 해당 있나요? 

NEEL 메타 : 네, 그래서 오른쪽 상태를 갖고 싶어? 당신의 상태를 사용합니다 구성 요소는 알아낼 어떤 카드는 우리가하고 싶지 않습니다. 우리는 추천 목록을 가지고 모든 카드, 우리는거야 알아 내기 위해 상태를 사용 제 1 카드의 하나, 그래서 두 번째 카드, 세 번째 카드 및. 

따라서 응용 프로그램은 그래서 응용 프로그램을 얻을 것이다 , getInitialState 기능을 갖지 getInitialState 함수 반환. 그리고 우리는 단지 activeIndex 0을 말할 것이다. 그래서 지금 우리의 응용 프로그램은 자신의 상태를 가지고있다. 

그리고 지금 알아 내기 위해, 렌더링 카드는 그냥 배열에 가자 그 인덱스의 일을 잡아. 선택 카드와 동일 this.props.cards this.state.activeIndex. 당신은 여기에서 볼 그래서, 소품 및 상태는 실제로 함께 작동합니다. 그래서 지금 우리가 우리의 activeCard을 가​​지고, 우리는 그것을 activeCard 전화 할게 이 작동하는지 보자. [알아들을 수 없는] 

오, 텍스트 오류였다. 아. 

쿨, 그래, 이제 우리는 다시했다 우리가 전에 있었던 곳, 오른쪽? 제외하고는 똑같은 프로그램 지금 우리는 지원할 수 카드리스트뿐 아니라 하나의 카드. 그리고 지금, 다시, 우리는 변경하는 경우 activeIndex, 우리는 0에서 1로 갈 수있다 지금 그 두 번째 카드, 그리고, 우리는 0에 갔다. 그래서 여기에 새로운 기능 재미있게 우리의 버전을. 

좋아, 그럼 이제 목록보기를하자 그 당신의 프로그램에있는 모든 카드를 보여줍니다 그래서 우리는 새로운 만들어 줄게 구성 요소 목록보기를했다. 리스트 뷰가 react.createClass 동일 보자. 그래서 우리는 순서가없는 렌더링 할 모든 카드에 대한 목록 항목으로 나열합니다. 그래서 우리는 카드의 무리가 있습니다. 우리는 하나의 목록 항목을 원하는 모든 카드, 오른쪽? 우리는 루프를 할 수 또는 뭔가 새로운 목록 항목을 확인합니다. 그러나 방법 당신은 그것을 할 반응,지도라는 것을 사용합니다. 지도는 도구 나 사용하는 기능입니다 즉, 모든 항목에 대해, 일부 기능을 실행, 반환 값을 취하고, 당신이 다시를 제공합니다. 

예를 들어, 우리는 어레이가되도록 1, 2, 3.map의 function-- 본 대한 속기 function-- X 화살표 X 배 X. 이것은 모든 번호를 말한다 1, 2, 3, 받아. 그것을 광장, 그것을 다시 제공합니다. 그래서 당신은 (1) 무엇을 생각 하는가, 2, 3.map의 X는 X 시간에 간다 X는 당신이 다시 주어진 부여합니다 이 기능은 그 해당 배열의 모든 요소에서 실행됩니다. 

청중 : 1, 4 (9)? 

NEEL 메타 : 그래, 1, 4, 9 당신은 1 회 1을 수행하기 때문이다. 그것은 당신에게 하나를 제공합니다. 즉, 첫 번째 요소이다. 

2 회 2은 4입니다. 즉, 두 번째 요소입니다. 3 회 3은 9입니다. 즉, 세 번째 요소입니다. 이해가? 그래서 맵 기술을 가지고 기능 프로그래머에 사용, 의 새로운 스타일 뭔가를 프로그래밍 목록에있는 모든 요소. 그리고이 익숙한 소리. 우리는 카드의 목록을 가지고있다. 우리는 모든에 대한 목록 항목을 얻으려면 하나는, 그래서 우리는 여기지도를 사용합니다. 우리는 목록 같음을 보자, 말할 것이다 this.props, 카드,지도. 

그래서 우리가있어, 카드를 제공 리스트 항목을 생성하는 것 그것의 그 카드의 내용면. 그냥 우리가주고 싶어한다고 가정 해 봅시다 카드는 그렇게 card.question 질문. 따라서이 목록에 포함 된 LI의 또는 목록 항목의 배열 여기서 하나의리스트가있다 모든 카드에 대한 항목, 그리고 그 카드에 문제가 있습니다. 이해가? 

쿨, 그래서 지금하자 실제로을 인쇄 할 수 있습니다. 그래서 우리는 UL를 반환합니다. 그 순서없는 목록 안쪽에, 우리는 단지 전체 목록을 충실합니다 그들이 우리를 준. 시원한. 

좋아, 그래서 지금이 목록보기는 찾을 작동합니다. 목록보기에 대한 질문? 당신은 카드의 무리가 있습니다. 당신은 모든 카드에 대한 목록 항목을 확인합니다. 그리고 당신은 정렬되지 않은 안에 넣어 목록은, 당신은 그것을 다시 제공합니다. 그래서 이제 우리가 포함 역할을 할 수 우리의 응용 프로그램의 내부에, 그래서 우리는, 목록보기를이 작업을 수행 할 수 있습니다. 무엇 인수 우리가보기 목록으로 이동합니까? 어떤 속성을 우리는 그것을 줄 수 있습니까? 당신이 줄 경우, 기억 그 카드의 무리, 이 목록을 만들거야 그 카드를 볼 수 있습니다. 그래서 우리는 무엇을 통과 할 것 여기에 인수로? 청중 : 카드의 목록? NEEL 메타 : 네, 카드 때문에 오른쪽 this.props.cards 같다? 그래서 유일한 문제 당신은 할 수있다 렌더링 한 최상위 요소를 설정 그래서 당신은 사업부에서 포장 해. 그것은 이상한. 그래서 그 경우 보자. 그 작동합니까? 

네, 거기 당신은 간다. 그래서 지금 우리는 목록을 가지고 맨 아래에있는 카드, 그리고, 우리는 우리가 위에 자체 CardView, 그리고 그 사이의 플립 것 카드의 양측. 지금은 그것을 어떻게했는지 그게 말이됩니까? 그래, 그래서 다시, 우리는 두 가지 구성 요소가 있습니다. 제 1 컴포넌트 인화 아웃리스트에있는 모든 카드. 즉, 목록보기입니다. 그리고 두 번째 구성 요소 그냥 카드를 출력합니다. 당신이 그것을 특정 카드를주는 경우에, 그것은거야 그 카드에 대한 정보를 인쇄 당신이 앞뒤로 뒤집어 보자. 

우리가 원하는 경우, 우리가 시도하고 이야기 할 수 있도록 여기에 몇 가지 새로운 기능을 추가하는 방법에 대한. 그렇지 않으면 우리는 좀 더 이야기 할 수 반응기의 속도의 약, 또는 우리는 대답 할 수 질문은 당신은 할 수 있습니다 이 때문에 핵심 부품의 모든 아르 의 난에 대해 이야기하려는 반응한다. 우리는 앞서 갈 수 있습니다. 우리는 질문에 응답 할 수 있습니다. 당신이 원하는 무엇이든. 

청중 : 당신은 사용할 수 일반 자바 스크립트의 JSX? 또는 뭔가입니다 [들림]와 함께? 

NEEL 메타는 : 문제는 깡통이다 당신은 일반 자바 스크립트 JSX를 사용합니까? 대답은 '예입니다. JSX 그냥하는 방법이 걸립니다 그 안에 HTML을 가지고 자바 스크립트, 그리고 자바 스크립트로 컴파일합니다 그 안에 HTML을 가지고 있지 않습니다. 그래서 이렇게 여기에서 알 수 that-- 알 수 있습니다. 당신이 DIV처럼 가지고있는 것처럼이 보인다 당신은 그 안에 물건을 가지고있다. 

즉, 자바 스크립트로 컴파일 그 같은 같은 일을 생성합니다. 나는 무슨 말인지하는 것으로 추측 이처럼 JSX, 그냥 구문입니다 자바 스크립트 처리기 많은 PHP와 같은 HTML에 대한 처리기입니다. JSC는 처리기입니다 자바 스크립트를 그것은 수 있습니다 당신은 당신의 자바 스크립트 내부 HTML을했습니다. 그리고 당신은 바로 변압기가있는 경우 이는 [들림]라는 것입니다, 어떤 변환됩니다. 오른쪽 처리기, 당신이 그렇게 할 수 있습니다. 

청중 : [들리지] NEEL 메타 : 일반적으로 당신은 필요가 없습니다 자바 스크립트의 내부 HTML을 넣어 당신의 행함하지 않는 반응한다. 하지만 당신은 어쨌든 그것을 할 수 있습니다. 네? 

청중 : 나는 당신을 생각 반작용 설명했다 기능적인 프로그래밍 언어로. 우리는 CS50에서 C를 배우고 있었어요. C는 또한 기능적인 언어인가? NEEL 메타 : 그래서 질문 기능에 관한 것입니다 라는 또 다른 것은 대 필수 또는 절차 적 프로그래밍. 인기 프로그램의 두 가지 종류가 있습니다. 하나는, 절차 호출되는 모든 일을 명령 등에 관한 것입니다 하나는 모든이다, 작동 기능을 갖는 데에 대해 이러한 입력 및 출력. 반응은 기능적 패러다임이다. C는 매우 절차 패러다임이다. 

그리고 예로서, 예를 들어 C, 이 선언적인 방법을하지 않는다 프로그램을 제작, 오른쪽? 당신은 말할 필요도,이를 인쇄 할 수 있습니다. 이 데이터 구조를 변경합니다. 이 인쇄. 그것은 모든 명령에 관하여이다. 

반작용에서이 아니다 많은 명령. 그것은 필요에 대한 모든이야 구성 요소는 함께 넣어. 그들은 기능 같은거야. 당신은 함수처럼이 CardView라고, 있는 기능입니다 즉, 입력, 출력이 그래서 반작용 전부입니다 이 철학에 대한 당신이 데이터를 having--의 우리. 이를 통해 통과 알고리즘과 거 출력 HTML 당신을 그냥 페이지를 인쇄 그래서 당신이해야 그것을 조각으로 조각을 구축 할 수 있습니다. 

그래서에 대한 은유를 그리는 것을 내가 전에 말했듯이, 당신은 방법을 알고 페이스 북에서 당신은 메시지를받을 경우 당신은 업데이트 할 어떤 부분을 선택, 그 절차입니다. 그것은 바로, 필수인가? 좋아, 내가 메시지를 받았습니다. 의이 계정을 변경하자. 

의 여기에 창을 팝업 보자. 의이 계정을 변경하자. 의는 여기를 그려 보자. 즉 절차 적 접근 방식이다. 

즉, 각도처럼 무슨 일이야 부스트, 백본, 다른 프레임 워크를 사용합니다. 반응은 작동합니다. 그것은 매우 다른 방법 의 것들에 대해 생각. 이의는하자의 이런 생각을합니다 기능 또는 것 알고리즘 그것을 데이터를 제공합니다. 그것은 뱉어 것입니다 무엇을 컴퓨터, 그리고해야 밖으로 무게 처리됩니다. 당신은 그것을 직접 처리하지 않습니다. 그 의미가 조금합니까? 네? 

청중 : 기능적인 언어로, 모든 것을 한 번에 어떻게됩니까? 

NEEL 메타 : 아니, 일이 순서대로 일어난다. 여기처럼 여전히 존재 주문 있지만하지 않는다 등의 순서로 일어날 , 명령, 칭찬. 그것은 순서대로 일어나는 기능은 당신에게 출력을 제공합니다. 다른 기능에 넣습니다. 다른에 넣 기능, 다른 기능. 

당신은 CS51을 할 경우, 당신은거야 기능 프로그램 내용 이러한 범위의 밖으로 약간. 그러나 기본적으로, 무슨 일이 있습니다 반응 멋진뿐만 아니라입니다 단방향 데이터 흐름 가상 돔, 하지만의이 생각 함수형 프로그래밍. 그리고 함수형 프로그래밍은 매우 간단합니다 구도에서 멋진 물건을 만들기 위해, 그것은 생각하는 것은 매우 쉽다 약 약 이유. 그래서 반작용의 또 다른 좋은 무승부입니다. 더 이상의 질문? 네? 

청중 : 음, 왜 것 VAR에 반대하게 사용할 수 있습니까? 

NEEL 메타 : 그래서 질문은 왜 대신 VAR의하자 사용합니까? 이라는 것입니다 ES6 또는 ECMAScript를 6. 그것은 자바 스크립트의 새 버전입니다. 기술적 인 이유로 한 무리가있다, 그러나하자가 VAR의 더 나은 버전입니다. 

당신은 변수를 선언하는 방법이있다. 당신은 할 수 있습니다. 당신은 VAR를 사용할 수 있습니다. 하자 기술의 무리가 있습니다 당신이 그들을 볼 수 reasons-- 더 나은 이유에 대한 later--까지. 기본적으로, ES6는 멋진이 새 구문, 몇 가지 새로운 기능 기존 자바 스크립트의 상단에. 

그래서 우리는 오분처럼있다. 난 그냥 얘기하고 싶었 한 가지 더 정말 빨리. 질문이 있다면, 의이 후에 얘기하자. 그러나 너무이 도착 카메라에 잡힌, 나는 단지 그 방법에 대해 조금 얘기하고 싶어요 실제로 앱으로 반응 사용합니다. 

당신이 여기 있다면, Facebook.GitHub.IO/react, 이 반작용 용 홈 페이지이며 당신이 실제로 사용하는 방법을 보여 드리겠습니다 페이지에 반응한다. 기본적으로, 약간의 복잡한 반작용 설치하려고합니다. 그냥 드래그 그것은는 쉬운 일이 아니다 거기에 자바 스크립트를 놓습니다. 

당신은 당신의 변압기가 있어야 그것은 이전과 같이, 어떤이됩니다 설정, 로 JSX을 설정 일반 자바 스크립트. 당신은 그거야 일에이 당신이 정상으로 ES6 컴파일합니다. 자바 스크립트는 이동이 많이있다 부품 당신이해야 할, 그래서 일이있다 보좌관, Yeoman.io했다. 그리고이 명령 줄 도구는거야입니다 당신이 당신의 반응 밖으로 폴딩 도움 쉽게 프로젝트. 

그래서 당신은 이것에 대해 읽을 수 있습니다 나중에,하지만 몇 가지 도구가 있습니다 보좌관이 제공하는. 그들은 반작용 당신이 만들 수 있습니다 내장 모두와 함께 응용 프로그램. 이 구축 한 것처럼 구성 요소에 내장되어 있습니다. 그것은 당신의 변압기가 내장되어 있습니다. 그들은 멋진을 많이 가지고 물건은 자동으로 내장 발전기 불리는 이러한 것들을 사용. 

만약 당신이 좋아하면, 그래서 이것에 대해 읽어보십시오. 그냥 보좌관, Y-E-O-M-A-N 및 갈 당신은 이와 같은 발전기를 찾을 수 있습니다. 그리고 같은 발전기 이, 당신은 단지 하나를 좋아한다 몇 명령 줄 명령입니다. 그것은을 폴딩 할 것이다 전체 당신을위한 응용 프로그램을 반응한다. 그것은 모든 수동 배관을 얻을 것이다, 그리고 지루한 작업은, 당신을 위해 수행 이 방금 초점 이유 그냥 쓰기에 반응한다. 

그래서 기본적으로 구축 응용 프로그램은 간단한 일은 반응한다. 그것은 모두 함께 유선,하지만 것이 당신을 위해 그것을 할 것이다 도구입니다. 당신이 만들고 싶어 반작용 그래서 응용 프로그램은, 그런 식으로 일을하려고합니다. 당신은 단지 실험을 할 경우, 이 CodePen를 사용하여 시도 할 수 있습니다 이 CodePen이 있기 때문에 모든 배선 반응. 난 이미 당신을 위해 모든 작업을 완료했습니다. 

당신처럼 만들고 싶어한다면 생산 응용 프로그램 반응 해제하려면 이들 발전기 중 하나를 시도해보십시오. 당신은 단지 재생하려면 주위에, 종종 단지 가치 같은 여기 CodePen에 주위를 연주 해보십시오. 좋은 소리? 시원한. 

그래서 내가 가진 전부입니다. 다시, 모든 코드 및 예는 여기에이 웹 사이트에 될 것이다. 그래서, 다시, 우리는 이야기하지 않았다 대한 반작용의 많은 구문, 그러나 모든 사람을 찾을 수 있습니다 작은 구문 세부 사항, 그것은 가능한 모든 될 것 여기에이 웹 사이트에. 

그래서 내가 좋아하는 것을 권 해드립니다 첫 번째 단계를 취할. 당신의 CodePen에 넣어. 만드는 작업을 시도 그 두 번째 단계. 이 제 4 단계는, 그리고 단지 당신이 그에게서 얻는 경우를 참조하십시오. 

더 이상의 질문은, 확인 또는 해당 페이지에서 저를 이메일을 보내. 그건 내 이메일입니다. 그러나 나는 어떤을 도와 싶어요 당신에 대해 가질 수있는 질문은 반응한다. 그래서, 네, 그게 내가 가진 전부입니다. 매우에 대한 여러분 모두 감사합니다 보고 또는 참석합니다. 그리고 나는 질문 할게요 당신은 지금이 이후에있을 수 있습니다. 그래서 시청에 대한 여러분 모두 감사합니다.