[MUSIC CHƠI] 

Neel Mehta: Ở đây nó đi. 

Vâng, tất cả mọi người, chào mừng bạn đến web ứng dụng của tương lai với phản ứng lại. Đây là CS50. Tên tôi là Neel. Tôi là một kỹ thuật cho CS50 và một sinh viên năm hai tại trường Cao đẳng và rất, rất Harvard nhà phát triển web đam mê. Vì vậy, tôi rất thú vị để được nói chuyện với bạn ngày hôm nay, cho dù bạn đang ở đây hay ở nhà xem, về phản ứng lại, đó là, một lần nữa như tôi đã nói, tương lai của các ứng dụng web. 

Vì vậy, phản ứng lại là một khuôn khổ web. Và như tôi đã nói để một số người dân ở đây, một khuôn khổ chỉ là một thiết lập các công cụ bạn có thể sử dụng để cấu trúc và xây dựng ứng dụng web của bạn. Và các ứng dụng web là, một lần nữa, các trang web có tính tương tác như Facebook, Twitter.com, Instagram.com, bất cứ điều gì. 

Vì vậy, Facebook là một khuôn khổ web được phát triển bởi Facebook một vài năm back-- Phản ứng là. Nó cũng được sử dụng trong Facebook trên các ứng dụng di động của họ và các ứng dụng web, Instagram. Khan Academy là một nhận nuôi con nuôi nổi tiếng ban đầu của phản ứng lại. 

Nó thực sự đã nhận được cực kỳ phổ biến. Nếu bạn đã từng sử dụng những thứ như góc hoặc Xương sống, đây là của cùng một gia đình, nhưng nó có từ xa vượt nổi tiếng của họ. Đó là điều mới nóng. Nó thực sự, thực sự rất lớn. 

Và do đó, phản ứng lại là tốt không chỉ là một khung web cho các giao diện tòa nhà. Nó là tốt để xây dựng các giao diện web. Có còn là một điều Phản ứng đó gọi là Native cho phép bạn xây dựng các giao diện cho Android và iOS và các nền tảng có thể khác trong tương lai chỉ sử dụng mã JavaScript cùng. Bạn có thể sử dụng chính xác cùng Mã JavaScript để render các trang web, để vẽ lại các ứng dụng Android và iOS. 

Đó là một thời gian rất, rất thú vị. Đó là một cơ hội thực sự, thực sự mát mẻ. Nó thực sự là một web phổ công cụ phát triển giao diện, vì vậy nó là rất, rất Điều quan trọng cần biết. Và, như tôi đã nói với mọi người trước, điều này, tôi nghĩ rằng, là sẽ thay đổi cách chúng tôi xây dựng các ứng dụng web mãi mãi. Vì vậy, nó có thể là một sự cường điệu chút, nhưng tôi nghĩ rằng đó là một điều khá tốt để biết. 

OK, vì vậy những gì là phản ứng lại? Phản ứng là một khuôn khổ bạn có thể sử dụng để xây dựng các giao diện. Một giao diện là, một lần nữa, một trang web, phải không? Vì vậy, đây là Instagram.com, sử dụng phản ứng lại. 

Phản ứng được xây dựng trên ý tưởng của các thành phần. Một thành phần là một HTML yếu tố trên steroid, vì vậy một phần tử HTML là giống như một nút. Đó là một đoạn văn. Đó là một tiêu đề, phải không? Và Instagram sẽ sử dụng chúng, nhưng nó cũng sẽ sử dụng các thành phần của phản ứng lại. 

Phản ứng thành phần là các yếu tố HTML được cải tiến có hành vi của mình chứa trong chúng. Vì vậy, như một ví dụ, chúng ta có thể có một yếu tố thời gian, một phần thời gian, trong đó sẽ chứa như tem thời gian, bạn đã biết, một thành phần hồ sơ mà sẽ chứa các hình ảnh hồ sơ cá nhân và tên của người đó. Nó có thể có một truy cập như thế, mà có thể đếm được như số lượng thích, và nếu bạn click vào nó, nó sẽ thấy tăng số lượng thích. Một thành phần chỉ là một bó của mã HTML có một số chức năng bọc bên trong của nó. Vì vậy, nó giống như một thành phần của HTML trên steroid, như tôi đã nói trước đây. Bạn có thể lấy các thành phần này, và bạn có thể đặt chúng lại với nhau để làm cho các thành phần mới, trong trường hợp này, một phần bài viết, trong đó có chứa tất cả các công cụ này. Nó sẽ chứa thời gian, hồ sơ, LikeCounter, có thể bình luận và có lẽ hình ảnh bản thân. Và do đó, các ứng dụng web được xây dựng sẵn bằng cách lấy thành phần và đặt chúng lại với nhau. Một nguồn cấp dữ Instagram là không có gì nhiều hơn một loạt các bài viết cái khác, mỗi bài chứa như Time, Hồ sơ, LikeCounter, và như vậy. Đó là loại giống như xây dựng một ngôi nhà. Bạn không xây dựng các nhà từ trên xuống dưới. Bạn lấy components-- bạn mất như phòng tắm. Bạn lấy bedroom-- bạn dính chúng với nhau, và bạn có một thành phần mới. Bạn có một phần mới của ngôi nhà. 

Vì vậy, tất cả React được xây dựng xung quanh Ý tưởng này của các thành phần đó là tương tác, đó là khai báo. Cũng giống như bạn chỉ nói những gì một hồ sơ cá nhân, và nó ám nó. Họ là composable. Bạn có thể mất một thời gian và một hồ sơ, đặt chúng lại với nhau, làm một cái gì đó tốt hơn. Và họ tái sử dụng, vì vậy nếu bạn có mã nguồn cho một bài, bạn có thể nhúng bất cứ nơi nào mà. 

Bạn có thể nhúng một Instagram Điều trên trang web của riêng bạn. Bạn có thể nhúng trong Facebook, ví dụ, miễn là nó sử dụng phản ứng lại là tốt. Vì vậy, các thành phần thực sự, thực sự, thực sự khối xây dựng mạnh mẽ của web mà có thể được sử dụng bất cứ nơi nào và đưa với nhau để làm cho khối xây dựng mới. Đó là rất, rất tổng quan về mức độ cao. Vì vậy, một lần nữa, nếu bạn có bất kỳ câu hỏi vào thời điểm bất kỳ về triết lý của lò phản ứng, mã hóa, ngăn tôi, và cho tôi biết. 

OK, vì vậy phản ứng là bởi vì nó có một cách nhìn khác nhau ở cách bạn xây dựng các ứng dụng web. Bạn đã có thể nghe nói về MVC, một mô hình bạn kiểm soát trong CS50 hoặc bất cứ khác lớp thăm dò bạn sử dụng. Và hầu hết các khuôn khổ được được xây dựng trên ý tưởng của MVC. Phản ứng không phải là. React được xây dựng xung quanh ý tưởng các luồng dữ liệu theo một chiều theo cách nhìn của biểu đồ này hoặc đồ họa ở đây. 

Về cơ bản, bạn có một nguồn dữ liệu. Và các nguồn dữ liệu sẽ quyết định làm thế nào để đặt ra các thành phần nhất định. Và các thành phần sẽ sau đó, khi họ thay đổi, họ sẽ cho các nguồn dữ liệu để thay đổi. 

Để sử dụng Instagram Ví dụ, bạn có thể có một danh sách các đối tượng như các bài trong một cơ sở dữ liệu hoặc một cái gì đó. Dữ. Và sau đó các thành phần bài của chúng tôi sẽ mất dữ liệu, và sử dụng dữ liệu đó để render một điều trên màn hình. Đó là những gì các mũi tên từ dữ liệu đến thành phần là, và sau đó là cùng một dữ liệu được sử dụng để vẽ một loạt các thành phần. 

Trong Facebook Messenger, cho Ví dụ, đó là phản ứng lại, bạn có thể có một danh sách các tin nhắn như nguồn dữ liệu của bạn. Và điều đó sẽ làm cho không chỉ danh sách tin nhắn nhưng cũng có những danh sách bạn bè mà bạn có. Bạn có đếm chưa đọc. Có lẽ cũng làm điều Facebook đó là ở dưới cùng của Facebook.com. Cùng một dữ liệu là một nguồn duy nhất của sự thật và gây ra rất nhiều các thành phần để được trả lại. Và bất cứ khi nào một trong những thành phần được thay đổi, nó đi lại và thay đổi nguồn dữ liệu. 

Bạn gửi một tin nhắn, phải không? Đó là thay đổi nguồn dữ liệu. Bạn đọc tin nhắn của bạn, do đó, bạn thiết lập chưa đọc 0. Đó là thay đổi nguồn dữ liệu. Và nhận thấy rằng tất cả các của một mũi tên sẽ trở lại cùng một dữ liệu nguồn, do đó bạn biết, cho một tập dữ liệu nhất định, bạn biết chính xác những gì các trang sẽ trông như thế nào. Đó là định mệnh. Bạn biết đấy, cho dữ liệu nhất định, những gì trang sẽ trông như thế nào. Bạn có thể dự đoán như thế nào nó sẽ cư xử và đang làm thế nào để làm việc khi họ đang đi lại với nhau. 

Và nếu tôi đã có một triệu linh kiện ở đây, nó sẽ cư xử như nhau, phải không? Bạn sẽ không có bất kỳ mối liên kết kỳ lạ. Một dữ liệu kết xuất một triệu linh kiện. Một triệu thành phần có thể quay trở lại và chỉnh sửa dữ liệu. Và vì vậy điều này là rất tốt đẹp. Chúng tôi đang xây dựng composable, dễ dàng các ứng dụng web khả năng mở rộng. 

Bạn có một nguồn dữ liệu, nguồn gốc của sự thật. Điều đó nói với các thành phần của bạn làm thế nào để đặt ra các trang, và các thành phần sẽ xử lý tương tác. Và nếu họ muốn thay đổi điều, chỉ cần đi lại và nói với các nguồn dữ liệu để thay đổi. Có lý? Vì vậy, phản ứng lại là tất cả về sự hiểu biết làm thế nào để xây dựng một thành phần và làm thế nào để làm cho thành phần của bạn tương tác với thế giới bên ngoài. 

Làm tương tác thành phần với thế giới bên ngoài sử dụng công nghệ khác gọi là tuôn ra, mà là một khuôn khổ đó là thêm vào đầu của phản ứng lại. Chúng tôi sẽ không nói về điều đó. Chúng ta sẽ nói thêm về, nhất định dữ liệu, làm thế nào bạn có thể làm cho một thành phần? 

Và do đó, phản ứng lại là thực sự mát mẻ bởi vì bạn có thể sử dụng nó với bất kỳ kết thúc trở lại bạn muốn. Nếu bạn có như một kết thúc trở lại Python, nếu Python của bạn có thể nhổ ra một số dữ liệu, Phản ứng có thể làm cho nó. Nếu bạn không có kết quả đầu ra JS của dữ liệu, phản ứng lại ám nó. Ruby ray với dữ liệu, phản ứng lại ám nó. 

Vì vậy, Phản ứng về cơ bản là một web view-- một kết thúc trước với các thành phần cho bất kỳ nguồn dữ liệu nào. Và như vậy đi từ nguồn dữ liệu để phản ứng thành phần là khá dễ dàng. Đi theo cách khác là một chút khó khăn hơn. Có sử dụng Flux như tôi đã đề cập trước đây. Chúng tôi sẽ không nhận được vào đó. Chúng tôi sẽ tập trung hơn vào các dữ liệu-to-thành phần phụ. Bằng cách này bạn có thể thực hiện mát mẻ, các ứng dụng web thú vị. Nó sẽ không ảnh hưởng đến thế giới bên ngoài cho bây giờ, nhưng đó là một câu chuyện khác. 

OK, vì vậy nếu bạn đang ở đây cho hội thảo cuối cùng của tôi bạn sẽ biết rằng tất cả các mã cho nói chuyện ngày hôm nay là có được tại URL này ở đây, xin lỗi, URL này ở đây. Và về cơ bản chúng ta sẽ đi thông qua bốn bước, có lẽ khoảng năm, có lẽ không phải năm. Chúng tôi sẽ chuyển qua bốn bước xây dựng một mẫu Phản ứng ứng dụng. Và vì vậy tất cả các mã nguồn cho mỗi bước của con đường là có được ngay tại đây, vì vậy nếu bạn đang theo dõi cùng ở nhà, cảm thấy miễn phí để kiểm tra nội dung mã này. Nếu bạn đang theo dõi cùng ở đây, chúng ta sẽ được hiển thị trên màn hình, do đó, không lo lắng về nó. Nhưng nếu bạn đang ở nhà, cảm thấy truy cập trang web này. Và, Yeah, bạn sẽ có thể để có được tất cả các mã bao giờ bạn cần ở đây. Vì vậy, đó là một cheat sheet tốt là tốt cho cuộc phiêu lưu tương lai của bạn với phản ứng lại. Cool, vì vậy nếu tất cả những người ở đây, và thậm chí nếu bạn đang ở nhà, kéo lên trang web này, is.gd/cs50react, không có vốn, không có gạch dưới, không có gì. 

Bạn sẽ thấy một trang có vẻ một chút như thế này. Đây là một điều được gọi là CodePen. CodePen là một cộng tác môi trường mã hóa mà tôi có thể viết mã ở đây, và nó sẽ được tự động gửi đến cho bạn. Và với cách này, tôi có thể viết mã. Tôi có thể chạy mã ở đây. 

Đối với example-- và nếu nó reloads-- thấy, Tôi đang chạy mã JavaScript trên trang ngay tại đây, và nó sẽ thấy tự động trả về một trang web với mã JavaScript này. Và vì vậy đây là một cách để chúng tôi thử ra mã thực sự nhanh chóng mà không cần phải sử dụng ID hoặc sử dụng máy tính địa phương của chúng tôi của chúng tôi hoặc bất cứ điều gì. Đó là một cách rất nhanh chóng cho bạn mockup và kiểm tra các loại mã khác nhau. 

Vì vậy, tôi sẽ được tham gia Ví dụ mã, đặt nó ở đây. Chúng tôi đang đi để được làm việc qua nó. Và nếu bạn đang ở nhà, bạn có thể kéo này lên là tốt. Và tôi đã cài đặt Phản ứng ở đây, vì vậy bạn có thể chỉ viết mã riêng của bạn ở đây, và thử nó như là sân chơi riêng của bạn. 

Yeah, nếu tất cả mọi người mở liên kết này ở đây. Xin vui lòng cho tôi một ngón tay cái up khi bạn có nó mở. Cool, mát mát. Không có gì ở đây bây giờ, nhưng chúng ta sẽ thay đổi điều đó rất sớm. 

OK, vì vậy phản ứng lại là một JavaScript thư viện, và như vậy, đòi hỏi phải có kiến ​​thức về JavaScript, đó là ngôn ngữ lập trình web. Và nó đang được sử dụng cho những thứ khác bây giờ quá nhưng chủ yếu phát triển web ngôn ngữ, vì vậy nếu bạn không quen với rằng, đọc một trang web được gọi JSforCats.com. Rất tuyệt vời. Bạn có thể tìm hiểu JavaScript trong nửa giờ. Không thể tin được. 

Vì vậy, hãy đọc. Chúng tôi cũng là một rất nhiều HTML ở đây vì chúng tôi đang thiết kế trang web của khóa học. Vì vậy, nếu bạn không quen với HTML, hãy kiểm tra HTMLdog.com. Tôi nghĩ rằng việc học Phản ứng được một dễ dàng hơn triệu lần nếu bạn đã biết các khối xây dựng. Nếu bạn có các thành phần, đó là dễ dàng để thực hiện một phần lớn hơn. Đó là phản ứng lại ngôn ngữ cho bạn. 

Vì vậy, đi trước và cho những điều này một đọc. Tạm dừng video này. Cho nó một đọc nếu bạn là tại nhà nếu quý vị không quen thuộc với HTML hoặc JavaScript OK, vì vậy những gì chúng ta sẽ làm là chúng ta sẽ làm cho một ứng dụng Flashcard rất cơ bản sử dụng phản ứng lại. Chúng ta sẽ có một thẻ từ. Bạn có thể lật thẻ qua lại. Và chúng tôi cũng sẽ có một danh sách tất cả các thẻ mà chúng ta có, và nếu chúng ta đang cảm thấy tham vọng, chúng ta có thể thể chuyển đổi giữa xe ô tô bằng cách nhấp vào chúng. 

Nhưng điều này là, trần của bạn xương, rất đơn giản Phản ứng ứng dụng. Và vì vậy đây thực sự là không nhỏ để thực hiện, nhưng chúng ta sẽ thấy rằng, nếu bạn làm này, nó rất, rất dễ dàng để mở rộng nó nếu người khác giúp bạn với nó. Vì vậy, chúng ta sẽ phải đi qua bốn bước bắt đầu từ đầu để xây dựng này. 

OK, vì vậy bốn bước, chúng tôi sẽ bắt đầu với bước đầu tiên. Bước đầu tiên là có được xây dựng thành phần đầu tiên của bạn. Như tôi đã nói trước đó, một thành phần trong phản ứng lại chỉ là một phần tử HTML trên steroid. Nó chỉ rõ HTML và một số hành vi, và nó sẽ xác định như thế nào mọi người có thể tương tác với nó như thế nào nó sẽ có bộ nhà nước. Giống như một nút sẽ biết như thế nào nhiều lần nó được click vào ví dụ, và nó sẽ biết làm thế nào để đặt chính nó ra. 

Vì vậy, chúng ta hãy đi trước và xây dựng của chúng tôi thành phần đầu tiên sử dụng JavaScript. Vì vậy, nếu cú ​​pháp có vẻ lạ, đó là bởi vì nó loại là. Vì vậy, một lần nữa, chúng ta sẽ để thực hiện một biến gọi là ứng dụng bằng cách sử dụng các từ khóa để cho, mà làm cho một biến, hãy App bằng React.createClass. 

Phản ứng là một thư viện và có các chức năng tạo ra lớp. Và chức năng này một chút mã mà bạn có thể sử dụng để tạo ra một mới Phản ứng loại thành phần. Và như vậy React.createClass làm cho một thành phần, và thành phần này sẽ có thể làm công cụ. Điều chính nó có thể làm là làm một cái gì đó, làm như một hàm. 

Một lần nữa, nếu chỉ số này là không rõ ràng để bạn, tôi khuyên bạn nên đi về JS cho mèo và kiểm tra xem nó ra. Có phải đó là phóng to cũng đủ? Mát. 

Vì vậy, mỗi thành phần nhu cầu để có một chức năng render. Render chức năng cho biết, những gì để tôi in trên màn hình? Nhưng các thành phần là vô dụng nếu nó không biết những gì để in trên màn hình, vì vậy bạn cần phải có một chức năng render. 

Vì vậy, trong điều render, bạn chỉ cần để lại một số HTML. Và những gì là mát có một điều được gọi là JSX, mà là một phần mở rộng của JavaScript được sử dụng bởi các phản ứng. Nó cho phép của bạn viết HTML bên trong của bạn JavaScript, âm thanh loại lạ khi đầu tiên bạn nghĩ về nó, nhưng nó làm cho rất nhiều ý nghĩa sau đó. Vì vậy, chúng ta có thể làm điều này. Nếu bạn đã quen thuộc với HTML, tôi biết chúng ta có một div với một mục đích chung container cho công cụ. Chúng tôi có thể trở lại một div, và bên trong div này, chúng ta có thể đặt công cụ. 

Vì vậy, chúng ta hãy nói rằng chúng ta muốn làm chỉ một Flashcard thẳng lên cho bây giờ. Flashcard, tôi sẽ nói, sẽ có một câu hỏi và câu trả lời. Vì vậy, bên trong div này, chúng ta hãy in ra một đoạn mà nói question-- là gì câu trả lời cuối cùng cho cuộc sống, vũ trụ? Và sau đó câu trả lời là có được, tất nhiên, 42. 

Mà không đi lên tốt cả. Yeah, vì vậy về cơ bản bạn có thể thực sự viết HTML bên trong JavaScript. Và điều này là có được in ra màn hình. Vì vậy, hãy thử nó ra. 

Vì vậy, chúng tôi có thành phần của chúng tôi. Chúng ta cần nói Phản ứng để đưa các thành phần trên màn hình vì vậy React.render, vì vậy chúng tôi nhận thấy rằng điều trị ứng dụng như bất kỳ yếu tố nào khác. Chúng tôi viết nó vì nó là một phần tử HTML. Giống như thay vì nói như img cho hình ảnh hoặc p cho đoạn văn, bạn viết ứng dụng, do đó, App đối xử như một phần tử HTML. Như tôi đã nói, đó là một yếu tố trên steroid. 

Vì vậy, bạn render App, và bạn cung cấp cho nó một nơi để đặt nó. Và đây là cách bạn có thể nói cho nó nơi để đặt nó. Tôi đã tạo ra một div đơn giản trên Trang được gọi với một ID của trang, và đó là nơi mà các yếu tố sẽ đi. 

Và chúng tôi sẽ không chạy với HTML. Về cơ bản này là sẽ nhận được đặt bên trong các phần tử trang này mà chúng ta có trên màn hình. Vì vậy, nó chạy mã này, và nó thu hút này điều trên màn hình, vì vậy ở đây chúng ta đang có. Chúng tôi đã thực hiện Phản ứng thành phần đầu tiên của chúng tôi. 

Vì vậy, chỉ là một bản tóm tắt, chúng tôi nhẹ nhàng làm một loại mới của thành phần, phải không? Đó là những gì các React.createClass. Và trong thành phần đó, chúng tôi nói với nó những gì nó phải làm. Bất cứ khi nào các thành phần này là để được in lên màn hình, nó sẽ in ra các div với hai đoạn văn bên trong của nó. 

Và những gì chúng ta đã làm, chúng tôi thực hiện một ứng dụng mới sử dụng các ký hiệu góc khung ứng dụng. Chúng tôi nói với nó để đặt nó bên trong phần tử trang. Và vì vậy những gì tôi đã làm, nó tạo ra một ứng dụng mới từ mẫu đó. Và sau đó tôi nói với nó để làm cho nó. Vì vậy, nó nói, OK, ứng dụng, những gì tôi nên in ra? App cho biết, đi in ra một div với hai đoạn văn bên trong của nó. Và đây rồi, có div với chúng tôi hai đoạn văn bên trong của nó. Có ý nghĩa cho đến nay? 

Vì vậy, một lần nữa, cả thách thức của React chỉ biết làm thế nào để làm cho các thành phần. Làm thế nào để làm cho các thành phần làm việc cùng nhau. Bây giờ chúng ta đã thực hiện lần đầu tiên của chúng tôi thành phần, chúng ta hãy quay trở lại và làm cho các thành phần tùy chỉnh. Vì vậy, bạn biết làm thế nào trong HTML bạn có thể cung cấp cho lớp các nút của bạn? Bạn có thể cung cấp cho bạn các neo href. Bạn có thể cung cấp cho bạn một loại đầu vào, phải không? Bạn có thể cung cấp thêm tùy chỉnh tính đến tất cả các yếu tố của bạn để làm cho nó thú vị hơn. Và chúng tôi thực sự có thể làm hiện tượng như vậy. 

Vì vậy, chúng ta hãy nói rằng chúng ta muốn chúng tôi ứng dụng để đi làm cho bất kỳ thẻ. Ngay bây giờ chúng tôi chỉ rendered một thẻ hardcoded. Chúng tôi biết chỉ có một thẻ nó có thể làm, vì vậy chúng tôi sẽ cố gắng và thay đổi điều này ngay bây giờ để rằng chúng tôi chỉ có thể cung cấp cho nó một số thẻ. Nó sẽ in ra các thẻ. 

Bạn phải cố gắng và làm cho bạn thành phần một mục đích rất chung chung. Vì vậy, cách này tôi có thể gửi email này người bạn của tôi và được như thế, bất cứ điều gì bạn có flashcard, chỉ cần ăn nó vào đây, và nó sẽ làm nó bằng chính nó. Bạn có thể đặt khác thứ trong ứng dụng của riêng bạn. 

Nhưng trước tiên, chúng ta hãy phá vỡ này lên thành hai thành phần, nhưng chúng tôi muốn tách các thẻ phần in từ phần ứng dụng thực tế. Vì vậy, những gì chúng ta có thể làm là chúng tôi có thể thay đổi điều này từ App để CardView, chỉ một tên mới cho các ứng dụng, và chúng tôi có thể làm cho một mới thành phần được gọi App, Không nên nhầm lẫn với App cũ. Chúng tôi đã có createClass, và như trong HTML, bạn có thể tổ Phản ứng linh kiện bên trong của mỗi khác. 

Vì vậy, trong này làm cho chức năng, trả lại chức năng CardView, và đây là điều chính xác. Xem lý do tại sao nó là điều tương tự? Thay vì vẽ chỉ các ứng dụng mà có div và ghép nối bên trong của nó, ứng dụng ám CardView, và CardView ám div và đoạn văn. Vì vậy, đây là ví dụ đầu tiên của chúng tôi yếu tố làm tổ bên trong của mỗi khác. Điều đó có ý nghĩa? Vì vậy, một lần nữa, chúng tôi có một yếu tố CardView. Chúng tôi có các yếu tố ứng dụng rằng nó lớn hơn. 

OK, vì vậy chúng tôi muốn chúng tôi CardView-- nếu bạn cung cấp cho một CardView tốt một thẻ nhất định, nó sẽ in ra cho bạn, phải không? Vì vậy, đầu tiên, chúng ta cần phải làm một tấm, vì vậy hãy làm cho một đối tượng thẻ. Vì vậy, để thẻ của tôi equal-- nếu bạn đang quen thuộc, đây chỉ là các ký hiệu định đối tượng trong JavaScript. Nó giống như là một cấu trúc trong C, vì vậy chúng tôi đã thực hiện một thẻ, và vì vậy bây giờ chúng ta có thể vượt qua thẻ này như là một tài sản hoặc là thuộc tính trong HTML thuật ngữ để ứng dụng của chúng tôi. Vì vậy, chúng ta có thể làm được điều này, App thẻ bằng myCard. 

Bạn biết làm thế nào trong đầu vào, bạn làm loại đầu vào bằng văn bản hoặc nút lớp bằng với BTN cho bootstrap ,? Cùng ý tưởng, thẻ App equals-- bạn phải đặt dấu ngoặc here-- Thẻ App bằng myCard, vì vậy đây nói rằng chúng ta có đối tượng thẻ này. Tôi sẽ vượt qua nó như một tài sản cho các thành phần ứng dụng. Và thành phần ứng dụng này sẽ có thể truy cập nó và làm công cụ thú vị với nó. 

Vì vậy, ứng dụng của chúng là có được đưa ra một thẻ, vì vậy bây giờ, chúng ta hãy có những ứng dụng chỉ cần cung cấp cho thẻ cho CardView bản thân bởi vì như các ứng dụng không phải là sẽ biết phải làm gì với nó, vì vậy chúng tôi sẽ chỉ cho nó vào CardView. Vì vậy, chúng tôi sẽ vượt qua nó cùng một cách, thẻ bằng, và do đó, mỗi thành phần có thể truy cập điều đó đã được trao cho nó. Họ có thể truy cập các thuộc tính đã được trao cho nó bằng cách sử dụng cú pháp này, this.props.card. 

Vì vậy, những gì xảy ra ở đây được đã có đối tượng myCard. Bạn vượt qua nó vào ứng dụng sử dụng thẻ App bằng myCard. Đó là đối tượng thẻ được trao cho ứng dụng của bạn. Các ứng dụng có thể truy cập nó như this.props.card. Nó giống như là một hình ảnh biết những gì nó là nguồn. 

Ứng dụng này biết những gì nó có thẻ là, và nó có thể làm mọi thứ với nó. Nó có thể làm tính toán. Nó có thể đưa ra quyết định dựa tắt của nó. 

Để bây giờ, tôi sẽ vượt qua this.props.card vào CardView. Có ý nghĩa cho đến nay? Nó sẽ làm cho ý nghĩa hơn bây giờ. 

OK, vì vậy bây giờ chúng ta đang ở CardView. CardView của chúng tôi, đưa ra các thẻ, nên in ra câu hỏi và câu trả lời của mình. Ngay bây giờ chúng tôi chỉ in ra một số câu hỏi và câu trả lời hardcoded. Chúng tôi cần phải tìm out-- chúng ta cần yêu cầu các thẻ mà họ đã cho chúng tôi các câu hỏi và câu trả lời là gì, và sau đó in này ra vào màn hình. 

Vì vậy, chúng ta có thể làm điều này ở đây. Trong làm begin-- đầu tiên làm bằng. Vì vậy, những gì chúng tôi đang làm ở đây chúng ta biết đó là các thẻ được ban cho chúng ta để một tài sản, bên phải? Nó cho chúng ta như là một đầu vào. Giống như nó gần như đối số cho hàm. Thẻ là một lập luận hầu như để CardView này. 

Chúng tôi sẽ trích xuất, và đưa nó vào câu hỏi biến. Hãy chắc chắn rằng câu trả lời đi câu trả lời khác nhau. Nhắc nhở rằng thẻ để trả lời. Và bây giờ chúng ta có những, thay vì in ra văn bản đó, chúng ta sẽ in ra bất cứ điều gì họ đã cho chúng tôi. 

Vì vậy, đây stuff-- vì vậy chúng tôi đang đi để đưa ra câu trả lời. Hãy xem, nếu công trình này. Mát mẻ, vì vậy chúng ta hãy bước qua nó một lần nữa cho chắc chắn. 

Vì vậy, thẻ của tôi là đối tượng thẻ, và chúng tôi được cho rằng thẻ vào ứng dụng. Và các ứng dụng được sẽ đi thẻ và đưa nó cho CardView. Và CardView này cho biết, nếu bạn cho tôi bất kỳ đối tượng Flashcard, Tôi sẽ in ra câu hỏi của mình và câu trả lời của mình, đúng không? 

Vì vậy, những gì tôi có thể làm là tôi có thể gửi mã này, đầu tiên như 10 dòng mã của tôi, người bạn của tôi. Ông có thể nhúng nó trong ứng dụng của riêng mình. Và miễn là anh đã làm điều tương tự, như thẻ CardView bằng này, miễn là ông đã tạo ra CardView và cho nó là thông tin đúng, ông có thể làm thẻ của riêng mình. Và do đó, cách này, đó là một thực sự cách mát mẻ cho bạn xây dựng thành phần sử dụng mỗi khác, phải không? Thẻ này, tôi có thể xuất bản CardView này trên internet, và người ta sẽ có thể sử dụng nó. Vì vậy, về cơ bản, nó giống như một trong những chức năng tiêu chuẩn trong thư viện C. 

Đây là một chức năng mà ai đó đã viết nó. Bạn cho một đầu vào nhất định. Nó sẽ tạo ra một sản lượng nhất định. Bạn không quan tâm làm thế nào nó hoạt động trong nội bộ. Miễn là bạn cung cấp cho nó ngay đầu vào, nó sẽ làm cho đầu ra bên phải. 

Và một thành phần có thể được nghĩ theo cùng một cách. CardView này giống như một chức năng thư viện. Nếu bạn cung cấp cho nó một số thẻ như là một tài sản, nó sẽ thấy in ra nội dung của thẻ đó. Cũng giống như nếu tôi thay đổi thẻ của tôi để thay vì được như thế là những gì 5 cộng với 37, nó sẽ cập nhật cho phù hợp. Vì vậy, chỉ bằng cách thay đổi các đầu vào, nó được một sản lượng nhất định. Vì vậy, bạn có thể nghĩ đến các thành phần gần như như các chức năng theo cách này, mà bạn có thể đặt lại với nhau. Bạn nhận được đầu vào, như CardView này như đầu vào, bạn sẽ có được đầu ra. Trong trường hợp này, đầu ra là HTML. Có ý nghĩa cho đến nay? Mát mẻ, vì vậy một lần nữa, tính chất này là làm thế nào bạn có thể chuyển thông tin vào và ra của các thành phần. 

OK, vì vậy chúng ta hãy làm này Điều tương tác. Ngay bây giờ nó là loại nhàm chán. [Không nghe thấy] là gì? Bạn có thể in một số ra, nhưng đó là tất cả những gì có thể làm. 

Vì vậy, chúng ta hãy quay trở lại câu hỏi cũ chỉ cho bây giờ. OK, vậy ngay bây giờ các thành phần là nhàm chán bởi vì tất cả họ làm, họ có được đầu vào. Họ làm cho đầu ra, phải không? Đó là loại nhàm chán. Chúng tôi muốn có chúng tôi thành phần để có thể có một số loại nội bộ nhà nước, như nhớ một cái gì đó. 

Đối với một Flashcard, cho Ví dụ, những loại nhà nước bạn có thể muốn nhớ cho một Flashcard? Những gì tình trạng tạm thời bạn có thể muốn nhớ cho một Flashcard trong một ứng dụng flashcard? Đung Cho dù nó được lộn? Neel Mehta: Ừ, phải. Vì vậy, bạn có thể muốn giữ theo dõi là bạn phải đối mặt lên hoặc là bạn phải đối mặt xuống trên thẻ. Trên Facebook, ví dụ, bạn sẽ muốn nhớ nơi trên news feed là bạn hay thích ai là hồ sơ bạn đang làm ngay bây giờ. 

Trên Messenger, giống như những gì văn bản bạn gõ vào hộp nhập liệu, phải không? Nếu bạn refresh trang web, nó đi xa. Nhưng bạn không thực sự quan tâm. Nó chỉ là tạm thời. Yeah? 

Đung [Không nghe thấy] Neel Mehta: Giống như một đèn flash thẻ, như bạn có thể được nhìn thấy phía câu hỏi hoặc bên cạnh câu trả lời? 

Đung OK. 

Neel Mehta: Giống như một hai phe Flashcard, phải không? Yeah, vì vậy bạn muốn có ý tưởng này của doanh nghiệp Tôi có tài sản, mà là giống như đầu vào, nhưng nhà nước, mà là tạm thời, uh, bạn đang ở đâu trên trang, phải không? Một lần nữa, tôi đã nói trong Facebook Messenger, tôi có như thế mà người bạn đang xem Facebook hoặc những người là hồ sơ, phải không? 

Điều này chỉ là tạm thời. Điều quan trọng là để cho người sử dụng những gì đang xảy ra, nhưng làm mới trang. Nó không thực sự quan trọng. Vì vậy, nó là trạng thái tạm thời, vì vậy chúng tôi tất cả những gì nhà nước. 

Vì vậy, một lần nữa, có đạo cụ và nhà nước. Đạo cụ được đầu vào cho trước từ nguồn dữ liệu của bạn. Nhà nước chỉ giống như mặc định. Nó giống như thứ mà làm điều tương tác. 

Vì vậy, trong chúng tôi CardView-- chúng ta hãy có chúng tôi CardView-- vì vậy nó đã được tốt đẹp. Những gì chúng tôi đang đi làm ở đây, chúng ta đang đi chạm CardView và chỉ CardView. Và do đó, người bạn của tôi nhận được điều này, họ sẽ không nhận thấy bất kỳ sự khác biệt. Họ sẽ không phải thay đổi bất kỳ mã riêng của họ, nhưng họ sẽ thấy họ CardView đã được cải tiến lên. Đó là một phần tốt đẹp về thành phần. 

OK, vì vậy trong CardView của chúng tôi, chúng ta hãy cố gắng và theo dõi xem chúng ta đang dần lên hoặc úp mặt xuống. Trong phản ứng lại chúng ta làm điều này bằng cách đầu tiên xác định trạng thái ban đầu. Trường hợp không thẻ bắt đầu? 

Vì vậy, có một chức năng gọi là getInitialState chức năng, và chúng tôi trở về một đối tượng. Đối tượng này chứa một số nhà nước, và một nhà nước chỉ là một cặp khóa-giá trị. Giống như trong Hướng dẫn, bạn có một khóa và một giá trị, bạn có tên như là một chuỗi. 

Trong trường hợp này, chúng ta hãy nói trước là đúng. Điều này nói rằng chúng tôi có một nhà nước. Một thành phần của nhà nước là một thuộc tính gọi là phía trước. [Không nghe thấy], vì vậy mặc định, chúng ta đang ở phía trước của thẻ, và chúng ta có thể thay đổi điều này khi chúng tôi lật thẻ. Có lý? 

OK, vì vậy trong render, ngay bây giờ, chúng tôi hiển thị các câu hỏi và câu trả lời. Bây giờ những gì chúng ta nên làm được hiển thị các câu hỏi nếu chúng ta đang ở trên mặt trước của thẻ vì vậy câu trả lời là cho mặt sau của thẻ. Đó là lý do tại sao tất cả các bạn làm các thẻ tương tác. Vì vậy, hãy cố gắng và đến nay ở đây. Vâng, đầu tiên chỉ cần thực hiện một biến. Chúng tôi có thể yêu cầu doanh nghiệp this.state.front. Chúng tôi truy cập nêu cùng chúng tôi đạo cụ truy cập, vì vậy this.state.front. 

Nếu chúng tôi phía trước, sau đó văn bản là this.props.card.question. Nếu chúng ta đang ở trên mặt trước của thẻ, chúng tôi sẽ cố gắng và lấy các câu hỏi từ các thẻ. Nếu không, nếu chúng ta đang ở trên lưng của thẻ, chúng ta làm gì? 

Đung Các câu trả lời? 

Neel Mehta: Yep, vì vậy văn bản bằng this.props.card.answer. Nhưng nếu bạn thông báo, chúng tôi đang sử dụng nhà nước để thực hiện một quyết định bởi vì bây giờ các thành phần sẽ khác dựa trên những tương tác như thế nào với nó. Vì vậy, thay vì in ra này, chúng tôi sẽ chỉ in ra các văn bản. Cool, vì vậy bây giờ, như bạn thấy, chúng ta chỉ thấy những câu hỏi. Và nếu tôi thay đổi trạng thái ở đây bằng tay phía trước là sai, chúng tôi có được 42 trở lại. 

Vì vậy, một lần nữa, thành phần này có nhà nước riêng của mình. Giống như một nút mà biết được liệu nó được nhấn hay không, điều này biết những gì trên phía trước hoặc phía sau. Theo mặc định, nó ở phía trước. Và sau đó nếu nó trên mặt trước, chúng tôi sẽ in ra các câu hỏi. Nếu nó trên lưng, chúng tôi sẽ in ra các câu trả lời. Vì vậy, một lần nữa, thông tin nhất định là như nhau. Nó chỉ trông khác nhau dựa vào cách bạn chương trình đó. Vì vậy, ví dụ, Facebook Messenger, thậm chí nếu bạn có được nguồn dữ liệu giống nhau, nó có thể trông khác nhau bởi vì nhà nước là khác nhau. Bạn đang tìm kiếm một nhắn người khác nhau của. 

OK, vì vậy đây là tất cả tốt và tốt, nhưng bây giờ những gì là thực sự làm cho chúng ta có thể thay đổi, cho dù thẻ của chúng tôi là trước hoặc sau. Chúng tôi có thể làm điều này bằng cách thêm một flip nút, một nút vào thẻ mà sẽ lật thẻ nếu nó [không nghe được]. Vì vậy, chúng ta hãy thêm một nút ở đây, điều này nút, và nút này sẽ nói flip. 

Và do đó, ngay bây giờ, nó không làm bất cứ điều gì. Nó chỉ có vẻ tốt đẹp. Những gì chúng tôi có thể làm là chúng ta có thể thêm một cú nhấp chuột xử lý, onClick bằng this.flip, và chúng tôi sẽ xác định lật sau. Nhưng về cơ bản, onClick là một chức năng mà được gọi khi người dùng nhấp chuột nó. 

Vì vậy, các nút sẽ biết khi nó được nhấp vào. Đã đi nó được nhấn vào, nó sẽ lật thẻ. Đó là loại giống như của bạn giao bánh pizza guy. Bạn giống như, tất cả các quyền, bất cứ khi nào một ai đó gọi tôi, tôi sẽ cung cấp bánh pizza, phải không? 

Bạn đăng ký listener này. Bạn lắng nghe một sự kiện. Bạn có được gọi, và khi sự kiện xảy ra, bạn làm điều gì đó. Bạn nhận được pizza. Trong trường hợp này, khi bạn nhấn vào, bạn lật thẻ. 

Và vì vậy chúng tôi cần phải xác định một chức năng sẽ lật thẻ, vì vậy chúng tôi sẽ viết ngay mà ở đây, lật chức năng. Và vì vậy những gì bạn nghĩ lật sẽ làm gì? Một lần nữa điều này được gọi khi chúng ta click vào nút flip. Nên các chức năng lật làm những gì? 

Đung đổi this.state.front từ true sang false, false thành true. 

Neel Mehta: Yep, do đó, có bất cứ điều gì this.front is-- trạng thái phía trước là. Đi nhà nước phía trước, nếu đó là sự thật, làm cho nó sai. Nếu nó sai, làm cho nó đúng, phải không? Vì vậy, hãy cố gắng đó. 

Bạn không thể thay đổi trạng thái chỉ bằng cách làm this.state. Bạn không thể làm điều này. Bạn không thể làm điều đó. Bạn phải sử dụng một chức năng gọi this.setState. 

Vì vậy, bạn có thể nói this.setState trước ruột nơi này, một lần nữa, các dấu chấm than điểm có nghĩa là ngược lại. Tôi đoán nếu điều này. state.front là đúng, nó sẽ biến giả. Vì vậy, chúng tôi sẽ thiết lập bang từ true sang false. Nếu nó sai, chúng tôi sẽ thiết lập nó false thành true. 

Chỉ cần nhận thấy rằng chúng tôi có thể lấy và hơi khác nhau, và như vậy chúng ta hãy cố gắng này. Bada bing, xem này. Các nút lật sẽ bây giờ chuyển phía trước để trở lại trạng thái. 

Và do đó, đây là nơi mà bạn nhìn thấy một chút chút về sự kỳ diệu của phản ứng lại. Giống như chúng ta không bao giờ nói với nó nó phải render lại. Chúng tôi không bao giờ nói với nó vẽ lại bất cứ điều gì. Nếu bạn đang làm điều này mà không có phản ứng lại, bạn muốn đã thích đối với: khi nút lật được nhấp, bạn phải nói với nó để tự tái render, phải không? 

Phản ứng được thực sự mát mẻ trong đó nếu bạn cung cấp cho nó một trạng thái nhất định và các tài sản, nó sẽ luôn luôn làm hiện tượng như vậy. Và như vậy khi chúng tôi bao giờ chúng ta thay đổi nhà nước và các thuộc tính, phản ứng chỉ cần tái làm cho toàn bộ điều. Nó biết rằng có một one-to-một trong những thư giữa nhà nước và tham số và HTML. Vì vậy, bất cứ khi nào một trong những người thay đổi bằng cách thông qua một nhà nước tập hợp, nó sẽ thay đổi như thế nào tiền công còn lại để tạo hình. Và như vậy về cơ bản cũng giống như phản ứng lại chờ đợi cho bạn để thay đổi. 

Bất cứ khi nào nó thay đổi một cái gì đó, nó sẽ lại làm cho toàn bộ trang. Và nếu nó có vẻ không hiệu quả, đó là bởi vì nó sẽ được, nhưng phản ứng sử dụng một điều được gọi là một Shadow DOM. Thay vì vẽ trang trực tiếp, nó giữ cây HTML ảo trong bộ nhớ. 

Bạn biết đấy, HTML là giống như một cái cây, giống như một cấu trúc dữ liệu phân cấp. Nó giữ một cây giả trong bộ nhớ, và bất cứ khi nào bạn cập nhật trang, nó sẽ vẽ giả khác cây, và nó sẽ tính toán những thay đổi cần thiết để làm cho Trang để làm cho hai cây bằng nhau. Vì vậy, về cơ bản, nó hầu như lại làm cho rất nhiều. Và sau đó nó chỉ muốn thay đổi trang trong tweaks ít khi cần thiết, vì vậy nó rất, rất, rất hiệu quả. 

Vì vậy, về cơ bản sẽ phản ứng lại bất cứ khi nào bạn thay đổi một cái gì đó, nó sẽ lại làm cho trang hầu. Nó sẽ tìm ra những gì tôi cần phải thay đổi để làm cho trang thực sự phản ánh trang ảo, và nó sẽ làm điều đó. Đó là DOM ảo. Đó là một trong những lớn nhất đặc điểm của phản ứng lại. 

Điều đó có ý nghĩa? Bất kỳ câu hỏi? Yeah? 

Đung như thế nào so sánh vẫn đến MVC mà chúng ta đã nói về trước khi tài nguyên như thế nào. 

Neel Mehta: Vâng, câu hỏi là như thế nào so sánh với MVC? Bạn hỏi về nguồn lực. Vâng, chúng ta hãy nói về làm thế nào nó hoạt động. 

Trong MVC, bạn muốn cập nhật các mô hình. Trong trường hợp này, chúng tôi muốn có một mô hình thẻ. Xem sẽ có nút flip, và kiểm soát sẽ có chức năng lật. Vì vậy, quan điểm sẽ nói với các điều khiển để lật lật. Lật sẽ nói với các mô hình thay đổi, phải không? 

Và như vậy khi bạn làm một MVC, bạn lắng nghe cho các mô hình thay đổi, và bạn lại làm cho quan điểm cho phù hợp. Hoặc bạn chỉ cần có để thích có bộ điều khiển. Chờ cho các mô hình thay đổi, và sau đó chọn và chọn một phần của như là một điều thay đổi. Ở đây chúng ta có một điều, nhưng trong một ứng dụng lớn, bạn phải thích nhớ những gì sự thay đổi trong mỗi nơi duy nhất, do đó, nó là một chút khó chịu. Và do đó, phản ứng lại là tốt đẹp bởi vì nó có một Shadow Dom. Nó có thể đủ khả năng để chỉ viết lại toàn bộ điều. Bạn không cần phải chọn lọc như đoán gì để cập nhật. 

Trên Facebook nếu bạn thích nhận được một tin nhắn mới, trong MVC, bạn phải nhớ, OK, thay đổi những điều ở phía trên cùng của trang, biểu tượng tin nhắn. Cũng bật một cửa sổ mới ở phía dưới. Cũng làm một điều mới trong cửa sổ đó. Cũng đóng một âm thanh. 

Đó là rất nhiều thứ đi ra ngoài cùng một lúc. Và vì vậy nếu bạn không có một Shadow Dom, bạn muốn phải làm điều đó bằng tay vì bạn không thể loại bỏ toàn bộ trang. Bạn không có khả năng, vì vậy bạn có thay đổi từng điều thủ, đó là thực sự gây phiền nhiễu trong MVC. 

Vì vậy, để có tiết kiệm, họ chọn lọc cập nhật các trang, mà là hiệu quả, nhưng cũng gây phiền nhiễu. Trong phản ứng lại, vì Shadow Dom, bạn sẽ có được cả hai điều này cho miễn phí. Đó là hiệu quả vì của Shadow Dom. Các nút cổ chai được cập nhật lại trang. Nó không phải làm các thao tác cây. Bạn sẽ có được hiệu quả. Bạn cũng có được sự dễ sử dụng vì nếu bạn chỉ cần viết lại toàn bộ trang, nhưng bạn chỉ cần biết, tất cả các quyền, những điều đang có được trên trang một nơi nào đó. Nó có thể là tại một nơi khác, nhưng nó sẽ có trên trang, phải không? Vì vậy, bạn chỉ cần tái rendered điều toàn bộ hầu như, và bạn có thể làm cho một cặp vợ chồng thay đổi các trang riêng của mình. 

Vì vậy, một lần nữa, trong MVC bạn sẽ phải chọn giữa tính năng dễ sử dụng và hiệu quả, và phản ứng lại, bạn sẽ có được cả hai. Vì vậy, nó là tốt hơn. Có lý? Solid. 

OK, vì vậy hãy xem chúng ta hãy nói một chút về bước 4, làm thế nào chúng ta có thể nhúng các thành phần. Vì vậy, chúng tôi có quyền này bây giờ. Chúng tôi đã có nút nhỏ của chúng ta mát mẻ. Chúng tôi có thể lật nó lại và ra, và đó là tất cả nó. Hãy nói rằng chúng ta muốn có thành phần khác. Hãy nói rằng ứng dụng của chúng tôi nên Flashcard chứa một danh sách của tất cả các thẻ mà bạn có, do đó có nghĩa chúng tôi cần phải có một thành phần khác. Vâng, có thể gọi đó là một danh sách xem. Hãy làm một danh sách xem đó cùng tồn tại với các CardView, và xem danh sách này và CardView sẽ thích làm việc cùng nhau. Và bạn có thể kết hợp chúng để làm cho ứng dụng của chúng tôi cho bạn. 

Vì vậy, đầu tiên, chúng ta hãy làm một vài chi tiết thẻ ngay. Hãy nói rằng, những gì thẻ? Và chỉ vì vậy tôi không phải bore bạn gõ nó trong, Tôi chỉ cần đi để sao chép nó từ đây. Và vì vậy tôi sẽ không cho nó chỉ là một thẻ. Tôi sẽ cung cấp cho nó một mảng của thẻ. Vì vậy, đầu tiên ứng dụng sẽ phá vỡ cho bây giờ. Được rồi, vì vậy chúng tôi đang đi để làm cho thể này để xử lý nhiều thẻ. Vì vậy, đầu tiên, chúng ta sẽ để cho nó, không chỉ là một thẻ nhưng một mảng của thẻ, giống như một danh sách các thẻ. Và trong trường hợp này, chúng tôi có ba trong số họ. 

Tất cả các quyền, do vậy ứng dụng là sẽ nhận được một danh sách các thẻ, và nó sẽ quyết định một để đưa cho các CardView. Các CardView chỉ có thể làm cho một thẻ, nhưng các ứng dụng được một danh sách của tất cả các loại thẻ, phải không? 

Vì vậy, khi bạn tìm ra một thẻ để cung cấp cho CardView, làm thế nào bạn sẽ đoán bạn có thể có thể để đưa ra quyết định về những thẻ để hiển thị? Để cung cấp cho bạn một gợi ý, đó là tạm thời Bạn sẽ được xem một thẻ nhất định. Nếu bạn refresh trang web, bạn sẽ thấy chỉ trở lại thẻ đầu tiên. Đó là OK, vì đó là tạm thời. Kỹ thuật những gì chúng ta có thể sử dụng? 

Đung Bạn có thể làm cho một biến vì vậy chỉ cần như bạn đã có trước. Đây có phải là sự thật, bạn có thể có thẻ hiện bằng 1? 

Neel Mehta: Yeah, vì vậy chúng tôi muốn có nhà nước, phải không? Bạn sẽ sử dụng nhà nước trong thành phần để tìm ra mà thẻ nào chúng ta muốn nhận được. Giống như chúng ta có một danh sách các tất cả các thẻ, chúng tôi sẽ sử dụng nhà nước để tìm ra một trong các thẻ đầu tiên, thẻ thứ hai, thứ ba thẻ, và như vậy. 

Vì vậy, một ứng dụng để ứng dụng sẽ có được một có chức năng getInitialState, getInitialState trả lại chức năng. Và chúng tôi sẽ chỉ nói activeIndex 0. Vì vậy, bây giờ ứng dụng của chúng tôi có nhà nước riêng của nó. 

Và vì vậy bây giờ vào làm, để tìm ra thẻ, chúng ta hãy chỉ cần đi đến các mảng và lấy điều tại chỉ số đó. Chọn thẻ this.props.cards bằng this.state.activeIndex. Vì vậy, như bạn thấy ở đây, các đạo cụ và nhà nước thực sự làm việc cùng nhau. Vì vậy, bây giờ mà chúng tôi có activeCard của chúng tôi, chúng tôi sẽ gọi nó là activeCard, và hãy xem liệu các công trình này. [Không nghe thấy] 

Oh, đó là một lỗi văn bản. Ah. 

Cool, vâng, vì vậy bây giờ chúng tôi đã trở lại đến nơi mà chúng tôi trước đây, phải không? Chương trình cũ như nhau ngoại trừ bây giờ chúng tôi có thể hỗ trợ một danh sách các thẻ, không chỉ là một thẻ. Và bây giờ, một lần nữa, nếu chúng ta thay đổi activeIndex, chúng ta có thể đi 0-1, và bây giờ mà thẻ thứ hai, và sau đó chúng tôi đã đi đến 0. Vì vậy, đây là một mới được cải tiến lên phiên bản của chúng tôi. 

OK, vì vậy bây giờ chúng ta hãy có một cái nhìn danh sách đó cho thấy tất cả các thẻ trong chương trình của bạn, vì vậy chúng tôi sẽ thực hiện một mới thành phần được gọi ListView. Hãy listview bằng react.createClass. Vì vậy, chúng tôi muốn làm một thứ tự liệt kê với một mục danh sách cho mỗi thẻ. Và vì vậy chúng tôi có một loạt các thẻ. Chúng tôi muốn có một danh sách các mục cho mỗi thẻ, phải không? Chúng tôi có thể làm cho một vòng lặp hoặc một cái gì đó để làm cho một mục danh sách mới. Nhưng cái cách bạn làm điều đó trong Phản ứng, sử dụng một điều được gọi là bản đồ. Bản đồ là một công cụ hoặc một chức năng mà bạn sử dụng rằng đối với mỗi mục, chạy một số chức năng, có giá trị trả về, và mang đến cho bạn đó. 

Vì vậy, như một ví dụ, chúng ta có mảng 1, 2, 3.map function-- và điều này là viết tắt cho một function-- x mũi tên x lần x. Điều này cho biết, với mọi số trong 1, 2, 3, lấy nó. Vuông nó, và cho nó trở lại. Vậy điều gì làm bạn nghĩ rằng 1, 2, 3.map x đi vào x lần x cho bạn nhiều lại được Chức năng của hàm này là chạy trên mọi phần tử của mảng đó. 

Đung 1, 4 9? 

Neel Mehta: Yep, 1, 4, 9 bởi vì bạn làm 1 lần 1. Điều đó mang lại cho bạn một. Đó là yếu tố đầu tiên. 

2 lần 2 là 4. Đó là một yếu tố thứ hai. 3 lần 3 là 9. Đó là một yếu tố thứ ba. Có lý? Vì vậy, bản đồ có một kỹ thuật bạn sử dụng trong các lập trình chức năng, phong cách mới của lập trình để làm một cái gì đó để mọi phần tử trong danh sách của bạn. Và vì vậy điều này nghe có vẻ quen thuộc. Chúng tôi có một danh sách các thẻ. Chúng tôi muốn có được một mục danh sách cho mỗi một, vì vậy chúng tôi sẽ chỉ sử dụng bản đồ ở đây. Chúng tôi sẽ nói, hãy để danh sách equals this.props, thẻ, bản đồ. 

Và như vậy cho một thẻ, chúng tôi sẽ tạo ra một mục danh sách với thẻ mà nội dung bên của nó. Hãy chỉ nói rằng chúng tôi muốn đưa ra các thẻ câu hỏi như vậy card.question. Vì vậy, danh sách này có chứa một mảng của LI hoặc Danh sách các đầu nơi có một danh sách item cho mỗi thẻ, và có chứa các câu hỏi thẻ. Có lý? 

Cool, vì vậy bây giờ chúng ta hãy thực sự in mà ra. Vì vậy, chúng tôi sẽ trả lại một ul. Bên trong là danh sách không có thứ tự, chúng tôi sẽ chỉ dính toàn bộ danh sách rằng họ đã cho chúng tôi. Mát. 

Được rồi, vậy bây giờ này xem danh sách các công trình chỉ cần tìm. Bất kỳ câu hỏi về xem danh sách? Bạn có một loạt các thẻ. Bạn làm cho một mục danh sách cho mỗi thẻ. Và nếu chúng được đặt bên trong một thứ tự danh sách, và bạn cho nó trở lại. Vì vậy, bây giờ chúng ta hãy hành động như vậy chúng ta nhúng bên này của ứng dụng của chúng tôi, vì vậy chúng tôi có thể làm được điều này, xem danh sách. Lập luận gì để chúng ta vượt qua để xem danh sách? Những gì thuộc tính nào chúng ta cung cấp cho nó? Hãy nhớ rằng, nếu bạn cung cấp cho nó là một loạt các thẻ, nó sẽ làm cho danh sách xem cho những thẻ. Vì vậy, những gì chúng ta sẽ vượt qua ở đây như là đối số? Đung Một danh sách các thẻ? Neel Mehta: Yeah, vì vậy các card bằng this.props.cards, phải không? Và do đó, vấn đề duy nhất là bạn chỉ có thể chuyển một phần tử cấp cao nhất trong render, vậy bạn đã có để bọc nó trong một div. Nó là lạ. Vì vậy, chúng ta hãy xem nếu đó. Điều đó làm việc? 

Yep, có bạn đi. Vì vậy, bây giờ chúng tôi có một danh sách thẻ ở phía dưới, và sau đó chúng ta có của chúng tôi CardView cứ vào đầu, và điều đó sẽ lật giữa hai mặt của thẻ. Bây giờ làm đó có ý nghĩa như thế nào tôi đã làm điều đó? Yeah, vì vậy một lần nữa, chúng ta có hai thành phần. Các bản in thành phần đầu tiên ra mỗi thẻ trong danh sách. Đó là danh sách xem. Và thành phần thứ hai in ra chỉ thẻ đó. Nếu bạn cung cấp cho nó một thẻ nào đó, nó sẽ thấy in ra thông tin về thẻ và cho phép bạn lật qua lại. 

Vì vậy, nếu chúng ta muốn, chúng ta có thể cố gắng và nói chuyện về việc thêm một số tính năng mới này. Nếu không chúng ta có thể nói thêm một chút về với vận tốc của lò phản ứng, hoặc chúng tôi có thể trả lời câu hỏi mà bạn có thể có bởi vì đây là tất cả các bộ phận cốt lõi của phản ứng mà tôi muốn nói đến. Chúng tôi có thể đi trước. Chúng tôi có thể trả lời câu hỏi. Bất cứ điều gì bạn muốn. 

Đung bạn có thể sử dụng JSX trong JavaScript bình thường? Hoặc là cái gì đó mà đến với [không nghe được]? 

Neel Mehta: Câu hỏi đặt ra là can bạn sử dụng JSX với JavaScript bình thường? Câu trả lời là có. JSX chỉ là một cách để nó mất của bạn JavaScript có HTML bên trong của nó, và biên dịch thành JavaScript không có HTML bên trong của nó. Vì vậy, nhận thấy that-- để ý ở đây. Điều này có vẻ như bạn có như div và bạn có cơ bên trong của nó. 

Mà biên dịch để JavaScript như tạo ra những điều tương tự. Tôi đoán những gì tôi đang nói là JSX chỉ là một cú pháp, giống như nó là một tiền xử lý cho nhiều JavaScript như PHP là một tiền xử lý cho HTML. Công ty cổ phần là một tiền xử lý cho JavaScript cho phép bạn đặt HTML bên trong của bạn JavaScript. Và vì vậy nếu bạn có các máy biến áp đúng đó là một điều được gọi là [Không nghe thấy], mà sẽ chuyển đổi. Tiền xử lý ngay, nó sẽ cho bạn làm điều đó. 

Đung [Không nghe thấy] Neel Mehta: Thông thường, bạn không cần đặt HTML bên trong JavaScript trừ khi bạn đang làm Phản ứng. Nhưng bạn có thể làm điều đó anyway. Vâng? 

Đung Tôi nghĩ rằng bạn đã mô tả phản ứng lại như là một ngôn ngữ lập trình chức năng. Chúng tôi đã được học C trong CS50. Là C cũng là một ngôn ngữ chức năng? Neel Mehta: Vậy câu hỏi là về chức năng so với một điều được gọi là lập trình bắt buộc hay thủ tục. Có hai loại chương trình phổ biến. Một được gọi là thủ tục, mà là tất cả về như làm lệnh, và là một trong những chức năng, mà là tất cả về việc có chức năng và có đầu vào và đầu ra của những người. Phản ứng là một mô hình chức năng. C là một mô hình rất thủ tục. 

Và như là một ví dụ, C chẳng hạn, bạn không làm cách khai báo này làm cho các chương trình, phải không? Bạn có thể nói, in này. Thay đổi cấu trúc dữ liệu này. In trang nay. Đó là tất cả về lệnh. 

Trong phản ứng lại, không có mà nhiều lệnh. Đó là tất cả về việc có thành phần bạn đặt lại với nhau. Họ giống như chức năng. Bạn có giống như một chức năng gọi CardView, mà là một chức năng có đầu vào, đầu ra, và do đó phản ứng lại là tất cả về triết lý này chúng ta về having-- bạn có dữ liệu. Bạn vượt qua nó thông qua này thuật toán, và nó sẽ đầu ra HTML mà bạn chỉ in trang, và vì vậy bạn phải xây dựng nó từng mảnh. 

Vì vậy, để vẽ một phép ẩn dụ cho những gì Tôi đã nói, bạn biết làm thế nào trên Facebook nếu bạn nhận được một tin nhắn, và bạn chọn những phần nào để cập nhật, đó là thủ tục. Đó là bắt buộc, phải không? OK, tôi nhận được tin nhắn. Hãy thay đổi tài khoản ở đó. 

Hãy bật một cửa sổ ở đây. Hãy thay đổi tài khoản ở đó. Chúng ta hãy vẽ này đây. Đó là một cách tiếp cận thủ tục. 

Đó là những gì những thứ như góc, Boost, Backbone, các khuôn khổ khác sử dụng. Phản ứng là chức năng. Đó là một cách rất khác nhau suy nghĩ về những gì. Nó có ý tưởng này chúng ta hãy có chức năng hoặc các thuật toán mà sẽ bạn cho nó dữ liệu. Nó sẽ nhổ ra những gì nó phải được, và máy tính sẽ chăm sóc cân nặng ra. Bạn không xử lý nó cho mình. Điều đó làm cho một chút cảm giác? Yeah? 

Đung Trong một ngôn ngữ chức năng, tất cả mọi thứ xảy ra cùng một lúc? 

Neel Mehta: Không, điều xảy ra trong trật tự. Giống như ở đây vẫn còn đặt hàng, nhưng nó không xảy ra theo thứ tự như khen thưởng, lệnh, lệnh. Nó sẽ xảy ra theo thứ tự chức năng cho phép bạn xuất ra. Đặt điều đó vào chức năng khác. Đặt đó vào một chức năng, chức năng khác. 

Nếu bạn làm CS51, bạn sẽ tìm hiểu các chương trình chức năng một chút ra của phạm vi này. Nhưng về cơ bản, những gì làm cho Phản ứng mát mẻ không chỉ các luồng dữ liệu một chiều và Dom ảo, nhưng cũng ý tưởng này của lập trình chức năng. Và chức năng lập trình là rất dễ dàng để sáng tác và làm công cụ mát ngoài, và nó rất dễ dàng để nghĩ về lý do và về. Vì vậy, đó là một trận hòa tốt của phản ứng lại. Bất kỳ câu hỏi nhiều hơn? Yeah? 

Đung Um, tại sao bạn sử dụng để như trái ngược với var? 

Neel Mehta: Vậy câu hỏi là tại sao bạn sử dụng chúng thay vì var? Đây là một điều được gọi là ES6 hoặc ECMAScript 6. Đây là phiên bản mới của JavaScript. Có một loạt các lý do kỹ thuật, nhưng let là một phiên bản tốt hơn của var. 

Đó là cách mà bạn khai báo biến. Bạn có thể sử dụng để cho. Bạn có thể sử dụng var. Hãy có một nhóm các kỹ thuật reasons-- bạn có thể xem chúng lên later-- cho lý do tại sao nó tốt hơn. Về cơ bản, có một số ES6 đẹp cú pháp mới, một số tính năng mới trên đầu trang của JavaScript cũ. 

Vì vậy, chúng tôi có giống như năm phút. Tôi chỉ muốn nói về một điều nữa thật nhanh. Nếu bạn có bất kỳ câu hỏi, chúng ta hãy nói về nó sau này. Nhưng chỉ vì vậy đây được đánh bắt trên máy ảnh, tôi chỉ muốn nói một chút về cách bạn Phản ứng thực sự sử dụng trong các ứng dụng của bạn. 

Nếu bạn đi ở đây, Facebook.GitHub.IO/react, đây là trang chủ cho phản ứng lại, và nó sẽ cho bạn thấy làm thế nào bạn thực sự sử dụng Phản ứng trong các trang của bạn. Về cơ bản, nó là một chút phức tạp cố gắng để cài đặt phản ứng lại. Nó không phải là dễ dàng như bạn chỉ cần kéo và thả một JavaScript trong đó. 

Bạn phải có biến áp của bạn thiết lập, mà sẽ, như nó đã làm trước, biến JSX của bạn vào JavaScript bình thường. Bạn phải điều đó sẽ thấy biên dịch bạn ES6 lại bình thường. JavaScript có rất nhiều chuyển động phần bạn phải làm, vì vậy có một điều gọi Yeoman, Yeoman.io. Và đây là một công cụ dòng lệnh đó sẽ thấy giúp bạn Scaffold ra Phản ứng của bạn các dự án một cách dễ dàng. 

Vì vậy, bạn có thể đọc về điều này sau này, nhưng có một số công cụ rằng Yeoman cung cấp. Họ sẽ cho bạn tạo ra một phản ứng lại ứng dụng với tất cả mọi thứ được xây dựng trong. Giống như nó sẽ đã xây dựng trong, các thành phần được xây dựng trong. Nó sẽ có biến áp của bạn được xây dựng trong. Họ có rất nhiều mát mẻ công cụ được xây dựng trong tự động sử dụng những điều được gọi là máy phát điện. 

Vì vậy, đọc về điều này nếu bạn muốn. Chỉ cần đi trên Yeoman, Y-E-O-M-A-N, và bạn có thể tìm thấy máy phát như thế này. Và với máy phát điện như các, bạn chỉ thích một là một dòng lệnh vài lệnh. Nó sẽ ra một giàn giáo Phản ứng toàn bộ ứng dụng cho bạn. Nó sẽ nhận được tất cả các hướng dẫn đường ống, và công việc khó khăn thực hiện cho bạn, và đây là lý do tại sao bạn chỉ tập trung về chỉ cần viết trong phản ứng lại. 

Vì vậy, về cơ bản việc xây dựng một Phản ứng ứng dụng là không tầm thường. Nó có dây tất cả cùng nhau, nhưng có là những công cụ mà sẽ làm điều đó cho bạn. Vì vậy, nếu bạn muốn thực hiện một phản ứng lại ứng dụng, hãy thử làm theo cách đó. Nếu bạn chỉ muốn thử nghiệm, bạn có thể thử sử dụng CodePen này vì CodePen này có tất cả các phản ứng dây. Tôi đã làm tất cả các công việc cho bạn rồi. 

Vì vậy, nếu bạn muốn thực hiện như một sản xuất để phát hành Phản ứng ứng dụng, hãy thử một trong những máy phát điện. Nếu bạn chỉ muốn chơi xung quanh, nó thường có giá trị chỉ như thử chơi xung quanh trên CodePen đây. Nghe hay đấy? Mát. 

Vì vậy, đó là tất cả tôi có. Một lần nữa, tất cả các mã và ví dụ sẽ có trên trang web này ở đây. Vì vậy, một lần nữa, chúng tôi đã không nói chuyện về nhiều cú pháp của phản ứng lại, nhưng để tìm tất cả những ít chi tiết cú pháp, đó là tất cả sẽ có sẵn trên trang web này ở đây. 

Vì vậy, tôi muốn khuyên bạn như đi bước đầu tiên. Đặt nó vào CodePen của bạn. Hãy thử làm việc trên làm nó sang bước thứ hai. Có một bước thứ tư, và chỉ xem nơi bạn nhận được từ đó. 

Bất kỳ câu hỏi thêm, kiểm tra ra trang đó hoặc gửi email cho tôi. Đó là email của tôi. Nhưng tôi rất muốn giúp bạn với bất kỳ câu hỏi mà bạn có thể có về phản ứng lại. Vì vậy, vâng, đó là tất cả tôi có. Cảm ơn tất cả các bạn rất nhiều cho xem hoặc tham dự. Và tôi sẽ đưa bất cứ câu hỏi bạn có thể có sau này bây giờ. Vì vậy, cảm ơn tất cả các bạn đã xem.