[音樂播放] NEEL MEHTA：這不言而喻。 好了，各位，歡迎網絡 與未來的應用程序反應。 這是CS50。 我的名字是尼爾。 我是一個TA的CS50和大二 在哈佛學院和一個非常，非常 熱情的Web開發人員。 所以我非常令人興奮的 今日跟你說話， 無論你是在這裡還是在家裡 看，大約反應，這是再次 正如我所說的Web應用程序，未來。 等反應過來是一個Web框架。 正如我已經告訴 有些人在這裡， 一個框架，只是一個 一套工具，你可以使用 構建和構建Web應用程序。 和Web應用程序是，再次，網站 這是互動的，如Facebook， Twitter.com，Instagram.com，等等。 所以，Facebook是一個Web框架 這是由實開發 幾年back--發生反應。 它後來被用於 Facebook在其移動應用程序 和Web應用程序，Instagram的。 汗學院是另一 反應過來突出早期採用者。 這真的是越來越 非常受歡迎。 如果你使用的東西，像角或 骨幹網，這是同一個家族的， 但它有自遠 超過他們的知名度。 這是熱門的新事物。 這是真的，真的很大。 而等反應過來是好的不只是作為一個 網絡框架建立接口。 這是很好的構建Web界面。 還有一件事 所謂陣營本土其中 讓您建立接口 對於Android和iOS 在未來，也許其它平台 只使用相同的JavaScript代碼。 您可以使用完全相同的 JavaScript代碼來呈現網站， 為使Android應用和iOS應用。 這是一個非常，非常激動人心的時刻。 這是一個非常，非常酷的機會。 這的確是一個普遍的網絡 界面開發工具， 所以這是一個非常，非常 重要的是要知道的。 而且，正如我告訴人們 之前，這一點，我認為， 將改變我們如何 構建Web應用程序，直到永遠。 因此，這也許有點誇張，但我 認為這是一個相當不錯的東西就知道了。 好了，有什麼反應是？ 反應是一個框架，你可以 用於構建接口。 一個接口是，再次， 一個網頁，對不對？ 因此，這裡的Instagram.com，用途反應。 反應是建立在 想法的組件。 組件是一個HTML 元素類固醇， 所以HTML元素就像一個按鈕。 這是一個段落。 這是一個標題，對不對？ 和的Instagram將使用這些，但它 也將使用陣營的組件。 反應成分 改裝成了式HTML元素 有他們自己的行為 包含在其中。 所以，作為一個例子，我們可以有 時間元素，時間分量， 其中將包含類似 時間戳，要知道， 配置文件組件，它 將包含個人資料圖片 和該人的名字。 它可以有一個像計數器，這 可以指望像喜歡的號碼， 如果你點擊它，它會 增加喜歡的數目。 一個組件僅僅是一個 一串HTML代碼 有一些功能 包裹在它的內部。 所以，它就像一個HTML元素 對類固醇，正如我以前說過。 你可以把這些組件， 你可以把它們放在一起 使新的部件， 這種情況下，一個後部件， 它包含了所有這些東西。 這將包括時間，檔案， LikeCounter，也許評論 也許圖像本身。 所以Web應用程序是通過採取剛建 組件並把它們放在一起。 一個Instagram的飼料無非是 一堆帖子此起彼伏， 每個帖子包含類似的時間， 個人，Li​​keCounter，等等。 這有點像蓋房子。 你不建 房子從上而下。 你把元件 - 你 取像浴室。 你把你堅持他們的bedroom-- 在一起，你有一個新的組成部分。 你有房子的一個新的組成部分。 等反應過來是所有圍繞 這種思想的組件的那 是互動的，那是聲明。 就像你剛才說什麼 信息是，並且它呈現它。 他們是組合的。 你可以把一個時代和一個配置文件，把 他們在一起，讓更好的東西。 而且他們是可重複使用的，因此，如果您 在源代碼後， 你可以嵌入任何地方。 您可以嵌入一個Instagram的 在自己的網站上的東西。 你可以在Facebook的嵌入，例如， 只要它使用陣營為好。 因此，組件是真的，真的，真的 紙幅的強大積木 可以在任何地方使用，並把 在一起，使新的積木。 那是非常，非常 高層次的概述。 因此，再次，如果你有 在任何時候任何疑問 關於電抗器，哲學 編碼，阻止了我，讓我知道。 好了，等反應過來是很酷，因為它 具有尋找一種不同的方式 你如何構建Web應用程序。 你可能聽說過的MVC，一對 模型，你在CS50或任何控制 其他使用探測類。 和大多數的框架是 圍繞MVC的想法。 反應不大。 REACT是圍繞想法 單向數據流的 所看到的這個圖表或圖形在這裡。 基本上，你有一個數據源。 和數據源將決定 如何佈局某些組件。 和部件將 然後，當它們發生變化， 他們會告訴 數據源來改變。 要使用Instagram的 例如，你可能有 喜歡交對象的列表 在數據庫或什麼的。 的數據。 然後我們交的組件 將這些數據， 並使用這些數據來呈現 在屏幕上的東西。 這就是箭頭 從數據到組件是， 然後該相同的數據是用來 渲染一堆組件。 在Facebook的使者，為 例如，這是反應， 你可能有一個清單 信息作為數據源。 而這會使不 消息僅列表 也是你的朋友列表。 你有未讀郵件數。 也許還可能導致Facebook的事情 這就是在Facebook.com的底部。 相同的數據是一個 真理的單一來源 並引起了很多 部件要呈現。 每當其中的一個 成分改變時， 它可以追溯到和 改變的數據源。 您發送一條消息，對不對？ 改變數據源。 你讀你的郵件， 所以，你可以讀為0。 改變數據源。 並注意所有這些之一的 箭頭回到相同的數據 源代碼，所以你知道， 給予一定的數據集， 你確切地知道是什麼 頁面將會是什麼樣的。 這是確定的。 你要知道，給予一定的數據，是什麼 該頁面將會是什麼樣的。 你可以預測它是如何去 行為和事情的進展 當他們放在一起工作。 如果我有一百萬的組件 在這裡，它會表現得一樣的吧？ 你不會有任何 奇怪的互連。 一個數據呈現一萬個零件。 一百萬成分可 回去和編輯數據。 所以，這是非常好的。 我們正在構建組合的， 易可伸縮的Web應用程序。 你有一個數據源， 真理的來源。 這告訴你的組件 如何佈局的頁面， 和部件將 處理互動。 如果他們想改變 的事情，只是回去 並告訴數據源來改變。 合理？ 等反應過來是怎麼一回事的理解 如何建立一個組件 如何使你的組件 與外界交互。 使得組件進行交互 與外界 採用另一種技術 所謂的流量，這 是一個框架，是 加在陣營的頂部。 我們不會談論這一點。 我們將更多地談論，因為 數據時，你怎麼能呈現一個組成部分？ 而等反應過來是真的很酷，因為你 可以使用它與任何你想要的後端。 如果你有一個像Python的後端， 如果你的Python能吐出一些數據， 反應可以呈現它。 如果你沒有JS輸出 數據，陣營呈現它。 紅寶石導軌與 數據作出反應呈現它。 等反應過來基本上是一個網絡 view--與部件的前端 任何數據源的任何責任。 所以打算從數據源 反應成分是很容易的。 走另一條路是有點困難。 使用助焊劑正如我前面提到。 我們不會進入的。 我們將重點更多地放在 數據到組件的一面。 這種方式可以使 酷，好玩的網絡應用程序。 也不會影響外界 現在，但那是另一回事。 好了，如果你在這裡 我最後一次研討會 你就會知道所有的代碼是 今天的演講將是在這個網址 在這裡，對不起，這個網址在這裡。 基本上我們會去 通過四個步驟，也許五， 恐怕不是五。 我們將移動通過四個步驟 構建一個樣品的陣營應用程序。 所以所有的源代碼 對於每一步 將是在這裡，所以，如果 你沿著之後在家裡， 隨意細讀這段代碼。 如果你在這裡下沿， 我們將其顯示在屏幕上， 所以不用擔心。 但是，如果你是在家裡，感覺 免費訪問這個網站。 而且，是的，你應該能夠得到 你會永遠在這裡需要的代碼。 所以這是一個很好的備忘單，以及 為你的未來冒險反應。 酷，所以如果大家誰在這裡， 即使你是在家裡， 拉起這個網站，is.gd/cs50react， 沒有資本，沒有下劃線，什麼都沒有。 你會看到一個頁面，看起來 有點像這樣。 這是一個叫CodePen的事情。 CodePen是一個協作 編碼環境 與我可以編寫代碼在這裡， 它會自動發送給你。 而這種方式，我可以編寫代碼。 我可以在這裡運行代碼。 為example--如果它reloads--參見 我在網頁上運行的JavaScript代碼 就在這裡，它會 自動渲染網頁 這個JavaScript代碼。 所以這是一種 我們嘗試代碼 而不必使用真快 我們的ID或使用我們本地機器 或什麼的。 這是一個非常快速的方式為您樣機 並測試各種不同的代碼。 所以我將要採取 示例代碼，把它在這裡。 我們將通過它來工作。 如果你是在家裡，你 可以拉這件事為好。 我已經安裝了 反應在這裡，所以你可以只 在這裡編寫自己的代碼，並 嘗試，因為你自己的遊樂場。 是啊，如果每個人都 在這裡打開了這個鏈接。 請給我一個大拇指 了，一旦你打開它。 優酷，酷爽。 這裡沒有什麼，現在，但 我們將改變很快。 好了，等反應過來是一個JavaScript 庫，正因為如此， 需要JavaScript的知識， 這是網絡編程語言。 而且它被用於其他的事情 現在太多，但主要是網頁開發 語言，因此，如果您不熟悉 即，讀一個叫JSforCats.com網站。 太好了。 你可以學習JavaScript 在半小時內。 這是令人難以置信的。 因此，不妨一讀。 我們也是一個很大的HTML在這裡，因為 我們在設計過程中的網頁。 所以，如果你不熟悉 HTML，檢查出HTMLdog.com。 我認為學習陣營是 如果你已經萬倍更容易 知道的構建塊。 如果您擁有的組件，它的 容易使一個更大的組件。 這是陣營的語言為您服務。 因此，繼續前進，並給 這些東西讀。 暫停該視頻。 不妨一讀，如果你是 在家裡，如果你不 熟悉HTML或JavaScript 好了，我們要去 做的是我們要做出 使用陣營一個非常基本的燒錄卡的應用程序。 我們將有一個閃卡。 您可以翻轉卡來回。 同時我們也將有名單 所有我們有卡， 如果我們感覺 雄心勃勃，我們可能會 能之間切換 汽車通過點擊。 但是，這是你的裸露， 骨頭，一個非常簡單的應用程序作出反應。 所以這實際上是 不容易實現， 但我們要表明的是，如果你這樣做 這一點，這是非常，非常容易將其擴展 如果其他人來幫您吧。 因此，我們要經過四個步驟 從頭開始建立這個。 好了，這四個步驟，我們將 與第一步驟開始。 第一步驟將是 構建第一個組件。 正如我以前說過，一個組件陣營 僅僅是對類固醇的HTML元素。 它指定的HTML 和一些行為，並且它 將指定的人 可以用它的交互方式 那就內部狀態。 就像一個按鈕，就會知道怎麼樣多 時間它被點擊，例如， 它會知道如何打好自己的。 因此，讓我們繼續前進，建立我們 使用JavaScript第一個組件。 因此，如果語法看起來怪異， 這是一種，因為它是。 所以，再一次，我們要去 做一個叫做變量 應用程序使用關鍵字讓， 這使得一個變量， 讓應用程序相同React.createClass。 反應是一個庫，具有 在創建類的功能。 而這個功能是 一些代碼，你 可以用它來創建一個新的 類型響應組件。 所以React.createClass 使一個元件， 與此組件將 能夠做到的東西。 最主要的是可以做的是使 東西，呈現為一個功能。 再次，如果該指數不明顯 你，我建議你去JS貓 而檢查出來。 是放大不夠好？ 涼。 所以，每一個部件需要 有渲染功能。 渲染功能說， 我該怎麼打印屏幕上的？ 但是組件是 如果沒有無用 知道打印在屏幕上什麼，所以 你需要有一個渲染功能。 因此，在渲染的東西，你 只需要返回一些HTML。 什麼是酷的是， 有一個東西叫 JSX，這是一個擴展 的JavaScript所使用的反應。 它讓你裡面寫HTML 你的JavaScript中，這 聽起來有點不可思議，當 你先想想， 但它使一個很大的意義之後。 因此，我們可以做到這一點。 如果您熟悉HTML，我知道 我們有與通用一個div 容器的東西。 我們可以返回一個div和內 這個分區，我們可以把東西。 所以我們可以說，我們想呈現剛 直線式燒錄卡了。 燒錄卡，我會說， 將有一個問題和答案。 所以這個DIV中，讓我們 打印出一個段 這說的問題 - 什麼是 最終的答案生命，宇宙？ 然後，答案是 將是，當然，42。 這並沒有拿出很好的。 是啊，所以基本上你可真 編寫HTML你的JavaScript中。 而這將是 打印輸出到屏幕上。 因此，讓我們嘗試一下。 因此，我們有我們的組件。 我們需要告訴陣營放 屏幕上的分量 所以React.render，所以請注意，我們 把應用程序像任何其他元素。 我們寫它，因為它是一個HTML元素。 像，而不是說像IMG 圖像或P的段落， 你寫的應用程序，那麼應用程序是 像對待一個HTML元素。 正如我前面所說，這是 類固醇的元素。 所以，你渲染應用程序，你 給它一個地方把它。 這是你怎麼能 告訴它放在哪裡。 我創建的一個簡單的div 頁面調用頁面的ID， 而這也正是該 元素的要去。 而且我們不打算使用HTML運行。 基本上這是會得到 把這個頁面元素內 我們已經在屏幕上。 所以它運行這段代碼，並提請本 在屏幕上的東西，所以我們在這裡。 我們已經取得了我們的第一個作出反應的組成部分。 因此，只是作為一個回顧，我們輕輕地做 新類型的組件，對不對？ 這是什麼React.createClass。 而在這部分，我們 告訴它應該怎樣做。 每當這個組件是 被印刷到屏幕上， 它會打印出與DIV 這兩款在它的內部。 而我們所做的事情，我們做了一個新的應用程序 使用尖括號的應用程序的符號。 我們告訴它，把它 裡面的頁面元素。 所以我做了什麼，它創造 從模板創建新的應用程序。 然後我告訴它渲染。 所以說，OK，應用程序， 我要打印出來？ 應用程序說，去打印出一個div 與它內部的兩個段落。 瞧，還有我們的分度， 兩段它裡面。 有意義這麼遠嗎？ 所以，再一次，整個挑戰作出反應 只是知道如何做組件。 如何使 組件協同工作。 現在，我們已經取得了我們的第一個 組件，讓我們返回 並進行組件定制。 所以，你在HTML知道你 可以給你的按鈕類？ 你可以給你的錨在href。 你可以給你輸入的類型，對不對？ 你可以給更多的自定義 屬性應用到所有的元素 使其更有趣。 我們其實可以做 同樣的事情。 所以我們可以說，我們希望我們的 應用程序去提供任何卡。 現在我們只是 呈現一個硬編碼卡。 我們知道，只有一個 卡可以做，所以我們 要試著改變這種現在這麼 我們可以只給它一些卡。 它會打印出存儲卡。 你應該試著讓你的 組件非常通用。 於是就這樣，我可以發郵件 這是我的朋友，是這樣， 無論燒錄卡你， 只是將其送到這裡， 它會自行做。 你可以把其他 事情在自己的應用程序。 但首先，讓我們來打破這種 成兩個部件， 但我們要分開卡 印刷部分從實際的應用程序的一部分。 所以我們所能做的就是我們 可從應用程序改變這種 到CardView，只是一個 對於應用程序的新名稱， 我們可以做一個新的 部分所謂的應用程序， 不要混淆與舊應用程序。 我們已經得到了createClass， 而像在HTML中， 你可以嵌套陣營組件 內彼此的。 因此，在這個渲染功能， 函數返回CardView， 而這是完全一樣的東西。 為什麼這是同樣的事情？ 相反渲染只是該應用程序的那 有div和配對在它的內部， 該應用呈現CardView，和 CardView呈現DIV和段落。 因此，這是我們的第一個例子 彼此的內部嵌套元素。 那有意義嗎？ 所以，再一次，我們有一個CardView元素。 我們的應用程序的元素 那它比。 好了，我們希望我們的CardView--如果你 提供一個良好的CardView一定的卡， 它會打印出你的，對嗎？ 因此，首先，我們需要一張卡， 讓我們做一個卡片對象。 因此，讓我的卡equal-- 如果你都熟悉， 這還僅僅是符號的制定 對象在JavaScript中。 這有點像一個struct 在C，所以我們做了一個卡， 所以現在我們可以通過這個卡 屬性或作為在HTML中的一個屬性 術語，我們的應用程序。 因此，我們可以做到這一點，應用程序 卡等於myCard。 你知道如何輸入，你做 輸入型等於文本或按鈕 類的equals BTN的引導，？ 同樣的想法，應用卡equals-- 你得把括號這裡 - 應用卡等於myCard，所以這 說我們有這個卡的對象。 我也要把它作為一個 屬性的應用程序組件。 而這個應用程序組件將 能夠訪問它，做 有趣的東西吧。 因此，我們的應用程序將是 給一張卡，所以現在， 讓我們的應用程序，只需給 卡到CardView 本身因為喜歡的應用程序是不是 要知道做什麼用呢， 所以我們只把它給CardView。 因此，我們將通過它的 同樣的方式，卡等於， 因此每個組件可以訪問 事情已經交給它。 他們可以訪問的屬性 已給它 使用此語法，this.props.card。 所以會發生什麼這裡 你有myCard對象。 你將它傳遞到應用程序 使用應用程序卡等於myCard。 該卡的對象是給你的應用程序。 該應用程序可以訪問它 作為this.props.card。 這有點像一個形象 知道它的來源。 這個應用程序知道它的卡 是，它可以做的東西用它。 它可以做計算。 它能夠根據關閉它的決定。 現在，我要通過 this.props.card到CardView。 有意義這麼遠嗎？ 它會更有意義吧。 好了，現在我們在CardView。 我們CardView，鑑於該卡，應 打印出的問題和答案。 現在，我們只是打印出一些 硬編碼的問題和答案。 我們需要計算out--我們需要 問他們給了我們卡 什麼是問題和答案， 然後打印出來到屏幕上。 因此，我們可以在這裡做到這一點。 在渲染begin--先做等於。 因此，我們在這裡所做的是，我們知道， 該卡是給了我們一個屬性， 對？ 它給我們作為輸入。 就像這幾乎就像 參數的函數。 該卡是一個參數 幾乎到了這個CardView。 我們將抽取，並把 入變量的問題。 確保答案去 該變量的答案。 提示該卡回答。 現在，我們有這些， 而不是打印出來的文字， 我們要打印出 不管他們給了我們。 因此，這stuff--所以我們要 撲滅問題答案。 讓我們來看看，如果這個工程。 酷，所以讓我們來看它 一個更多的時間只是要確定。 所以，我的卡是卡的對象，我們 被賦予該卡的應用程序。 和應用程序將要採取的 卡並把它交給CardView。 而這個CardView說，如果你 給我任何燒錄卡的對象， 我會打印出了問題 它的答案，對嗎？ 因此，我可以做的是，我可以 發送該代碼，第一 像10行代碼的我，給我的朋友。 他可以將它嵌入到 他自己的應用程序。 而只要他做了同樣的事情， 像CardView卡等於這一點， 只要他所創造的CardView 並賦予它正確的信息， 他可以使自己的卡。 所以這樣一來，這是一個非常 為您打造酷路 使用對方，正確的組件嗎？ 這張卡，我可以公佈 這CardView在互聯網上， 人們將能夠使用它。 所以基本上，它就像之一 標準函數​​在C庫。 它是一個函數，其中 有人寫它。 你給一定的投入。 它會產生一定的輸出。 你不在乎它是如何工作的內部。 只要你給它正確的 輸入時，它會做出正確的輸出。 和組件可以是 想到了同樣的方式。 這CardView像 庫函數。 如果你給它一些卡 作為一個屬性，它會 打印出該卡中的內容。 如果我改變我的卡樣 而不是像什麼是5 + 37， 它會相應更新。 因此，只要通過改變輸入， 它得到了一定的輸出。 所以，你能想到的組件幾乎 如本方式的功能，其中 你可以放在一起。 你得到的輸入，像這樣CardView 作為輸入，所得到的輸出。 在這種情況下，輸出是HTML。 有意義這麼遠嗎？ 酷，如此反复，性質 您如何傳遞信息 流入和流出組件。 好了，讓我們這 東西互動。 現在它是一種無聊的。 什麼是[聽不清]？ 您可以打印出一些， 但是這一切都可以做。 因此，讓我們回到 老問題，只是現在。 好了，現在這些組件 很無趣，因為他們做的， 他們得到的輸入。 他們使輸出的，對不對？ 這是一種無聊的。 我們希望有我們的 組件能夠有 某種內部狀態， 像想起了什麼。 對於燒錄卡，對於 例如，什麼樣的狀態 也許你想 記得一個燒錄卡？ 什麼臨時身份 也許你要記住 在閃卡應用程序中的燒錄卡？ 聽眾：無論是被翻轉？ NEEL MEHTA：對，沒錯。 所以，你可能想保留 賽道是你面對或有 你面對倒在卡上。 在Facebook上，例如，你會 希望新聞提要中記得在哪裡 是你還是喜歡誰的個人資料 你現在做。 在Messenger中，像什麼文字，你 請在輸入框中，對不對？ 如果您刷新頁面，它就會消失。 但是，你真的不關心。 這只是暫時的。 是嗎？ 聽眾：[聽不清] NEEL MEHTA：像一道閃光 卡，就像你可以看到 問題的側面或答案的一面？ 聽眾：OK。 NEEL MEHTA：像 雙面燒錄卡，對吧？ 是啊，所以你要 有這種想法的現在 我有屬性，這就好比投入， 但是狀態，這是暫時的，嗯， 您是否在網頁上，對不對？ 同樣，我在Facebook稱 信使，我喜歡它的人 您正在查看的Facebook 還是誰的個人資料，對不對？ 這只是暫時的。 它顯示給用戶的重要 這是怎麼回事，但刷新​​頁面。 這其實並不重要。 所以這是暫時的狀態， 所以大家都它的狀態。 所以，再一次，有國家和道具。 道具被輸入給 從數據源。 國家就像是默認值。 這就像東西， 使得東西互動。 因此，在我們CardView--讓我們 我們CardView--所以這是很好的。 我們要在這裡做什麼，我們要去 觸摸CardView只有CardView。 所以，我的朋友，誰得到了這一點，他們 不會注意到任何區別。 他們不會有改變 任何自己的代碼， 但他們會看到他們的 CardView得到了改裝成了。 這是有關組件的一個很好的一部分。 好了，我們CardView，讓我們試著 跟踪我們是否正在逐步起來 或朝下。 在陣營，我們做到這一點，首先 指定的初始狀態。 在什麼地方卡了麼？ 所以，是一個叫getInitialState的功能 功能，我們返回一個對象。 這個對象包含了一些狀態， 一個國家僅僅是一個鍵值對。 就像不同的指示，你有一個鍵和一個 值，你有喜歡的名字是一個字符串。 在這種情況下，我們說前面是真實的。 這是說，我們有一個狀態。 國家的一個組成部分 是所謂的前一個屬性。 [聽不清]，因此默認情況下， 我們是在卡的正面， 我們可以改變這個 因為我們翻轉卡。 合理？ 好了，在渲染，現在，我們 顯示問題和答案。 現在，我們應該做些什麼 被顯示的問題 如果我們在卡的正面等等 答案是為卡的背面。 這就是為什麼你都使 該卡互動。 因此，讓我們嘗試並為此在這裡。 好了，先只是做一個變量。 我們現在可以問this.state.front。 我們訪問狀態同樣我們 獲得道具，所以this.state.front。 如果我們前面，然後文本 是this.props.card.question。 如果我們是在的前面 卡，我們將嘗試和抓斗 這個問題從卡。 否則，如果我們在後面 卡，我們怎麼辦？ 聽眾：答案？ NEEL MEHTA：是的，所以文 等於this.props.card.answer。 但是，如果你注意，我們使用 的狀態來作出決定 因為現在的部件 結果可能有所不同 根據關如何將這些與它進行交互。 因此，而不是打印出這一點， 我們就打印出的文字。 酷，所以現在，你看， 我們只看到了問題。 如果我手動更改狀態這裡 到前是假的，我們得到42回。 因此，再次，該組件 有它自己的狀態。 就像一個按鈕知道是否 它被按下， 這件事情知道什麼是對 前面或後面。 默認情況下，它的前面。 然後，如果它是在前面， 我們將打印出的問題。 如果是在後面，我們將 打印出來的答案。 因此，再次，該信息 定是相同的。 它只是看起來不一樣 根據您如何編程。 因此，例如，臉譜信使 即使你得到了相同的數據源， 它可能看起來不同 因為國家是不同的。 你正在尋找一個 不同的人的消息。 好了，這是所有好， 不錯，但現在有什麼實際 使我們能夠改變，無論是 我們的卡是正面或背面。 我們可以通過添加一個翻動要這樣做 按鈕，按鈕的卡那 將翻轉卡，如果是[聽不清]。 因此，讓我們在這裡添加一個按鈕，這 按鈕，這個按鈕將翻轉。 所以現在，它 沒有做任何事情。 它只是看起來不錯。 我們所能做的就是，我們可以添加一個點擊 處理程序的onClick等於this.flip， 我們將在後​​面定義翻轉。 但基本上，的onClick 是一個函數， 當用戶點擊它被調用。 因此，該按鈕就會知道 當它被點擊。 走到它被點擊， 它會翻轉卡。 這有點像你 比薩快遞員。 你喜歡，沒事，只要人 打電話給我，我會送披薩，對不對？ 你註冊這個監聽器。 你聽的事件。 你被調用，並且當 事件發生時，你做一些事情。 你得到的比薩。 在這種情況下，當你 點擊，你翻轉卡片。 因此，我們需要定義一個 功能，將翻轉卡， 因此，我們將編寫一個正確的 在這裡，翻頁功能。 所以你覺得翻蓋會做什麼？ 同樣，這被調用時， 我們點擊翻頁按鈕。 我應該功能翻轉呢？ 聽眾：更改this.state.front 從真到假的，假的真。 NEEL MEHTA：是的，所以採取一切 this.front is--前狀態。 就拿前面的狀態下，如果 這是真的，讓假的。 如果是假的，它是真的，對不對？ 因此，讓我們試試吧。 你不能改變狀態 只是做this.state。 你不能做到這一點。 你不能做到這一點。 你必須使用的函數 所謂this.setState。 所以，你可以說this.setState前 結腸這個那裡，再次感嘆 點裝置相反。 我想，如果這一點。 state.front 是真實的，它會變成假的。 因此，我們將設置狀態 從真為假。 如果是假的，我們將 將其設置為false為true。 只是注意到我們設置和獲取略 方式不同，所以讓我們試試這個。 Bada堆，看看這個。 翻轉按鈕將現 切換前後的狀態。 所以，在這裡就是你看到一個 發生反應的魔法點點。 就像我們從來沒有告訴它它重新呈現。 我們從來沒有告訴它重繪什麼。 如果你這樣做 沒有反應，你會 已用於：喜歡當 點擊翻頁按鈕， 你得告訴它 手動重新渲染，對不對？ 反應過來是真的很酷，因為如果你 給它一個特定的狀態和屬性， 它總是呈現 同樣的事情。 所以，當我們過我們改變 狀態和性能， 反應過來剛剛重新呈現整個事情。 它知道，有一個 一對一的對應關係 之間的狀態和參數和HTML。 所以每當無論是那些 通過一組狀態變化， 它會改變如何 薪酬重新呈現。 所以基本上陣營就像是 等待著你去改變。 每當它改變的東西， 它會重新呈現整個頁面。 如果這聽起來效率低下， 這是因為這將是， 但反應使用的東西 稱為影子DOM。 代替直接繪製頁的，它 保持虛擬的HTML樹在內存中。 要知道，HTML是像一棵樹， 像以分層數據結構。 它使一個假樹在內存中， 每當你更新頁面， 它會得出另一種假 樹，它會計算 它需要做什麼改變 頁面，使兩棵樹相等。 所以基本上，它幾乎 重新呈現了很多。 然後，它只是喜歡改變 在小的調整頁面可以根據需要， 所以這是非常，非常，非常有效。 所以基本上陣營將 每當你想改變什麼， 它會重新渲染實際上的頁面。 它會找出我需要 改變以使真實頁反映 虛擬頁面，它會做到這一點。 這就是虛擬DOM。 這是一個最大的 功能反應。 那有意義嗎？ 任何問題？ 是嗎？ 聽眾：如何 比較仍對MVC 我們談到了 像之前的資源。 NEEL MEHTA：是的，這個問題 是它如何比較MVC？ 你問到的資源。 好吧，讓我們來談談它是如何發揮作用。 在MVC中，你會更新模型。 在這種情況下，我們就會有一個卡型號。 該視圖將有 翻轉按鈕，並且控制 將有翻頁功能。 因此，該視圖會告訴 控制器翻轉翻轉。 翻轉會告訴 模式改變，對不對？ 所以，當你做一個MVC，你 監聽模式改變， 你重新呈現相應的視圖。 或者你只是喜歡 有控制器。 等待模式改變，然後 挑選像一個東西的一部分 改變。 在這裡，我們有一件事， 但在一個大的應用程序， 你要像記住什麼 在每一個地方的變化， 所以這是一個有點惱人。 而等反應過來是好的 因為它有一個影子大教堂。 它可以負擔得起，只是 重寫了整個事情。 你不必以選擇性 喜歡猜來更新內容。 在Facebook上，如果你喜歡 得到一個新的消息，在MVC中， 你必須記住， OK，改變的東西 在的上方 頁，消息圖標。 同時彈出一個新窗口的底部。 另外，還要在該窗口中的新事物。 同時播放聲音。 這是一個很大的東西 外出同時。 所以，如果你不 有一個影子大教堂，你會 不得不說，因為手工做 你無法擺脫整個頁面。 你不能，那麼你有 手動更改每一件事情， 這是MVC真的很煩。 因此，為了要 節儉，他們有選擇 更新頁面，這是 效率高，而且煩人。 在陣營因為陰影， 大教堂，你會得到兩件事是免費的。 這是有效的，因為 的陰影大教堂。 瓶頸正在更新的頁面。 它沒有做的樹操作。 你得到的效率。 您還可以使用的便利性，因為 如果你只是重寫整個頁面， 但你只要知道，沒事，這個事情 將要在頁面上的某個地方。 它可能是在不同的地方，但 這將在頁面上，對不對？ 所以，你只要重新呈現 整個事情實際上， 你可能會做一些 改變頁面本身。 所以，再一次，在MVC你 不得不選擇 易用性和效率之間， 並做出反應，你會得到兩個。 因此，它是更好的。 合理？ 固體。 好了，讓我們來看看讓我們來談談 有關步驟4的一點點， 我們如何能夠嵌入組件。 因此，我們有這個權利吧。 我們有自己的涼爽的小按鈕。 我們可以翻轉回去， 第四，這是所有它。 比方說，我們要 有其它成分。 比方說，我們的燒錄卡的應用程序應 包含所有的卡的列表 你有，那麼這意味著我們 應該有另一個組件。 好吧，也許把它稱為列表視圖。 讓我們做一個列表視圖 共存的CardView， 這個列表視圖和CardView 會喜歡一起工作。 你可以將它們結合起來 使我們的應用程序為您服務。 因此，首先，讓我們做一個 夫婦更多的卡的權利。 比方說，什麼卡？ 而且，這樣我就不必 孔與你鍵入它， 我只是把它從這裡複製。 所以我會不 給它只有一張卡。 我要去給它卡陣列。 所以首先應用程序 要打破現在。 好了，所以我們要做出 這能夠處理多張卡。 因此，首先，我們要放棄它，而不是 只有一張卡，但卡的陣列， 像卡的列表。 在這種情況下，我們有三個。 好吧，那麼這樣的應用程序是 要得到一個清單卡， 而這將決定哪些 一個顯示為CardView。 該CardView只能 渲染一張卡，但應用程序 得到所有卡的列表，對不對？ 當你找出一個，這樣 卡給CardView， 你會如何想你也許能 做出決定哪些卡 以顯示？ 為了給你一個提示，這是暫時 你會查看某個卡。 如果您刷新頁面，你會 剛回到第一張牌。 這是確定的，因為它是暫時的。 也許，我們使用的是什麼技術？ 聽眾：你可以做一個變量 所以就像你有前面。 這是真的，你可以 有當前卡片等於1？ NEEL MEHTA：是的，所以我們 希望有國家的吧？ 你會使用狀態的 組件搞清楚 該卡做我們想要得到的。 像我們有一個列表 所有的牌，我們將 使用狀態搞清楚 頭牌之一， 第二張牌，第三張牌，依此類推。 因此，一個應用程序，所以一個應用程序將獲得一個 有getInitialState的功能， getInitialState的函數返回。 我們只想說activeIndex 0。 所以，現在我們的應用程序有它自己的狀態。 所以現在的渲染，找出 一個卡，我們只是去陣列 和搶東西指數。 選擇卡等於this.props.cards this.state.activeIndex。 所以，當你看到這裡，道具和 國家實際工作在一起。 所以，現在，我們有我們activeCard， 我們會打電話給它activeCard， 讓我們來看看，如果這個工程。 [聽不清] 哦，這是一個文字錯誤。 啊。 酷，是的，所以現在我們回到 到我們面前，對不對？ 除了老一套程序 現在我們可以支持 卡列表，而不僅僅是一張卡。 而現在，同樣，如果我們改變 activeIndex，我們可以從0到1， 而現在，第二張牌， 然後我們去了0。 所以這裡有一個新的 改裝成了後續版本我們的。 好了，現在我們有一個列表視圖 顯示在你的程序中所有的牌， 所以，我們要創造一個新的 部分所謂的ListView。 我們的ListView等於react.createClass。 因此，我們想呈現一個無序 列出與每一個卡列表項。 因此，我們有一堆的卡。 我們想要一個列表項 對於每一個卡，對吧？ 我們可以做一個for循環或 什麼使一個新的列表項。 但是你的方式做到這一點的 反應過來，使用一個名為地圖的事情。 地圖是一種工具，或者您使用函數 對於每一個項目，運行一些功能， 需要返回值， 為您提供了回來。 因此，作為一個例子，我們有陣列 1，2，3.map function--和這 被簡寫為 function-- X向x次的X. 這是說，對於每一個數字 在1，2，3，把它。 方它，並給它回來。 所以，你有什麼感想1， 2，3.map X的範圍是到x倍 X允許你回來給 這個功能是 運行該數組中的每個元素。 聽眾：1，4 9？ NEEL MEHTA：是的，1，4，9 因為你做1次1。 這給了你一個。 這是第一個元素。 2次2 4。 這是第二個因素。 3次3 9。 這是第三個元素。 合理？ 因此，地圖有一個技術，你 在功能程序員使用， 新樣式 編程做某事 在你的列表中的每個元素。 所以這聽起來很熟悉。 我們有卡的列表。 我們希望得到每一個列表項 之一，所以我們就用地圖在這裡。 我們會說，讓列表平等 this.props，卡，地圖。 因此賦予了卡，我們 要生成一個列表項 使用該卡的內容，它的一邊。 遠的不說，我們想給出來 卡問題，以便card.question。 所以這個列表包含 李的或列表項的數組 那裡有一個列表 對於每一張牌的項目， 和包含該卡片的問題。 合理？ 酷，所以現在讓我們來 實際打印了這一點。 因此，我們將返回一個UL認證。 在那個無序列表， 我們就堅持整個列表 他們給了我們。 涼。 好了，所以現在這個 列表視圖工作只是找到。 有關列表視圖中的任何問題？ 你有一堆的卡。 你的每一張牌打表項。 你把他們內部的無序 列表，你給它回來。 所以，現在，讓我們採取行動，所以我們嵌入 這裡面我們的應用程序中， 所以我們可以做到這一點，列表視圖。 什麼參數我們傳遞給列表視圖？ 我們給什麼樣的屬性呢？ 請記住，如果你給 這一堆的卡， 它會榜上無名 查看這些卡。 那麼，我們會通過 這裡的說法？ 聽眾：中卡的列表？ NEEL MEHTA：是啊，所以卡 等於this.props.cards，對不對？ 所以，唯一的問題 是，你只能 翻了頂級元素的渲染， 所以你必須把它包在一個div。 有點奇怪。 因此，讓我們如果看看。 這是否工作？ 是的，你去那裡。 所以，現在我們有一個列表 在底部卡， 然後，我們有我們的 CardView本身之上， 並且，將間翻轉 該卡的兩側。 現在，這是否使意義上，我是怎麼做的？ 是啊，如此反复，我們有兩個組成部分。 第一組分打印 每卡在列表中。 這是列表視圖。 和第二組分 打印出這一點卡。 如果你給它一個特定的卡，它會 打印出有關該卡信息 讓你來回翻轉。 因此，如果我們願意，我們可以嘗試和談話 有關添加一些新的功能了這一點。 否則，我們可以談一點 關於反應器的速度的， 或者我們可以回答 問題，你可能有 因為這些是所有的核心部件的 的反應，我想談談。 我們可以繼續前進。 我們可以回答問題。 任何你想要的。 聽眾：您可以使用 JSX在正常的JavaScript？ 或者是一些 與[聽不清]來了？ NEEL MEHTA：可問題是， 使用JSX與普通的JavaScript？ 答案是肯定的。 JSX只是它的一個方法需要你 JavaScript的，有HTML在其內部， 它編譯成的JavaScript 它裡面沒有HTML。 所以注意that--所以在這裡看到。 這看起來像你有這樣的div 你有東西在它的內部。 這編譯成的JavaScript 像生成同樣的事情。 我想我要說的是， JSX只是一個語法，喜歡它的 一個預處理器的JavaScript多 如PHP是一個預處理的HTML。 JSC是一個預處理 對JavaScript，讓 你把你的HTML的JavaScript內。 所以，如果你有合適的變壓器 這是一個叫[聽不清]的事， 這將改變。 正確的預處理， 它會告訴你這樣做。 聽眾：[聽不清] NEEL MEHTA：通常不需要 把HTML JavaScript的內 除非你做的反應。 但是你可以最好這樣做。 是的？ 觀眾：我想你 所描述陣營 作為功能的編程語言。 我們一直在學習C的CS50。 是C也是一種功能性的語言？ NEEL MEHTA：所以問題 是有關功能 而不是其它的東西叫 命令式或過程式編程。 有2種受歡迎的節目。 一個被稱為程序，這 是所有喜歡做的命令， 一個是功能性的，這是所有 關於有功能，有 輸入以及輸出。 反應是一種功能性的範例。 C是一種非常程序範例。 作為一個例子，C例如 你不這樣做聲明的方式 使得程序的，對不對？ 你不得不說，打印本。 更改此數據結構。 打印。 這是關於命令。 在反應過來，有沒有 許多命令。 這是所有關於有 你的組件放在一起。 他們喜歡的功能。 你有這樣的函數 所謂CardView， 這是一個功能 具有輸入，輸出， 而等反應過來是所有 這個理念 我們having--你的數據。 您可以通過這個傳遞 算法，它會 輸出HTML，你 剛剛打印的頁面， 所以你必須 構建它一塊一塊。 因此，要畫一個比喻來什麼 我之前說的，你知道如何 在Facebook上，如果你得到一個消息， 你選擇什麼樣的零件更新， 這是程序。 這是必要的，對不對？ 好吧，我得到了一個消息。 讓我們改變帳戶存在。 讓我們在這裡彈出一個窗口。 讓我們改變帳戶存在。 讓我們得出這樣的在這裡。 這是一個程序性的方法。 這就是像角， 升壓，骨幹，其他的框架使用。 反應是功能。 這是一個非常不同的方式 思維的事情。 它需要這樣的想法，讓我們的 函數或算法，將你 給它的數據。 它會吐出什麼 應，並在計算機 將稱量出的照顧。 你不自己處理。 這是否看得懂一點點？ 是嗎？ 聽眾：在函數式語言， 在一次一切都發生？ NEEL MEHTA：不，事情發生在秩序。 喜歡這裡仍然有 秩序，但它不 發生在為了像 讚揚，命令，命令。 它發生的順序 功能為您提供了輸出。 它放入另一個函數。 它放入另一 功能，另一種功能。 如果你這樣做CS51，你會 學習功能的程序 有點超出這個範圍。 但基本上，是什麼讓 反應酷不僅是 單向數據流 和虛擬的Dom， 而且這個想法 函數式編程。 和函數式編程是很容易 撰寫和製作很酷的東西出來， 而且很容易想到 約和推理。 因此，它反應過來另一個很好的平局。 還有什麼問題嗎？ 是嗎？ 聽眾：嗯，你為什麼會 使用讓相對於VAR？ NEEL MEHTA：所以，問題是 為什麼要使用我們的不是var？ 這是一個東西叫 ES6或ECMAScript中6。 它是JavaScript的新版本。 有一幫技術原因， 但讓​​VAR是一個更好的版本。 這是你如何聲明變量。 您可以使用讓。 您可以使用VAR。 讓我們有一堆技術 reasons--你可以看看他們 達later--為什麼它更好。 基本上，ES6有一些不錯 新的語法，一些新功能 在舊的JavaScript的頂部。 因此，我們有一個像五分鐘。 我只是想談談 一件事真正的快速。 如果你有任何問題， 讓我們在這之後再說吧。 但是，僅僅讓這得到 風行照相機，我只是 要談一點關於如何 實際使用陣營在你的應用程序。 如果你走在這裡， Facebook.GitHub.IO/react， 這是陣營的主頁， 它會告訴你如何實際使用 反應在你的頁面。 基本上，這是一個有點 複雜嘗試安裝反應。 這不是那麼容易，因為你只需將 拖放一個JavaScript在那裡。 你必須有你的變壓器 成立，這將像以前那樣， 把你的JSX成 正常的JavaScript。 你要的東西，會 編譯你ES6正常。 JavaScript的有很多的感動 部分你必須做的，所以這是一個事 所謂的約曼，Yeoman.io。 這是一個命令行工具，它會 幫助你腳手架你的陣營 項目很容易。 所以，你可以閱讀有關此 以後，但也有一些工具 這約曼提供。 他們會告訴你創建一個陣營 應用程序的一切內置的。 喜歡的話就已經建立 在，部件內置的。 這將有你的變壓器內置的。 他們有很多很酷 東西自動建立 使用這些東西叫做發電機。 所以，閱讀關於這一點，如果你喜歡。 剛去的約曼，Y-E-O-M-A-N，和 你可以找到這樣的發電機。 而隨著像發電機 這些，你宛若一體 一對夫婦的命令行命令。 這將腳手架出來的 整個陣營的應用程序為您服務。 它會得到所有的人工管道， 而瑣碎的工作做了你， 這就是為什麼你只關注 在剛剛寫反應。 所以基本上構建 反應過來的應用程序是平凡的。 它連接在一起，但有 一些工具會為你做它。 所以，如果你想使一個陣營 應用程序，嘗試做這種方式。 如果你只是想嘗試， 您可以嘗試使用此CodePen 因為這個CodePen有 所有的反應接線。 我已經做了所有的工作適合你了。 所以，如果你想使像 產量釋放作出反應的應用程序， 試試這些發電機中的一個。 如果你只是想發揮 各地，往往就只值 喜歡嘗試CodePen打在這裡。 聽起來不錯？ 涼。 所以這就是我的一切。 再次，所有的代碼和實例是 將要在這個網站在這裡。 所以，再一次，我們沒有說話 約陣營的很多語法， 但要找到所有這些 小的語法細節， 這一切都將是可用 在這個網站在這裡。 因此，我建議你喜歡 邁出第一步。 把它放進你的CodePen。 試著努力使 它向所述第二步驟。 有一個第四步，只是 看到您從獲得。 任何問題，請檢查 出該頁面或給我發電子郵件。 這是我的電子郵件。 不過，我很樂意幫助你的任何 你可能對問題作出反應。 所以，是的，這就是我的一切。 謝謝大家非常多的 觀看或出席。 我會採取任何問題 你可能在這之後了。 所以，感謝大家的收看。