 Okey, jadi awak ingat reaksi awak? Ij. Kind of. Sort of. Jadi saya beri sumber tadi sekarang. Reaksi itu adalah komponen yang terbaik. Jadi ini adalah apa yang awak patut dibina dari minggu lalu. Dan apa yang awak kata di komponen reaksi awak? Ia sesuatu seperti ini. Awak membuat komponen ini dan ada status-status. Jadi status-status adalah konsep yang penting untuk reaksi awak. Kerana apabila pembunuh awak memperkenalkan aplikasi awak, ia mempunyai status-status di mana-mana. Kerana apabila awak klik to-do dan berkata selesai, status-status akan berubah. Apabila awak klik lagi dan berkata tidak selesai, kemudian status-status akan berubah. Jadi reaksi akan memperkenalkan status-status dan menjawab. Jadi ui awak akan berubah terhadap status-status. Jadi jika awak ingat komponen to-do awak, awak boleh melihat kota awak sekarang. Awak patut melihat bahawa ada listan to-do yang digunakan dalam status-status awak. Jadi status-status ini bermaksud status-status di komponen awak. To-dos adalah array. Ini adalah array javascript. Dan setiap objek ada deskripsi, yang adalah kawasan to-do. Dan ia membuat pembunuh, apa kata pembunuh pembunuh pembunuh. Jadi pembunuh pembunuh pembunuh. Jadi apabila awak klik to-do, ia membuat pembunuh pembunuh pembunuh pembunuh pembunuh. Dan ui awak menjawab secara secara. Awak ada pertanyaan? Okey. Jadi, untuk menjelaskan apa yang kita lakukan minggu lalu, kita cuba tidak hanya membuat to-do yang digunakan dan tidak digunakan, tetapi kita cuba membuat pembunuh pembunuh. Kerana apa pembunuh pembunuh jika kita tidak dapat membuat pembunuh pembunuh. Jadi mari kita membuat pembunuh pembunuh. Jadi membuat pembunuh pembunuh. Di Studio Visual Code. Semoga semua anda mempunyai. Dan jika anda ingat semua pembunuh yang anda lakukan minggu lalu, akan berada dalam komponen sosial. Anda melihat ada banyak pembunuh lain di sini. Anda tidak perlu berhati-hati, tetapi ini semua perlu untuk pembunuh pembunuh. Jadi perkara yang kita lakukan minggu lalu, adalah App.js. Dan anda melihat di awal App.js, kita sebenarnya berkata bahawa komponen ini adalah negara inisiasi. Saya berkata negara inisiasi dari komponen ini untuk mempunyai dua pembunuh yang adalah pembunuh pembunuh pembunuh. Sebab itulah apabila anda memperkenalkan App, anda sudah melihat pembunuh ini. Tetapi ia seperti anda memperkenalkan pembunuhnya. Tidak ada jalan untuk anda memperkenalkan sekarang. Jadi untuk memperkenalkan ini untuk memperkenalkan pembunuh pembunuh, pertama, anda perlu memperkenalkan beberapa element UI seperti pembunuh. Untuk memperkenalkan pembunuh untuk anda memperkenalkan pembunuh dan pembunuh untuk anda memperkenalkan untuk mengatakan bahawa saya mahu memperkenalkan pembunuh ini. Jadi saya akan memperkenalkan dari tadi. Bagaimana kita memperkenalkan pembunuh ini? Jika anda melihat dalam komponen reak anda, jadi setiap komponen reak anda mempunuh dan ia juga perlu mempunyai cara rendah ini. Dan cara rendah ini memperkenalkan apa yang saya akan menunjukkan di pembunuh saya. Dan anda lihat, ia seperti html. Sebenarnya, tidak sebenarnya html. Ia sedikit berbeza. Ia adalah sesuatu yang dipanggil javascript.xml, tetapi ia seperti berkompak ke dalam html dan diberikan di pembunuh anda. Dan dalam jas x, yang berlaku seperti html, jas x adalah javascript.xml, saya akan menjaga lagi. Jadi ia yang anda menulis di sini adalah jas x. Dalam jas x, anda boleh memasukkan javascript kode juga. Di tempat anda membuat jas.state.tudus, anda menyebabkan jas.state. Dan jas tudus ini adalah sebuah pembunuh. Ia adalah jas tudus. Dan anda membuat pembunuh. Jadi pembunuh adalah pembunuh apabila anda membuat jas tudus, anda memutuskannya dan anda memutuskan sesuatu. Jadi pembunuh ini sebenarnya mengambil pembunuh. Jadi dari pembunuh ini, ini sebuah pembunuh, ini sebuah pembunuh. Jadi saya rasa Sahil beritahu anda tentang pembunuh javascript. Jadi anda lihat pembunuh ini. Ini berkata bahawa ini adalah pembunuh saya. Ada apa-apa sebelum pembunuh saya adalah pembunuh saya untuk parameter pembunuh. Jadi pembunuh ini boleh mengambil pembunuh dan anda akan memberikan output. Jadi A adalah pembunuh untuk pembunuh ini. Dan kerana kita menggunakan pembunuh ini dengan map, A adalah sebenarnya sebuah tudu. Sebenarnya, perkara yang saya suka membuat pembunuh, pembunuh yang akan memulangkan pembunuh, adalah, perkara satu adalah, tolong mengambil pembunuh anda dalam cara yang menarik, kerana kadang-kadang jika saya masuk A, B, C, D, E, F, G, saya tiada idea apa-apa yang pembunuh ini berkata-kata. Jadi sebenarnya, sebuah cara yang menarik untuk mengambil pembunuh ini, sebuah cara yang menarik untuk mengambil pembunuh ini adalah tudu. Contohnya. Jadi saya akan mengubah semua pembunuh saya untuk A untuk tudu. Dan seperti, seorang lain yang datang atau saya beberapa minggu lalu, datang ke pembunuh ini, ini membuat, lebih mudah untuk saya faham apa yang berlaku. Ia berlaku kerana jika saya kata A, saya kata, jika saya melihat tudu, saya tahu apa yang tudu adalah. Tudu mempunyai pembunuh dan ia mempunyai pembunuh. Jadi ia sangat jelas apa yang tudu ini adalah. Jadi saya perlu mengubah semua pembunuh ini di sini. Jadi saya akan mengubah tudu, saya akan mengubah tudu, saya akan mengubah tudu, saya akan mengubah tudu dan saya akan mengubah tudu di deskripsi. Ya, anda semua, tolong ikut. Ya. Jadi jika saya meletak dan bercakap, tolong ikut. Jika saya selalu kata-kata saya hanya menunjukkan ini kepada anda, tidak perlu lakukannya. Tapi jika saya tidak kata-kata itu, saya menurut saya, saya menurut saya anda berikutnya dengan pembunuh. Okey, saya berkata sebuah pembunuh ini antara pembunuh ini adalah satu fungsinya yang telah digunakan. Dan ia mengubah sesuatu yang kita patut mengubah tudu. Jadi anda katakan anda mengubah tudu dan anda mengubah tudu ini. Dan apa yang tudu ini? Sebenarnya, anda melihat tudu ini dan tudu ini. Di belakang tudu ini, anda sebenarnya mengubah tudu ini, yang merupakan jsx. Jadi jsx lagi, ini seperti html. Ini adalah elemen yang akan diperkenalkan dalam browser anda. Jadi anda sebenarnya mengubah tudu ini dengan pembunuh tudu ini. Dan bukan hanya itu, anda mengubah tudu ini. Jadi nama tudu ini untuk mengubah tudu ini. Jadi ia mengubah tudu ini. Maaf. Jadi ia mengubah tudu ini seperti ini sekarang. Apabila berubah tudu ini, apabila anda mengubah tudu ini, ia adalah sebab ada tudu ini yang telah digunakan. Dan tudu ini, tudu ini adalah perkara penting. Tudu tudu ini adalah apa yang kita panggil pembunuh tudu ini. Sebenarnya, tudu tudu ini mengubah tudu ini. Jadi apabila anda mengubah tudu ini, tudu ini adalah pembunuh tudu ini. Anda mengubah tudu ini dengan apa yang kita panggil mengubah tudu ini ke pembunuh ini. Apabila pembunuh tudu ini mengubah tudu ini pada pembunuh tudu ini, ia akan mengubah tudu ini. Graf soyang tudu ini adalah pembunuh tudu ini. dan ia mengubah tudu ini. Jadi tudu ini memakan tudu ini. Tudu ini. dan bagaimana kita lihat apa tudu ini? Jadi tudu ini sebenarnya adalah pembunuh tudu ini. Jadi anda dapat menghidupkan dan anda melihat hendel untuk menghidupkan klik. Jadi sebabnya ia disebabkan hendel untuk menghidupkan klik di sini dan tidak hanya untuk menghidupkan klik, ia disebabkan ini adalah sebuah referensi untuk komponen reka currently saya. Jika anda hanya menghidupkan hendel untuk menghidupkan klik, ia tidak dapat menghidupkan apa-apa referensi ini. Jadi ini penting. Ini beritahu javascript yang saya menguruskan kepada fungsi yang saya memutuskan pada komponen ini. Jika anda leisure dan resipkankankan hendel-reka ini, kod yang anda mungkin tidak boleh membuat. Jadi ini adalah damaged yang penting apabila anda ingin menghidupkan hendel. Anda perlu menghidupkan hendel untuk hendel. Dan itu sebabnya apabila saya menghidupkan klik, saya sebenarnya boleh menghidupkan sesuatu. Jadi apakah ini adalah hendel untuk menghidupkan klik? Ada yang ingin menghidupkan klik ini untuk saya. Semoga anda telah melakukannya. Kita sepatutnya melakukannya minggu lalu. Siapa yang mahu beritahu saya apa ini? Bagaimana jika saya melakukannya? Ia melihat jika saya mempunyai pakaian yang saya klik. Pakaian yang saya klik. Dan kemudian melihat jika pakaian itu belum selesai. Maaf, jika ia tidak selesai, kemudian klik. Bagaimana jika ia tidak selesai? Apa maksud anda? Maaf, saya mengalami pakaian yang telah melakukannya. Dan kemudian, jika ia tidak selesai. Ya, anda dapat idea tentang pakaian yang telah dilukai. Anda mengubah keadaan dari jika pakaian itu telah dilakukan. Jika itu telah dilakukan atau tidak telah dilakukan. Jadi ini seperti melakukannya pakaian yang telah dilakukan pada pakaian yang telah dilukai. Tidak perlukan kerana memadakan klik manfaat, memadakan bahawa pakaian yang telah dilakukan. Jika pakaian di perlukan, jika pakaian untuk dungu, finalement anda mengambil begat sun Sham. Sebutnya skul. Jika sudah tidak terbsat, jika dirimu tekanan el. Dan sebenarnya adawall. cara untuk menulis ini, itu sebenarnya adalah sebuah cara yang mudah dan mudah untuk melakukannya. Tetapi mungkin sedikit pengetahuan jika anda melihatnya untuk pertama kali. Jadi, operator ini ini, eskimasi mark ini, itu betul-betul apa yang keputusan ini lakukannya di sini. Eskimasi mark ini adalah sebuah tidak, sebuah tidak operasi, sebuah bulan tidak. Jadi, jika anda betul, tidak betul adalah salah. Tidak salah adalah betul. Jadi, anda berkata, pengetahuan jika anda melakukannya tidak, eskimasi tidak. Jadi, jika sebelumnya telah dilakukannya, kemudian tidak telah dilakukannya. Jadi, operator ini tidak, eskimasi ini, sebuah cara yang mudah untuk melakukannya untuk melakukannya di sini. Jika anda berkata, jika anda berkata, jika anda berkata, kemudian anda tidak telah dilakukannya. Jika anda berkata, anda tidak telah dilakukannya. Dan tidak telah dilakukannya. Jadi, anda boleh berfikir, tidak adalah operasi sebagai bulan. Jika saya melakukannya, jika saya membutuhkan app saya, maaf saya, saya melakukannya. Jadi, saya rasa, setiap kali saya memandangkan kota, saya perlu memulangkan npm. Sebenarnya, untuk kami, tidak. Untuk keadaan ini, kita menggunakan framework ini, kreatreact app. Jadi, ini sangat bergantung. Jadi, kreatreact ini adalah framework, tapi kreatreact app ini adalah yang Facebook membuat kreatreact lebih mudah untuk digunakan. Jadi, ia menyebabkan semua perkara yang sangat berbentuk, perkara-perkara dan membuat perkara-perkara dalam sebuah pakar yang berbentuk. Dan kode base yang kita sebenarnya menggunakan, ia sebenarnya menggunakan kreatreact app. Dan apabila anda memulangkan npm, ia memulangkan beberapa skrips di Facebook, yang sebenarnya memulangkan serva, yang memulangkan file anda, dan serva juga memulangkan file anda untuk perubahan. Jadi, jika anda memulangkan kode yang serva tahu, dan anda sebenarnya memulangkan automatikannya tanpa anda memilangkan serva. Jadi, ia sebabnya, apabila saya memulangkan npm, saya tidak perlu terus memulangkan npm dan memulangkan npm lagi. Dan apabila saya memulangkan kode saya dan saya memulangkan, keputusan saya akan masuk. Ya. Jadi, anda dapat melihat bahawa kode yang saya memulangkan tadi, sebenarnya tidak memulangkan fungsinya. Saya masih boleh memulangkan kedua-dua saya. Ya. Jadi, saya memulangkan keputusan yang lain, dan saya memulangkan dalam satu-sat. Dengan pakaian tidak di depan. Dan saya tidak memulangkan apa-apa yang lain. Ya. Jadi, di sini, dalam pakaian ini, saya memulangkan dalam pakaian ini, dan jika anda melihat kode anda, anda sepatutnya telah melihat pakaian ini di atas, kan? Saya memulangkan itu, dan saya dapat keputusan yang sama. Kerana ia adalah logik yang sama, tetapi hanya sebuah pakaian. Jadi, sebuah proses memulangkan kode yang saya memulangkan, ia adalah sesuatu yang saya lakukan banyak-banyak. Saya melakukan banyak-banyak. Itu adalah pakaian yang terkenal, itu adalah pakaian yang terkenal, tetapi bila anda melihat pakaian yang anda inginkan, boleh dikatakan dalam cara yang lebih elegan atau lebih mudah, ia selalu sangat baik untuk kembali, melihatnya, dan melihat bagaimana anda boleh membuatnya lebih baik. Jadi, saya cuba cuba memuatkan anda dengan pakaian ini, pakaian ini untuk melihat pakaian anda yang terkenal dan membuatnya lebih baik. Jadi, jika anda... Okey, untuk itu, anda tidak selalu melakukannya, tetapi saya akan memulangkan untuk menjelaskan kedua-dua pakaian ini. Jadi, di sini anda sebenarnya menjelaskan bagaimana rancangan baru anda yang sepatutnya sepatutnya sepatutnya. Berserang. Saya minta maaf, saya akan memikirkan ini. Okey, jadi di sini anda menjelaskan bagaimana rancangan baru anda yang sepatutnya sepatutnya. Jadi, anda melihat rancangan yang terkenal yang sangat selesa, ini rancangan yang sepatutnya sepatutnya. Dan, saya ingin mengubah tukang yang terkenal untuk tukang yang sepatutnya tukang yang terkenal untuk tukang yang terkenal. Tapi anda mungkin mengalami kenapa saya mengira tukang yang terkenal untuk tukang yang terkenal, bukan? Hal yang penting adalah tukang yang terkenal adalah objek dalam ini. Di dalam ini, tukang ini, tukang yang terkenal. Dan apabila anda membuat tukang ini telah di sini, anda adalah apa yang kita nampak objek yang terkenal. untuk mengubah objek tersebut. Jadi, ia sedikit tersebut. Jadi, mengingatkan dot2doos. Sebelum saya mengubah dot2doos, mari kita katakan sesuatu seperti ini. Deskipun, sesuatu telah dibuat dengan benar. Untuk contoh, ini isu saya. Ia adalah isu ini. Ia tidak tersebut, saya hanya mencari sebuah kota. Jadi, ini isu saya. Sebenarnya, bagaimana komputer mengubah objek ini? Ini adalah satu objek yang mengubah sesuatu di sebuah kota. Selepas saya mengubah current2doos itu, itu adalah objek yang sama. Jadi, mari kita katakan objek current2doos ini. Jadi, ini adalah objek yang sama. Sekarang, dot2doos ini sebenarnya seperti ini. Mari saya mencari sebuah kota. Ia sebenarnya seperti ini. Tapi sekarang, ia salah. Kalau sebenarnya, ia benar. Dan saya mencari keadaan. Jadi sekarang, dot2doos ini sebenarnya seperti ini. Jadi, kota yang diubah adalah dot2doos ini. Kerana dot2doos ini berubah selama satu kota. Kemudian, kota ini adalah kota yang penting yang berkata-kata, berkata-kata kota saya. Ini hanya kota yang diubah. Kalau tidak, kota yang berkata-kata tidak akan tahu ini adalah kota yang berkata-kata kata-kata dot2doos ini berkata-kata kota saya ke kota yang berkata-kata ini. Jadi, ini adalah kota yang penting. Kalau tidak, kota ini tidak akan mengubah kota2doos ini. Kota2doos ini tidak akan mengubah kota2doos ini. Ya, jadi, mari saya menunjukkan. Jadi, jika anda tidak dapat mencari sesuatu, kota yang terbaik adalah untuk mencari sebuah kota. Jadi, mari saya berkata-kata kota2doos ini. Jika saya mencari kota2doos ini, tiada apa-apa yang berlaku. Jadi, ini adalah kota yang penting yang berkata-kata untuk mengubah kota2doos ini. Jadi, kerana kota2doos ini mencari kota2doos ini, anda boleh membuat kota2doos ini dan melihat kota2doos ini. Jadi, saya akan mencari kota2doos ini. Jika anda mempunyai kota2doos ini, anda tidak perlu menunggu kota2doos ini. Saya boleh mengingatkan semua perkara yang sudah terakhir. Ini sebenarnya berlaku dengan apa yang kami lakukan terakhir. Saya rasa saya mendengar daripada sesuatu yang jika anda semua merasa sedikit terdengar terakhir. Jadi, saya akan mencari kota2doos ini lagi. Tetapi, kami akan mencari kota2doos ini. Jadi, jangan risau jika anda merasa terakhir, kota2doos ini merasa terdengar. Bagaimana perkara yang berlaku daripada kota2doos ini? Ya. Ini adalah kota2doos ini. Ini adalah kota2doos ini. Jadi, anda boleh mencari kota2doos ini tidak benar. Saya hanya mencari kota2doos ini. Kota2doos ini tidak benar dan kota2doos ini tidak benar. Jadi, kota2doos ini adalah kota2doos ini adalah cara javascript mengatakan tidak. Ya. Jadi, sekarang saya mahu menambah kota2doos baru. Sekarang, kota2doos saya akan mempunyai kota2doos ini. Apa yang saya lakukan? Kita mahu menambah lebih banyak kota2doos. Terima kasih. Jadi, apa yang kita perlu lakukan adalah saya tidak tahu. Saya pasti anda telah memperkenalkan web-app. Biasanya, anda mempunyai kota2doos, anda memperkenalkan kota2doos, anda memperkenalkan kota2doos, anda memperkenalkan kota2doos. Jadi, itu adalah perkara yang kita akan lakukan di sini. Kita perlu mencari kota2doos ini untuk memperkenalkan kota2doos ini. Dan kemudian, apabila kita klik, ia akan mengubah kota2doos kita. Jadi, anda faham kota2doos ini jadi, proses yang sama. Kita perlu memperkenalkan kota2doos itu memperkenalkan kota2doos untuk memperkenalkan kota2doos, kemudian ia akan mengambil kacaukan klik. Jadi, saya akan memperkenalkan sebuah kedai yang baru ke sana. Sebab sekarang, saya tidak harus memperkenalkan kota2doos yang saya ada. Saya perlu memperkenalkan kota2doos yang baru saya memuji ke dalam keadaan saya. untuk membuat deskripsi baru ini. Pada awal, ia adalah string mt. Jadi, anda hanya menunjukkan input dengan mt. Tak ada apa-apa. Dan kemudian, anda ingin menambah sesuatu di atas list. Mungkin. Untuk menambah. Anda boleh menambah di bawah. Tetapi, saya hanya menambah di atas list. Jadi, anda tahu apa html tag yang anda perlukan? Untuk menambah input. Untuk menambah? Untuk menambah. Untuk menambah. Untuk menambah. Sebenarnya, apabila anda menambah html form, anda akan mempunyai tag form dan dalam tag form anda mempunyai input. Dalam kes ini, kami tidak perlukan form. Kerana, kami menggunakan javascript untuk mengandalkan submisi. Jadi, ia bukan form html yang biasa. Jadi, kami hanya dapat menambah input. Jadi, kami akan menambah input di sini. Apa yang saya mempunyai, anda ingat? Kerana ada tanda-tanda tanda-tanda, anda dapat mempunyai numerikal, anda dapat mempunyai tanda-tanda. Ya, tanda-tanda. Jadi, apa yang anda mempunyai? Apa tanda-tanda tanda-tanda? Jadi, tanda-tanda tanda-tanda sepatutnya, saya dengar beberapa orang mengatakan tanda-tanda. Tanda-tanda tanda-tanda anda dapat mempunyai tanda-tanda untuk mengandalkan. Jadi, tanda-tanda tanda-tanda adalah tanda-tanda tanda. Jangan mengandalkan tanda-tanda kerana html tidak mengandalkan apa-apa yang bermakna. Walaupun konsepasi, ia seperti perkara yang sama. Jika anda mempunyai tanda-tanda anda akan merinjakan tanda-tanda anda akan menerima tanda-tanda tanda-tanda untuk mempunyai tanda-tanda dan mempunyai You could still technically type a string in But depending on how you handle the input later in your code It may or may not work But basically this is just telling the browser how to render the input tag And actually nowadays, browsers also implement their own validations So you could add some other attributes to your input to say Validate to tell the browser not to allow submission if it's not the correct type But we're not going to go into that Just to let you know So this should be text And there should be a value associated with this input So in React, when we have these kind of forms and inputs We're going to do something a bit special Because we want to tie the value of this input to the component state Subway? Ya So I'll continue So we're going to tie the value of this input to the component state So we're going to actually assign this value to this dot state Dot new to do description Which if you remember, I initially set it as an empty string So when your initial render, it will just show an empty input Okay So if you've done this, let's try to refresh Oh actually you already see it, right? This is my input Okay And usually when we have an input, we want to put a label on it And people don't know what it's about So let's Anyone know what the HTML tag for that is? Someone who came for workshop 1 Name The HTML tag How do you label your input? I kind of say the answer already actually Ya label Thank you So there's a tag called label Which allows you to specify which input you're labelling So if you write normal HTML right The attribute you write is 4 So because I say this is actually not normal HTML This is JSX And if you remember from I don't know if Sahil told you guys about 4 loops But javascript, there's a loop There's a looping construct called 4 loop So you can say 4 each I think in this array, I want to loop through it So 4 is actually a reserved word in javascript It's a keyword So that's why they don't allow us to put 4 here Like normal HTML So it will be HTML4 The attribute we will put here is HTML4 And not just 4 If you didn't really fully understand what I said It's okay It's a bit of a minor thing That's not the key takeaway of this But I'm just trying to explain to you Why it's not just a normal 4 So if you want to label HTML4 We have to specify the name of the input So let me add more attributes to my input So let's call this Okay, I'm just spacing it on multiple lines For it to be easier to read You can do that too So let me call this New to-do description It might as well, right? And let me have the ID Also of new to-do description So the HTML4 will be for new to-do description Because it refers to the name of the input And then I can put in the text for my label So in this case This is a form input for adding a new to-do So I'll just call it add to-do So if you refresh your page Okay, if I'm moving too fast Or anything, just sound it out But I'm just going to continue if no one says anything So if I refresh my page, it's already there This is the label for my input It looks kind of ugly But you can use your superpower knowledge From workshop 1 to style it To your heart's content When you have time So what are we missing? We have the label with the input Button And we need the button to handle the click So let's just put What tag should this be Ya, there's also a button tag So there's a button tag in HTML So I'm just going to put this button With a plus sign So if you see, refresh, so this is my button But it's not very useful Because it doesn't do anything So let's make it a useful button So what we want to do When we click this button Is to, what? Anyone care to volunteer? I've not volunteer people You want to add something to the react state, right? What do you want to add? You want to add what's in the input It's kind of too big Ya, okay Ya, so you want to add To-do, right? To your list So initially, let's say my list is Initially this is my list I have buy grapes, buy oranges Then let's say I add Learn, react, oh shit Okay, let's say I add Sorry, I can't If you try to type in list You notice you can't type to it now I'll let you know why But We'll go into it later But let's say you want to add another to-do Okay, don't copy this code I'm just showing you Let's say you want to add another to-do Learn, react That's what you want That's what the final outcome of This button click should be And it should also add The is done flag It should also add object for is done Property Default is to false It doesn't make sense to add a to-do as you're done Right So this is what you want to do With your button press So make sure you add This new to-do description to your state And now we need to Fix two things actually Sorry, I kind of forgot But you notice If you try to type in list now Right How do you close the label? No, because you want to put This text in the label So your label actually Has Tags inside, has Has more stuff inside it That's why you have to have An opening tag And a closing tag But for the input Because there is no Like the value of the input It's not specified as the stuff In between the tags So you can close it With this closing tag I think you can do it But it's not Very semantic Like your browser won't Like crash or anything But this is Not the way you should do it Sorry, how do I So this is the label Okay, let me put it back To full width So this is the label And I put this add to-do Here between my label tags That is the add to-do That you see over here Okay Empty string part So my initial state Should have this new to-do description With an empty string Because I don't want to Render Anything in the input At the start You can still Yeah, you can still see the label But this tells It's like Tells your browser That this label Is actually for this input So I think Let's mix it more semantic Meaning like Certain tools I say screen readers When they parse To you And you see It doesn't look the different But some programs When they run through the HTML And try to parse it That thing is important That information is important To them And they will kind of say They will kind of Read out something differently Based on the attributes That you put in For example Yeah, it's what we call It's like adding Semantics to the HTML Adding meaning to it Or else it's just a visual thing This one Property bracket string Okay, so To recap No, then Where do you see that? Which one? You're like Don't be distracted by this stuff It's my It's visual studio code Being trying to be helpful But it's a bit unhelpful For this case Just look at You know The actual text here Yeah, when you hope of us Certain things Like visual studio code Will try to tell you That this is something Try to tell you about metadata About this This piece of code Just ignore it Okay, so So recap again You should have this New to do description On your state And you should have This bunch of stuff The label The input And this button Okay Okay, so I'm going to move on So We need to handle two things One thing is the button press Another thing if you realise It's this problem We can't say you type Anything into the input I'm trying to type But there's nothing So the reason That this happens, right Is because We made this input What they call A control Component So If You don't know anything That's always Google So what is a control component If you read the docs You'll say I'm not going to read it To you right now But if you read the docs About how to do forms And react You'll Hear about this thing Called control And uncontrolled components So the gist of it Is that When we bind Our input Value Right here To the state Component We are telling React to control this input Right With the state If it's state That means The browser itself Is not the one Changing the state Of this input You have to explicitly Set the state On your react component For this value to change So how do we do that Again We need Event listener So there's this thing Called on change That I can bind to Another function That will handle the change for me So I'm going to cheat a bit And Reference the code I did before Because Okay So You realise As you learn coding That There's no way you can remember everything That's why there are docs And And There are docs And there's Google And there are a lot of references And resources for you To look up things when you need to So This thing is something I also cannot remember Of the top of my head right now So I'm going to cheat a bit And go and see The stuff I did So let me I'm not going to explain What I'm doing right now Because It's It will be too complicated To explain I'm sorry So this is my On change handler Don't worry if that code Don't be anxious To copy this first I'm just going to explain What it does first So this Handle On change event When you Try to type something The input It gives you this The browser It gives you javascript It gives you this event object When I say javascript and browser It kind of mean There's this kind of Programming interface That The browser exposes you Through javascript And there are certain Defined Things you can do with it One of them is Handling These kind of events And there's a specification That tells you that When you try to handle this event Get this event object To do logic with Based on this event I can do stuff So this event Has It's actually an object With a target So the target in this In our case It's going to be the input element You can think of it as In javascript All the inputs And the stuff In our browser They are kind of like Objects of their own And these objects Also have their own properties So when I do Event.target Property On this event object And this target In this case It's the input element And inside this input element There are more properties Name and value So okay Let me show you What the target Actually looks like So okay Don't copy this code Event.target Actually looks like Object like this So you just see It's an object With a bunch of properties One of Two of them are name and value It may have more But we don't care For our purposes So we just want to get The name Of this input element So what is this name This name is this This guy The name I specified On this input Okay So What I want to do is Update My state With the new value So you can't really see In I'll go back To the old code To show you in full But basically My initial state Has a new to-do description Empty string Basically I want to update The new to-do description To whatever The new value is Right And this is what this Function will do So let me just Go back to my old code Sorry about this Okay sorry about that So I'm back in my old code Sorry I kind of lost The sum of the stuff But Let me just put it Back quickly again So you have the new To-do description Let me just Change all of this So So again remember We had our label With the HTML4 New to-do description And the text was add to-do We had our input With type text Value will be the This.state.newto-do description By the way you can If you notice VS Code is quite handy It allows you to auto-complete It will auto-suggest So if you want to auto-complete You can press tab And it will auto-complete for you At type It had value It had the name Yes And the ID And the thing that we were going to add Was our on-change Event Right? Our on-change event handler So This is going to be This function Handle on change The one that you saw just now So let's define it right now Maybe put it above handle to-do click So Handle On change We declare the same way It's a function Right? So we say that this This variable Handle on change References this function body So this is going to take the event Remember Which is the on-change event And this event Has a target Right? Remember we had this event.target And if you remember You saw this kind of strange syntax Ok don't copy the first part So Ok maybe start off first Let me explain this syntax to you So we had this Name value syntax We had this funny curly basis Name comma value thing So in JavaScript This is called destructuring So I told you before That our Target Our event.target Is actually this object With name Some name And value Some value So this This interesting syntax Actually allows you to Kind of pull out these properties Two properties at one go Into variables So this is actually the same As doing ConsName Equals event.target.name And cons value Equals event.target.value But I do it in one line Ok I'm a bit lazy I like to do stuff in one line So this is a more concise way Of doing the exact same stuff la Ok so all day You should have this line of code Ok you can start copying this Now what I want to do With this name and value So again remember Name is New To-do description Right The name is this name set Here New to-do description And the key thing here Is that this name Actually corresponds To this property of my state Exact same string So that's why I can Do this I'm going to do This.set state Name Value Ok this might still be A bit confusing to you If you look at first hand What are the square brackets for Ok So and what is the name and value So like I said Name Imagine what is the store name Name is some value like some name So string Right Ok in our case This name specifically Is new to-do description Agree Because that's the name We set on our input element Value Would be Say some to-do Or something to-do Right So when I do this Set state Must make sure you type Properly You have the curly braces first And you have the square braces And this colon And then the value And then you close the curly braces So what this curly braces Inside Like If you notice curly braces In JavaScript Means this is an object So I want to Kind of Set my state Part of my update This part of my state I don't have to specify Everything So you notice My original state Has a to-do as well I don't want to change that So it's fine I just change the part I don't want to change Which is the new to-do description So I just put the properties That I want to change Inside this object The property I want to change Is new to-do description So actually The more You know The clearer way to do it Is like that, right? I want to change Set new to-do description To this new value From the input But This line of code The name with the name Is actually doing the same thing And it's more Generic Because It's actually getting The name of the input And The square brackets Kind of Expands out the value Of that variable Into Something like the first line So name itself Has contains This string new To-do description And the square brackets Kind of Computes that value And expands it out So that My final object That I'm passing in here Is actually something like that By the way If I keep referring To these object properties As strings Because they're actually just strings Like this is the same Begitu saya memandu Or javascript Or javascript Is a string As a string key To this property But the double quotes Are kind of superfluous In this case That means they're not Necessary But they're the same thing So when I say that name Expands to this string New to-do description That's why These two lines Are actually equivalent So the These You know Square brackets Tell javascript Compute this variable Right Expand name Out to its actual value So that's why We have something like this In the end And it's more generic Because Let's say I don't have just one field Let's say my component Has many-many input fields And I want to I want to use the same On-change handler For all of them So let's say I have new-to-do description Another field Yet another field And then I had Three inputs On my component With the corresponding name If I hard-code If I hard-code New-to-do description Here Do you think I can reuse This handle on-change For all three? Yes or no? Some shake head Some I think very blur So If I hard-code This new-to-do description Here I cannot use this On-change handler For all the inputs Because Every input Got a different name And they are tied To a different property In the state Imagine I'm trying To change the input For another field On-change handler I say I set state On new-to-do description Does that sound right? No right It's not that property That I want to change Okay Y'all look a bit blur Maybe I will move on from this And if y'all have any questions Later Y'all can clarify Okay So this name Is name gotten From the event target And that's the name We actually set on the input element And in this case That is This new-to-do description But let's say You have other inputs Right Let's say you have other inputs Okay Let me copy this And put another input Yeah So if I name this Another field I still want to use The same handle on change If I hardcode new-to-do Description in the handle on change I cannot Re-use that function Already Okay So that's why I use that name Instead of hardcoding Into that So if I say I want to set down the label In CSS I'll have to just call That new-to-do description This is the input Not the label But yes If you wanted to style If I CSS You could select it by the ID But that's not the only way To select it You could select it By the tag name itself Or by a true its parent But I shouldn't go into that Because We got more stuff to cover So you can play around When you have the time Did you copy The things that you need to copy? Okay So we have this on change handler So hopefully right now If I try to type stuff in It's going to work It works And I'm going to show you Something pretty cool So your browser has Sorry Sorry What happened to my button? I did not put my button in After nuking my changes So Thank you I put my button in now Because that's why I was playing around with my terminal And I did something And I lost all the stuff I changed So I forgot to add the button back in Okay The button is here now Yes My button is there So if you see I now can type stuff in Okay I was going to show you something Let me just show you Something kind of cool I don't think you have time To try to You know install it To make it work yourself But let me just try to show you Something cool Your browser can do So there's an extension called So I don't know if you know Okay I think Talk to you through You know using the developer tools So if you do like a If you're on a Mac Or you do a common option I Or I think on Windows You control shift I You open this inspector Or you can right click And inspect You'll get this Nice panel here And this actually allows She's to see Kind of like your HTML Over here But it's not strictly The HTML that you wrote It's something that we call The DOM Document Object Model I'll go into it I'll cover I'll talk about it more later But basically it allows You inspect the code That you wrote To display this page But you can see That re-wrote Code and react Right because react Kind of converts it into The actual HTML Is going to be displayed But if I want to actually Go and look at the base React component That we actually wrote So there's this cool extension This browser extension Called React Dev Tools Which I've installed already So I've installed it And you can go and play around Go Google React Dev Tools So React Dev developer tools React Dev Tools Depending on the browser That you're using You can get on Chrome On Firefox I believe Yup So I've installed this extension So that's why I'm going to open the panel I get this drop down here With all my extensions So if I click react It can detect that react Is actually running this page And they can actually And now I can actually see my app And not only just my app The cool thing is I can see the state So I can see my new to-do description And my list of to-dos here And you see as I change This guy You see my state is changing The yellow box Can you all see at the back The yellow box That's moving And the right That is my input state changing That's my new to-do description Value changing Okay sorry By state I'm referring to the State of the react component Not the state of the to-do object When I say state I'm talking about the react component So the react component has This state That contains A bunch of stuff Which is the list of to-dos Like this list of to-dos here As well as the new to-do description So this is The state that react users To determine how to render Because if I added more to-dos The state is different And react will render things differently If I added one more to-do Then it will render one more to-do So this state I'm talking about Is a state of the component Okay I don't want to call the I don't want to call the to-do state a state Okay I call it is done I'll call it is done Like the state of If by state of the to-do You're meaning whether it's done Or not done I'm not going to call that a state I'm just going to say Whether that to-do is done But Whether or not that to-do is done Is actually also Tight to the react state Right Because we have an object here With this is done flag Okay so far so good So this is just something cool That you can do If you have react dev tools I don't think you have time To play around with it now But if you have time After this workshop Please go and try to install And play around with it Ya so you can see this value In the elements So if you look at this You can see the value Changing also So this elements view Is the normal The normal view of the DOM Right and you can see Actually this purple part That's changing The DOM The actual DOM elements Also changing So anyway Just go back And play around with yourself I don't have that much time To go through it in detail But that's basically How we handle the input Adding Updating the state Of the input Which is tied To the state of our react component Now that we Can get the value of the input We want to Handle clicking the plus button Ya So What we want to do Is we want to get The value The new value Stored in this New to do description And create a new to do object Out of it With the is done Set to false Right Because I say If you add a to do And it's already done Then it doesn't make sense So again We need an event handler Right And what is the What is the event That we are listening on Volunteers On click Yes Thank you So we have We already had this Other on click With a different kind of function So I want to name This function differently Because it does different things Adding a new to do So maybe I'll call it Handle add to do I just want to name it Something that makes sense Right This is basically what it's doing It's trying to handle Adding a new to do So the same thing I need to create a new function So Let me Create One Over here Handle add to do So VS Code I already knows That I want that It will auto suggest the name So what do I do Is this handle add to do I basically need To take the current state The current new to do Description in the state Create a new to do Object From that description And update my react state Right Okay so Three steps Let me just write some pseudo code So I don't need To take any arguments So I just put some empty brackets Okay step one is Get the new to do description Right Step two is Create new to do Object From the description Step three is Update my state So For step one How do you get The new to do description How do you get A new to do description Where is my new to do Description stored In the state Okay so how do I reference it This stored state Yeah Okay so this is The string Whatever string I type in to my input Okay So now we want to Create a new object From this description So let's say Let me just store It's an intermediate variable So I want to create A new object from this So how do I initialise How do I create an object I just store In another variable So let me call it new to do An object has Is initialised Through curly braces And I want to Set the description property On this object To New To do Description Right And What's the other Thing that should be on this object It's done Should it be true or false Okay So with my new object Now I want to Update my list of to do Stored in the state To have this new to do So I'm going to show you Another new bit of syntax In JavaScript So If you remember Okay Now don't copy I'm just going to Type some code for you To see what's going on So remember This to state to do Is a list like this Right Something like that With 2 objects Right This is my current state What I want to do Is add this new to do Agree This Can be Done in a very concise manner By What we call Okay How do I describe it Okay so You could have this You have this array And you want to Add something to the end of it So this This kind of operation we call It's called appending Elemental array Right Now the problem With doing this Let's say if I just You know I know I have this array Right Okay this is This is not actual code I know my array looks like this JavaScript has A method called Push That does this array That allows you to Append things to an array So I could Technically I could kind of do something like this And Okay sorry If I did something like this With this push Right this is a method On an array This is a method That I can call an array That means this is like a function I can call that Tells the array Hey I want to add this Element to you To the end So if I If I call this line of code here I will kind of Be doing something like this I'll be adding this to do New to do in However I'm not going to do I'm not going to use this method Because What this method does Again It's mutation That means I have this existing array I'm modifying the original array Like the array grows in my memory In my computer that array Is stored somewhere in my memory And that same And that same array object Is kind of growing in my memory That May seem fine But in the case of React it's discouraged To do that when you are mutating What do you call? You're mutating This state directly like that Because this array Is tied to my React state And if I just Push something into this array It will mutate this state Directly Without you explicitly calling Remember This dot set state This is the one That I've always been calling Explicitly to tell Your state is going to change The Correct way to do this Is always Change your state Through this method And not like sneakily Try to change your array By just pushing A new element into it This may sound A slightly abstract Abstract right now Because you may be like What do I mean by mutating Like this object in memory Is growing It will take time to Understand these concepts And fool But I just want to give you an appreciation Of why we are doing Certain things, certain way Like you may think If you let's say you know That oh I can push stuff in an array Why don't I just push it And then my array will grow Right But I'm telling you at React We always have to explicitly Set our state You must set state With an updated state And pass the updated state To react So that React knows That it must re-render Can but then your three items Will appear at once You know what I mean Ya but You want to set You want to eat to appear When you're one by one Right Okay so now Right now what we're doing You will see Once you press the plus It will add the new to do It's not going to suddenly Pop three to those out Okay but that's not That's not really related To my point about this This push versus a set state Basically okay End of day Remember you always have to Update the state through This.set state It's not really about It's not just about the memory So Because React needs This.set state To know when to Do a re-render To re-render the UI And if you mutate The state directly Without going through this You can get some weird bugs It may not occur For very simple applications But a lot of you Have been bitten by Bugs where people are Changing state under the hood And then another part Of the code assumes That it's actually like that But actually the object Was mutated by another part Of the code And it gets very messy So this is not just a This is general thing This general thing about mutating Stuff It's not just a re-acting In general In general programming It's kind of dangerous When you have this object That you can pass Around everywhere And then people change it Here and there And then another guy Who wants to use it Has no idea Like whether that has Changed or not That my to-do Has It looks like this If I do something Maybe it will My program will explode Let's say someone Mutated the array To remove everything And then Another part of my code Tries to say Get the first element Of the array And do something like it But the first element Doesn't exist Then you just That kind of thing So this is why We try to avoid Doing this kind of Mutation Object mutation So the better way To do this Is to use This nice syntax Called spread So I'm going to show you So new to-dos Is going to be this New array of to-dos Okay I want to keep The original list of to-dos And add on a new one Right So JavaScript Has this nice syntax Called spread Which is this dot dot dot So I want to spread out My original list of to-dos So this is an array This dot state dot to-dos An array I'm going to spread out Into this new array And I'm going to add My new to-dos So at the end of the day I will get something Exactly the same as Exactly what you see here My original to-dos Spread out In the array And my new to-dos added But I'm not doing any Mutation Because you see here New to-dos is actually A whole new array I'm actually Declaring a whole Defining a whole new array Right with this Square brackets Yeah And if you don't put This dot dot dot right What will you get? If you don't put The dot dot dot in front What will you get Is something like that You get an array Inside an array Do you follow? So my this dot state Of to-dos is already an array Maybe I draw I draw a bit clear No one needs Wifi anymore right So okay So I have this array Can you see at the back Can So this is an array Of stuff la This curly braces Refer to my to-dos object I'm not going to write The whole thing If I want to create A new to-dos A new Array right If I just do this Let's just do A very simple substitution If this expands out To this thing with braces inside This is going to expand into what The braces are also Going to be inside right What does that mean? This itself is an array This itself The outer part is also an array You have an array inside an array Do we want that For this case? No right We want to actually Have these guys Outside on the first level What we want is Something like this So that is what the Dot dot dot does It spreads out This array The object Wivers in this array Into the new array And then We add the New to-do So that So that our final array Will have the new to-do here If we didn't do the spread Our final array Will have this This array inside it And then the new to-do On the outside Which is not what we want If you do that If you update a state like that Our code will probably break Or it won't render properly Because it cannot Go through the array correctly Because When we render the to-dos We are assuming That they are in one array like that If we give it a nested array It's going to try to Do something with the nested It's going to think That this nested array Is actually a to-do object And try to do something To do it That can't be done And your code will probably explode Input multiple things So in this case We can't We can only add one to-do at a time If you wanted to Then you have to add multiple inputs Why is it an array? Because we can only add one to-do Okay, this Has nothing to do with Whether we can add one to-do At a time Okay, so in general Let's say I don't call Let's say I Not even about Our own Our specific problem Let's say I just have one Array called A And another And I want to create a new array Called B With the objects Originally in A If I Do directly B equals Bracted A This is going to be A double You know, a nested array inside That's what I'm trying To explain here I'm not talking about Whether adding multiple to-dos Or what For our case Because we only have One input But what I'm trying to explain Is this concept of spreading out My objects in the array Ya, but this applies To what we're doing here At least what we're trying To do here, essentially But this is just a general Programming thing General thing in JavaScript That you can do Okay, so that's why We have to do the dot dot dot That's what we call spreading So The correct code finally Is this, the dot dot dot in front Right, and we add The new to-do at the end If you put this new to-do On top here, right It Will still work But then The order will be different So if I put at the bottom It will render at the bottom If I put at the top It will render at the top Later, I can show you To show a difference But it doesn't really It depends on what you want You want your new to-do Be at the top or at the bottom After you Okay, so After I have my new to-dos, right Remember, how do we Change our state? Ya, this is our set state Always call this We need to pass the object And tell it which key We want to update In this case We want to change the to-dos Right And we put And we assign it And we set the new value To the new to-dos So remember, step one, two, three First we get the new to-do description Then we actually create The new to-do object And then we actually set the state We get the updated state And we set the state So If I look at my app now Right I've added my new to-do In this case, it's at the top Because, like I said I put it at the top just now I put it at the top If I put it at the bottom Then because of how My rendering logic is done I'm just looping Through the array Just going in order So if I put it at bottom Then It's going to render at the bottom So up to you Whichever you think Makes more sense to you And we can do the same thing That we've done With all our previous to-dos We can toggle it We can say it's done or not Sorry Ya, I'm going to get some water What time is it? 30 Maybe 3.30 3? Okey, so we went through all that We finally have A more functional to-do list That you can actually add to-dos to And to check whether it's done or not So you just have to specify The on click Handler So you bind this event handler To this event The click event Okey Sorry? Enter? Ya You can't do it just by doing that There's probably not an event That you could bind it to But we shouldn't go into that Like Plus plus That does not Array You can't do a plus plus You can only increment numbers Or you might increment an array You could concatenate your array By doing a plus But we are not going to do that You could, ya This is one way of doing it You could find other ways That don't mutate Push is also a way to do it By mutating your state No, no That's not That's not proper syntax Plus plus is only for numbers Plus plus Let's say you have x equals 1 Then you x plus plus X will become 2 Ya Ya, don't be confused About the syntax Okey, so this Okey, anyone Let me know If you still need to look at the code If not, I'm going to move on One minute Which one? Handle Handle new to-do Add to-do Ya You have a question? You can help The two of them The originals I had I'm missing What you had The original items on my list Are missing Ya, I don't know what After you refresh Ya, but for a while already So when you refresh, it's still gone Ya, so if I say refresh Ya, and I don't know what it's all So probably you didn't You set the state wrongly So when did this start happening After you added this new stuff? No, since you started It should be the change Some link is changed Ya, it probably didn't change the name And also I can't add it with the button So two issues And that was from the last class It's not still Two rules Okay So even before Before we did all this You couldn't see it already? Ah, I think so Interesting So I write this should be correct So I'm just going to indent it So before you change this It also They were showing the last class So I'm not sure what I do Hmm It seems like this empty For some reason Wait, I say returning this Ya, sorry So probably this return It's not happening properly Because It cares about the new lines So you kind of tell this bracket You put this bracket That you want to That this is all like one thing That you want to return Okay, and just now I wasn't able to add it with the button Ya Okay, okay Okay, let me tell you about last class Can I see the code? Probably your command Remove Okay, so put Can you put a Bracket around the hole After the return Put a number bracket And then Put the ending Before 3, I have 15 inch minutes To Talk a bit of stuff So let's Let's like Talk about a more conceptual Level Let me introduce some concepts to you That you have to understand to That you should be understanding If you want to be effective at Building stuff in React So the first thing is the DOM I already mention it So the DOM is basically Basis sense for the document object model The official Definitions you can find on the web Seem very If you read this as a beginner You're like What the hell does this even mean Kind of thing So To put it in a In a kind of Common English Way You can think of it as A representation The browser Users For HTML So we write some HTML The browser is going to look at that and parse it And it's going to analyze it and process it And it kind of constructs this Representation of that raw code Called the DOM And when you open your inspector That is what you see What you see in the panels What you see in your panels In your inspector panel This is not your raw code As you've obviously As you notice already Because your raw code writing is in React And it's not even the actual HTML That's being output Directly by React This is actually the browser's interpretation Of the HTML And that's the DOM And You see there's this fancy word Called an API API stands for Application Programming Interface So interface You can think of it as just a way For us to It's a standard Right A standard For us to talk to You know, this representation So we can actually Use We can actually manipulate Objects in the DOM So if you look at If you look at this inspector All these are objects in my DOM Like a div Is what we call a node in a DOM So the DOM You can think of it as a tree Right, when you write a HTML It's kind of like a tree structure So if you have a HTML text And inside you have a body Inside your body you have divs So it's kind of like a tree structure With parents And then children and all that So your DOM Has the same tree structure And all these Individual elements Are what we call Elements or nodes in the DOM And What does this have to do With React Basically anything that wants to render Stuff in the browser Has to deal with the DOM So React is actually Doing some DOM What we call DOM manipulation Inserting nodes into the DOM Removing them So when I say you add a new to do React is actually inserting This new node in the DOM Right, I added a new li list element Into my list And this appears as A new element in my DOM So if I open up this I don't know if you can see I've opened up this ul This was added as a new element And then when I Press plus again React is kind of inserting This other new element in the DOM Okay, so React is actually Doing all this under This low level DOM And we don't have to care About it We don't have to explicitly Tell the browser Hey, insert this list Over here We actually write Some code in React And React Kind of does its own computation And knows when And how to do the insertion For us So for example If our React state Didn't change If I'm not interacting If I do this But I didn't press the button And the state I didn't add the new to do To the state React knows I don't have to It doesn't have to do any insertion It doesn't have to And render the UI Right, so We don't That's why nothing changes Node Like anode Like a node in a network Or node in a tree Okay, so That's the DOM And this other thing Called virtual DOM That React uses Okay, this is very high level If you don't fully understand it It's okay I'm just trying to give you Just give you a basic appreciation Of how this kind of works So this thing called virtual DOM Which is React's abstraction Upon the DOM So I told you It's a kind of representation A kind of abstraction in itself So this is an abstraction On top of abstraction Super abstract I know But meta abstraction So the virtual DOM Is how React kind of Thus Thus is re-rendering So quickly So imagine If If you had to Manually go in And say I want to insert this node Insert this node there If you actually interact With the real DOM That kind of process Is actually kind of slow That insertion And those kind of delisional Those operations are kind of slow So React instead Of directly manipulating The real DOM first Let's say you change the state React has to know Whether Some state changes They don't necessarily Mean I need to re-render In our simple app Yes, most of the state changes Mean I need to re-render For example, if I add Some of the changes And it's kind of adding Something It's kind of re-rendering If I add a new tool To the state changes Is re-rendering But in some cases Not all state changes Will lead to a re-render And React is actually Doing a computation To figure out Do I need to re-render or not And it does this by Checking Whether the DOM has changed But instead of Checking the actual DOM It actually checks against This virtual DOM And it only Manipulates the actual DOM If it really really Needs to insert Or delete stuff From the actual DOM So this virtual DOM Is kind of The intermediate The higher abstraction That allows React To do this checking Very quickly It's called They call it diffing Like finding the difference Between the previous state And the next The current state And the next state And after React calculates This difference It knows whether or not It needs to actually touch The actual DOM And the virtual DOM Is what makes this fast So this is very high level And a bit abstract So you just kind of Get an idea How React is doing things Yeah So a lightweight representation Of the DOM That React uses to quickly check That it actually Needs to update In the real DOM So before I even touch The real DOM I check my virtual DOM Okay That is kind of All the concepts I wanted to cover Before diving into The next part About state and props So state You guys already Should be very familiar With state So after this Okay Anyone Can someone tell me If you Don't know what state is Anyone Still not comfortable With the concept of state So what Like What are you Confused about Like Okay That's not a very good Question to ask But like Which part of state do you Do you still feel That you don't really get State means like The Presence So for present situation Of the present state Is that the meaning? Yup So like Props is property Props is property Ya We haven't covered it yet But we're going to it But What we've been doing We've been searching A lot of state We've been doing All the state This and that So by now I hope You kind of Have an understanding Of what state is So state I don't know I don't know How to Make it simple State is state Is this current state Of my component So like to-dos My list of to-dos Is a state You know My new to-dos Christian is a state It is your current situation Your current data On the component It can be anything Ya Like a header It may not even have a state So not all react components have state So Okay It'll be clearer as I go on But State is a way for I feel like going Like tautological It's very circular State is state State is a way to track You know The current status of the component But not You don't necessarily need Like not all components Necessarily need to track a state If you just have a simple header With links Like if you wrote Normal HTML page You have a header State Not really right So for the to-do For to-do For to-do components It's kind of clear You have this list of to-dos And if you add a new to-do We kind of have to change There's a state change somewhere Let's say a header Like let's say You just have one component That displays a Cat picture Something like that You can't Click on it Or do anything You know There's no need for State to be there So usually how we Usually why we have state Is because we want to Interaction Not That's not the only case But that's For the purposes of this workshop That's That's the understanding That is good to have for now It's an object So you see When we declare this state It's basically a way To store our data So it's an object Over here So this curly braces Means it's an object And I can put Any old thing in this object I can put a race I can put a string I can put You know anything But Yeah You don't have to Declare it Like Okay I was trying to explain Exactly why this syntax works Is gonna be a bit Too much But yes For purposes Of this workshop Yeah You don't have to do a cons here And then Every time you refer to it In your functions You have to refer to it By the disk You have to always do this state Refer to the state Of disk component Yeah You can Yeah It's basically data So like If the user does something And the data changes You want to update the state So like When we click the button We say that we want to change the state To add it to do And then React will re-render Will render something different Based on the different state So You can think of State as a way of determining What you actually see On the UI It may not always be like that But this is one of the users Yeah So if you When you initially load your app The state is initialised To the initial state To the first This first object And if I don't do anything Of course nothing is going to change When I start typing something So it depends on how you write a component In our case We wrote it such that This new to-do description Will change as we type Right Yeah So you see this This new to-do description Is changing as I type So that's why I say For purposes of today You can think of the state As being tied to How to render What I should render on my UI I mean We are changing the We are modifying The initial state Yeah We are modifying the initial state Because we see something different But Just Before you click the button It doesn't actually inject Into the initial state So okay So my state has two parts Right One part of the state I don't know if you can see here I have the new to-do description Another part of the state Is the list of to-dos So when I do the typing I'm changing One part of the state Which is the new to-do description But I'm not changing The list of to-dos The state is the object That has anything Anything that you put into it Like you could Define whatever kind of data You want in that In that object In our case We have one array Of to-dos And one string Which is the new to-do description And when we type Into the input We are changing The value of that new to-do description But we are not changing The value of the list And so when we call This.set state We explicitly say Which part of the state Do I want to change It can be Not for If our current code It doesn't work But you have to probably Bind the handler To the event that's fired When you press enter But we shouldn't go into that now I'm not entirely sure I'll do it right now There's probably an event That I can There's probably an event That you could bind it to But I don't know It off to my head also Okay So if there are no more questions Feel free to break for Subway If you have any Specific questions Let me know Or let the other TAs around No If you need me to leave Some code on the screen Let me know also To kind of take snapshots Of your progress Of your files at different You know Different states So now if you do Go back Go to your command line You can do You can go to the command line Through VS code By Opening the terminal over here I believe control back tick Is the shortcut Or you can do a view Okay, is it in view Sorry, I don't I always use the shortcut So I know that control back tick Shows your terminal in VS code Or you could open your terminal It's a separate application Like I'm doing here Ya Ya, so I'm in my I'm in this In my directory With my code This is a git repository So if I do git status If you're on your VS code Do control back tick It should bring up your terminal Does anyone So only do you use VS code Do you know what is the Where do you see from the GUI How to show the terminal Okay, integrated terminal Ya Go to view integrated terminal The shortcut is also control back tick So either one Control back tick or go to view And click on integrated terminal So if you're on your terminal You can type git status And it will show you And it will show you The changes you have done so far So all we have been touching Is a single file right now So far So it will show that You have modified app.js And you can actually use git To show You know tell you You know what exactly am I Modified between My last commit And my current state So you can do git diff Diff Means take the difference And this actually shows you Line by line What I added What I deleted It's a bit hard to To see from this screen But basically I just want To show you that this The power that git Kind of gives you So basically To Commit this change I don't know if you remember Who it's in Or Sahil taught you But you have to First stage the file Meaning You kind of Add it to this intermediate state Before you say I want to commit So to do this What we call staging Because this This is git terminology That you guys Just have to get used to So before we Commit we have to stage So to do the staging We use a command Called git add So again If you do git status Git status Will give you the current state So git status tells me That this Component has been modified So I want to add This component I want to stage This component So I can commit the changes So the first thing I do Is git add And I can specify The component The file directly Right This will tell me Tell git stage this file So I run this And if I run Git status again Everyone Everyone following me? Ya Was that a no? Yes no So if If you run git add And run git status You should be able to see That now the file is green colour So previously If you compare It says changes Not stage for commit And now after After you stage it It says changes to be committed So remember There's this intermediate state Where you have to stage So after I do the git add Okay Who is done with Who is not done with git add Okay Git add first Okay, where do you get This code from? Is it built on from last week? Last week we didn't do anything About git But is this code Oh Ya Okay sorry So some of you Depending on What direct Like Where you got your code from Right? It may not be a Git repository So if you try to run these commands It will complain fatal Dot git is not Like something not initialized If that's the case Then it's okay Because It's not a git repository You can't use git to track your changes Just You know just Your file is saved normally So never mind But For those who have initialize it As a git repository You can run these commands And you can tell git to You know commit stuff in And then later on If you If you got the code by forking The repo and cloning it You can actually Push your updates To your repo that you fork On git hub So you can push it Do you know git hub Servers live on some internet You can actually push it up there And next time You're on another machine You can clone it back down again For example So if you don't If you don't have the git If your git is complaining That it's not A git repository Then never mind I'll just Just follow along But Basically the point I'm trying to make is that Every time when you code And make some changes It's a good idea to Keep track of the changes That you've made And commit them to your version Controls So git will construct This history of your changes And you can kind of Easily go back and see You know this is what I did this I did this So actually if you look at This right If you look here If I do git log This is actually a list Of my changes in the history And this is like My commit message And the commit message Kind of tells me You know what did I do In this commit Okay so everyone Who has git Has done the git app already So again If I run git status now I should say I should see changes To be committed And modify should be And the line should be Kind of green So with this I can run git commit Now dash M Is an option To tell git commit To say I want to add A commit message So again I said this This helpful description This is actually What we call commit message So you tie this message To the commit To remind yourself This is what changes I did So in this case We kind of did Quite a lot of stuff In one commit Ideally it's kind of Like you have Do finish one unit of work And then you commit The changes for that One unit of work So actually we kind of Did two things We handled Wait did we do two things Well no actually We kind of did Sort of one thing Right we Handled adding new to-dos So I would I would consider that One unit of work That we can put in one commit So I'm just going to Call this Add Functionality To add new to-dos So I mean you can This commit message up to you Like you don't have to copy This word for word verbatim But basically Something descriptive Of what you've done so far And you notice Like just some conventions I follow is I kind of write in So it's something like A present tense I don't say I added This is just a convention That it's Recon or recommended I mean the word Is not going to end If you don't follow it I see a lot of people Who have used past tense And stuff like that But basically Just have a same convention That you follow When you write these messages It's for your own You know clarity When you look back on your code So after I get commit-m My message press enter Git will tell me That it actually Added this commit If I run git status again Sorry, git status So you'll see That it's on branch master Nothing to commit Working tree clean Because I already committed Whatever changes Okay And now if I Type git log You'll see that It has one more Commit Message up there With the latest change So the most The most recent change Is the one atop And for those of you Who clone this From your own Your own forked repository You can do something like Git push Origin Master So let me break it down Git push is the Git command to push this code And you have to know It'll tell you where Am I going to push this code up to Origin is the name Of what we call The remote repository That means your GitHub repository This actually is resolved Into some URL To connect to GitHub Master is what we call A branch So In Git, there's a concept Of branches Because your history Is not always going to be linear People can branch off And create Different changes to the fork And also check that in So when you visualize Your Git history Even though what you see Is just one straight line In most projects In the real world You will see A lot of branches Going out from Your main branch But in our case We only have one branch And that branch The default branch By convention is called Master So we're telling So this Git push says Push the master branch On my local Git repository So there are two Git repositories Here There's one on your local machine There's one on GitHub This code is saying Push my local Master branch To the master branch On the GitHub repository And the GitHub repository Is referenced by this origin And if you think Like why is there this Origin here If you didn't set anything When you clone initially When you did the Git clone initially Git actually Sets this origin by default To the original repository You clone by Ya, because when you do a Git clone By convention Git sets this origin To point to that Wherever you clone it from So I can show you So I push first Oh sorry Okay I need to Add some permissions to push So I git push origin master No Sorry So now it's complaining Because it's Things that there are some stuff That I've done on my remote That I haven't merged onto my local I didn't I didn't mean to show you This complicated stuff But just Just so you know that Nothing is wrong It's just that some The state is kind of out of sync From the remote at my local So I have to sync it up first Before I push again But by right You guys should be able to do a Git push origin master And it should be able to push successfully So I'm going to do Git push origin master And hopefully it will work properly now Ya, so you see it's It is like compressing The files that needs to push And then the remote Is actually pointing to this GitHub.com.txt React, Express, Mongo This is basically the URL That's pushing the code too That's your repository on GitHub So with this I should be able to see My new commit on GitHub So if I go to My GitHub repository You can see My latest commit Is this Add functionality to And new to do So that's the latest commit I just pushed And you can see It's here also Right This is like So you have to Go to GitHub Go to your account Go to see And see what repositories You have and click On the one that you forked But this is assuming You forked a repository From GitHub If you didn't If you just download The zip file For example, you will not have this Because the spinning arrow Doesn't get run Me the access So I cannot push Okay, so you didn't fork His repository I forked actually I forked But then Because they Okay, so Okay, this will take a bit too long To explain to you But if you cannot push If you say Some permission denied issue Don't worry about it Maybe you didn't fork You didn't fork correctly Or your remote is not pointing To your own fork It's pointing to Like Sahil's original repository And you don't have permission To push to his, for example For the technical Because we also have Our own repository You create your own repository And you push to that So there won't be this issue You're not cloning You're not forking Someone else's Just create a new one Okay So that was About Git So as we move on To this workshop We'll periodically Add and commit Our fork changes So yeah This is your fork Of Sahil's repository Right So The code That you're working on now Is it I did the commit already Where is it? Can I see it? It push So it's asking for your credentials Oh So you must key in your credentials So if you get pushed Usually you need some credentials To connect to your repository Otherwise It can't be that any old person Can go and push stuff To your repository So it may ask you to key in Your username password So for those curious About this This thing about the origin And the remote repositories You can run Git remote It lists The remotes that you have In this case It's just showing the name origin I can pass this What we call a flag An option Command To tell it to be more verbose V stands for verbose Verbose means Give me more output And it's going to show that origin Actually points to this URL So that's how it knows Where to push And pull stuff from And this origin was set When you need the initial Git clone Whatever This origin was set By default by Git So you don't have to set it Yourself I need much So I'm just going to wait A while more Until most of you are done With trying out Git But if there's some very Complicated issue That you can't resolve Then we can I'll just move on first Because this is not Like the core part Of the workshop Git Add dot To include everything Oh okay Okay Push past So new Shop Push past So new Shop Add Add dot So it will How come? How come everything is a new file? You clone the repo Or generally right? How did you Do you download the zip file Or do you clone Oh you download the zip file And then you initialize The Git repository Okay then you can add You can add everything You can do this And commit everything As one commit But it's giving Ah this is just a warning I think it's because you're using windows Ya you're using windows And the line end Like iMusic Mac And some line endings are different Oh okay So some operating system differences So you can Add all of this as one commit And then you can Git commit Because you're everything in one commit So maybe you'll just say First commit Because initially there was no history Okay So commit So commit Dash M Minus M The Dash M tells me Tells Git commit That I want to specify a message Which I put here Okay So one level initial commit Usually if it's the first commit I'll call it something like First commit or initial commit Because this is a new Git repository Ya so after that Ah ya then you need to configure Git also because It needs to know It kind of ties Or isn't your email And your name So So I have to login to the Git No so actually If you just run This commands To configure Git To say that Oh this is my email And this is my name I think for now it's Ya so maybe just put your email That you want That you want to be tied to this So this will be Kind of just tied to the commit When you actually push it Oh okay Ya maybe you can help her So like I didn't understand We created a new repository And push this thing to that No if they forked The original repository Then they can push to it If not then never mind If it's not They cloned it directly Then never mind Ya Ya after this Ya So It's your email And then you can set your name Also And then Git won't complain anymore So I'll just Ya sorry I'll just set this Ya So now if I try to Git commit Then it's committed already Oh okay And now you probably Don't have a remote to point to Because you just download The zip file And then create On Git Hub Your own repository So you cannot push Oh okay So for now it's okay If you want to set it up Later Or I should not I You need to say So I should not Get extracted from the zip file I have to Ya if you wanted To have It connected to the remote You should have forked The repository And then cloned the fork Okay Ya So the part of Git Hub Is that the branches When different people Work on it You do not Commit the master You do not Branches ya And sometimes you work on different features Of the same app And you may not want it To go back to the main trunk That's one main branch But there are people Who have different workflows Working with Git also But basically it allows you To kind of branch your history Out and do You know do different things Generally but there are other tools Also Git is one of the Just most popular Git Hub or Git Ya ya she's done So ya that's all you have to do Because you don't have a remote If you want to set it up later We can walk you through it But I think It's not call for this workshop Git Hub So Git Hub The repositories You only get free Public repositories So for Git Hub specifically If you wanted a private repository There are other services Like Bitbucket That allow you to do that Okay So Let's get back To the original content Of this workshop Which is What I want to talk about Props So I really spend some time Trying to clarify The concept of state So hopefully you are more or less You have more Some understanding of what a state is Another thing about React Is something called props So like You mention It stands for properties So you can think of Props as a way Of react to Different react components To communicate So right now our app Is very simple There's only one component Right Other Source Slash components Okay You guys may Have this props demo And ignore it for now We're not doing anything with it But we basically I have only touched app Right now So our app Is actually just one component Very simple But most apps Are not so simple So most apps Are actually composed You have one top-level component Inside that top-level component There are a lot of other small components So let's say You have your to-dos You have a header You have a blog page For example So How to Just data Between the components One way of doing it Is like True something called props So this props demo Here Is actually for me to just demo What props out to you If you have this You can follow along If not Just never mind Don't just watch Me as a type So you look At this props demo The code is here So this Child component I'm defining two components One is a child component One is a parent component And you look at the render methods Okay so the child I'm a child component With this title And you notice how I'm specifying the title I'm calling it through This.props.title So last time We had this.state.to-dos That's referencing Your to-dos through state If you want to reference The props You do a this.props And then inside props Again, it's an object And like state There can be anything In this object But How that object Is populated Is based on How the props Are passed into my component Okay so I'll show you the whole thing And it will start making So it references This.props.title So you're like Where does this prop come from So if you look at this Now I have another component Called the parent component And in my render I'm returning this div And I'm actually Rendering the child component So Remember I said This is not actually HTML It looks like HTML But it's not So now we actually see Why Like a very obvious case You can't do this In normal HTML So this is actually referencing This child component here You're telling a parent Hey I want to render Inside this div Below the paragraph tag And I'm actually Pass specifying This title prop To pass into the child Right So I specify Title equals This string And that is how This value gets populated So when my child component Actually renders You're going to see I'm a child component With a title React is amazing So let me just show you How it works So you want to get this To run on your On your code itself Right now Our code Everything is rendered At.js Is our model Of all components It's a top level component So if I want to render Other stuff inside I have to update The render of this guy So I want to do something First I want to import This parent component So this line Actually is already up there This says So now I'm introducing concepts Of different Files Right In our project And We could have You know Define this child component And parent component Write written this code Directly In our app.js But imagine You have so many components The more and more you add Your file is just going to Get so long Longer and longer And it's going to be Very hard to maintain And to read As you add More Add on to it So what we generally do Is we try to Break up the components Into separate files So one component Is its own file Another component Is another file And if Another component Needs to refer to What kind of need To import The other component So This syntax You see here This import Is saying that Basically my app.js Wants to Refer to the parent Wants to use This parent component Somewhere So I'm doing I'm doing an import Curly brace Parent component From The file name Right This file name Is props.demo I don't need to put The dot.js Because Not specifically React itself But the thing Pulse our code At the end of the day Is smart enough To what we call Resolve the dependency It's smart enough To say that Oh this file name I know it actually Is a dot.js file So I don't actually Specify the extension So basically saying I want to import This component That I declared in that file And use it In my other component And how do we say That we want to So if you want To import a component From a file That file Must actually export The component to be used Otherwise no one Can import it So if you look at props.demo You see here That I put this export statement in front This actually tells You know the Thing that's compiling the code That this Piece of code is meant To be exported For other files to use And that is why In my app.js I can actually Call import Parent component From props.demo And actually this line Above import.react From react It's kind of doing It's similar I'm importing A dependency called react From the react library But this is from The library code So when you run Remember you run npm i Npm install You're installing a lot Of code that's hosted Or someone on internet Some of that code Is actually the react source code And you're importing This thing called react This react Object From that library code In the first line And the second And it's not just Other people's code That you can import So the second line Is how you actually do that So this parent component Is a code you written yourself In another file You just have to tell You know, JavaScript Hey I want to import This guy That i declare in another file And you have to make sure That you actually explicitly Export This guy Otherwise it won't work If you remove this export The import won't work So in effect This trial component You notice i have no export I cannot get a handle On this guy I cannot reference this guy From other files If i really wanted to Then i have to export it But in this case I'm not going to do that Because at the end of the day What i want to do For this demo Is just to render The parent component In my app.js So you can see it And see how the props Actually get rendered Actually work So i'm just going to So you don't need To follow along Just watch what i'm doing So i'm just going to comment Out this big render function And i'm going to Replace it With a very simple one That just Returns The parent component Meaning my app.js My app component Is now going to Just render the parent component And remember What is inside the parent component The parent component renders A div With a paragraph And the trial component And what is in the trial component The trial component Just renders a div With this text So you require A nesting component And the final Dom The final dom Will have all these nodes Inside of it So Let me look at my app Right now This is how it looks like Right now So actually This is the parent component And here it's rendering The trial component Right? And you see the props Got passed in As React is amazing Because of how I was specifying The title Over here So if i change this It's going to change So React is yes Both amazing and hard But as you learn More you'll get used to it So this is Basically how Props Kind of allow you to do this Communication between Components So imagine a parent Passing props down to the child And the child will render Different Will either render things Will probably render things Differently based on Whatever props It has So there are two ways To determine how your component renders One is the state And I think it's also props But props Are Not handled by the component itself It's probably passed Outside From outside the component So you have this You have this Arrow going down to this component This is props passing Right This props comes from outside The state is handled By the component itself The props come from elsewhere Okay So Any issues following This so far If not I'll just dive into Some examples to make it More concrete Not in this same way Not in this way There are Kind of round about ways To Let the child do it But it's not so simple And usually it's not advisable To do that We want to enforce Something they call One way data flow So you imagine If you have this three of components It's always the parent passing data Down to the child There's no kind of Circular reference That kind of thing is Will complicate Kind of complicates Your Your applicant structure So this is again A bit abstract at this point But for a simple app We definitely don't need That kind of thing Okay Next thing I'm going to do Is to Break our to-do app Into multiple components So that you can see How this State props And components All fit together So remember If you guys Have read through technical tasks You know that The final task is To do something like this Where you have One page With the to-dos And you have this header With some links And you have another page With your about You know Something about yourself So There are at least You know Three components going on here First you have This header component And then You have And on one page You'll see a to-dos component Under the header On the other page After you click The link You should go to Oh sorry Okay After you click The link You should go to Another page With let's say An about component Okay So That's The kind of Ideal final product But let's do something Intermediate first Let's just break out Let's just break out Our app.js Into these three components First And they're all rendered On the same page So we have a simple header We have a simple about component And we have We have the existing to-dos component That we already created So the first thing I want to do is Actually extract that code Into separate files Because remember One component per file Okay So right now My app.js is equivalent To my to-dos component I want to Move that out to another file And call it to-dos.js Okay So let's do that Now let's Please follow along So You can go to If you click Your app.js You can Command N Or you can manually Do new file To create a new file Save it In the same Folder Which is source components Name it to-dos.js And basically I want to copy We have a funny term That we use We call it copypasta I want to copypasta All the code To this new file Because The App.js Is going to be Our new to-dos component And now Our app.js Is going to render All the Three components Instead of rendering The to-dos directly Okay Your render method Should be this long guy I commented briefly just now So Just keep whatever code you have And copy over to this To-dos.js So now your app.js It can be greatly simplified I can get rid of All this stuff already Actually Clear everything Except the render method So at the end of the day It's a very skinny Skinny file Just like that Okay I'm going to delete This parent component Because I also Didn't follow along with that So So let me render My render method Is just empty Okay Now the next thing I need to do Is what I want to do With app.js Is to render The to-dos component So to do that I need to be able To import the to-dos component To render And to be able To import the component First I must export The to-dos From this file So you notice here That I copied everything Directly Now I need to change Some stuff I need to to-dos And I don't need This export default Here Anymore Then we go back To the top In front of class Let me put an export So this allows me To import this class From another file So go back to App.js Okay So after you Put the export In front of to-dos And you rename it Already Go back to App.js And add this line Import Calibres To-dos From From Dot slash To-dos So if you are wondering What this dot Means dot refers To your current directory So dot slash to-dos Is the to-dos Dot.js In your current directory Okay just clear everything Out of your app And leave an empty render So now Your old app code App.js code Should be your to-dos.js And just rename the class To-dos Instead of app So now You should have In to-dos Don't change anything Just keep this guy Keep this original render And just change the class name To to-dos So originally this was app Change it to to-dos And put the export in front So at the end of the day You should have App.js To-dos.js Now to-dos.js Will have the code you originally Had in your app.js We just copy over We just rename Some stuff And we export the class Now your app.js Is just gonna have Empty render method Okay let me open A split screen So you can see Side by side So your app.js Is very slim now It's just a few lines of code Like that If the import And then Your to-dos.js Will have All your previous code From app.js You just move it over So far so good Yes remove Remove That there used to be This line here Remove it You remove the line At the bottom And you Add export Before the class And you rename this Class name And app.js Add this line To import the to-dos From your to-dos.js Okay And we're not making use of it yet Wait until everyone's On the same page And I'll show you how to Use it So anyone who's Ya okay this is not This is gonna break This is not gonna work right now I'm just waiting For Everyone to be on the same page Before I Move on No Remove it So again the change To-dos.js is I change the class name I add export in front I remove that line To the export default Ya the default export Line below Okay everyone on the same page Any issues Ya It's not gonna It's not gonna run Do you do The import You delete Delete Everything Okay so Copy it Already copy Already copy Okay so Now just remove All of this Remove all of this And you can remove All this stuff Remove until the render And you can actually Remove everything inside the render Just remove all of this Remove the export default No Don't remove the export default If you remove it So don't remove the export default App On your app.js Remove What Remove it On the to-dos.js Leave this one here Because this is Gonna be your top level component If you don't export it React doesn't know how to render Won't be able to reference it to render Okay I'm just gonna move on So that we can get to a state Where the application will actually run So that you can see Whether you've done it correctly Inside your render now Just return To-dos On app.js Just return The to-dos component you imported So now I have an app.js component I render the to-dos inside Okay so if you do this Hopefully you should see Something like this It looks exactly the same Because what I've done Is that I've just moved the code out From app.js Put it in another component Imported at component at app.js And rendered it And that component has the same content To-dos, right? We thought the curly bracket It was still one-to-one Does it work? I get similar things still can't work Maybe like not different Didn't you say this one Like following some Okay so So okay There's a bit complicated to explain But there's a different way Of exporting your class So there's a way to do it There's a default export And that's what we call named exports So when I put the export In front of the class I'm naming the export That's why when you import it You have to put the curly brace And say this is the name But when you do a default export Basically everything in the file The exports has something That's one thing And you can name anything When you import it So that's why you can do it In some cases But for now I'm sticking To the one style So people don't get confused Is your server running? Do you run MPM start Or do you close it by accident? Ya you have to run Ya so if You're not in the correct direction So you're in your home folder Right now You need to go into this folder Somehow you probably Went out of it By accident So where is this folder located This is in downloads Ya didn't just CD back into it Ya you can tap to autocomplete So if you type a bit of it And you tap autocomplete What's that? So it's Is it react Or what do you name it Maybe you can just see What is the It's probably a way to What's this Is it in javascript I think so I think it's in javascript Okay so Should we go into javascript I guess not There's no javascript Was this from Did you clone the report from today No it was already existing on my home So Do you know where is it located What? Deaf intro master Ya Ya you can just Copy the Copy the path to this guy To javascript No this guy This is your project This is your Project This is this folder And I'll just go there So it's in web dev intro Master in javascript In react To do this So now you have all your stuff This is the same stuff Because javascript is not You cannot find the package.json Because you're not in the correct Direct tree So now we should go stuff Oh there's some other So probably your server is really running Actually your server is really running So we don't As in your server There's a server running somewhere But it's just that you can't see it Right now Okay never mind Let me shut it down And you can start up a new one Because you can't So there's this thing called a port This 3000 You can't Start server with the same Port number Versa some conflict So I'm just Killing that That server that's running That's already running Because I think you probably close the window But it's still running in the background So it's kind of confusing So I'm just going to kill it Like stop the process So now this is no longer running Then I'm just going to run A new Start a new process to run Okay Ya, just this one Okay so hopefully You get the same Exact same thing When you run the app Because we didn't really Change any Like how Any rendering or anything We just move the code From file to file So I'm going to move on So after We Extract Our to-dos into one file The next thing I want to do Is Add a header component Right Remember, let me go back To this diagram I want to I want to finally Render something like this To my screen So I'm going to add a header And a about component So Go back to Your Go back to VS Code And you look at under components Again Do a common Or I don't know in Windows What's the shortcut But basically Create a new file In that Directory So let me save it as So save it under Components again Let me save it as Header.js So this is our header And now We want to create a header component So the way We Declare components It's the same pattern First you have to Always import React From the React library Ya Save under source components Call it header.js So import React From React You always need this Because When you're writing The thing that looks like HTML It's not a HTML It's JSX You need to do have this Import there for React to recognize That otherwise You will start throwing some errors Next We declare the class Don't worry If you don't really understand What the class is at this point It's It's too much to go into And it's something That you'll solely Pick up and learn along the way You can think of it As a big object with stuff So I want to declare this class I'm going to call it header Same thing It's going to extend React.component So this tells This class This is like Hey, I'm going to create a class With certain properties Of this React.component So this React.component Is code that Part of the React library So that our object already Has a lot of stuff Inside Even though we haven't written Any of our own code And the same thing Every component needs a render method Otherwise it cannot render So I'm going to write A very simple render method And it's just going to return Some simple You know A simple header Sorry So let me put A header tag With some tags in it Maybe I'll put A H1 That says My amazing to-do app So this is how My header.js Looks right now Okay And remember if you want To use this elsewhere We have to export this class So the same as just now Put an export in the front Okay So the recap We have now And to-dos.js We have this three files You can ignore the props demo So we have just this three files And now we want To render the header In our app as well In our app.js as well So everyone done with the header So next step is To import this header In my app.js And render it So exactly the same Way where we import the to-dos Now we import Header From The header file Right And now instead Of returning the to-dos In my render I'm going to return I'm going to return A div Okay I'm going to return This div And inside the div I want to render The header And the to-dos Component So basically now My app is rendering This div With two other components inside Okay So if you've Managed to successfully do it You should see This This is your header The reason it's In the box It's because of the The stalling that was already applied But that's basically Your header component right here Okay So I'll move on When most people have Managed to get this working It's not Component So like Can I Yup So you have syntax errors Syntax Okay So all these braces Make sure they always match up So you have one brace here For this render But In the class Also needs a braces Some braces So if you compare To this guy You see there are these braces Here After the rear component And it's actually closed Off right at the bottom Here Likewise You need your braces Here Because This defines All this code Is part of that class Okay Otherwise it doesn't know Where your class begins And ends So by Putting everything inside These braces It can't tell Strabascript Okay Ya This brace close off this brace And let me intent Just to be clearer So this brace Close off this brace This brace close off this brace So this one is One function This is Like You know the render function Ya And this brace Is the class Okay So there are Kind of different So Then here it's fine Right From what I So this should be No You need to Okay Now Let me just show the code But now you need to render The header as well Because right now If you look at it You're only rendering it to do So you don't see the header Even if you import it If you import it And don't render it You also won't see it Ya So your app.js Should look like this And the final product Should look like this Ya You have to put the div Because you can only Return one node One From Your render method You cannot return Two elements At the same level No When you return It means you're done With the function already The second return Will never be executed And furthermore You also cannot do You cannot do Something like this You cannot do this You cannot Just render Return header And then to do You must put them in a div The div here Is compulsory to Make sure that Render is only returning one node Because at the end of the day React is going to insert That single node into the DOM It doesn't know how to deal with Two nodes Side by side Ya You need to have a slash Ya So the backslash is To close the tag Ya So probably you need to run The server again Probably the server died Somehow So you go to your terminal And do npm Start Are you in the correct directory? So another way Is to just do it directly In this terminal This is simpler Because you will definitely Be in the correct directory Here Usually Usually you will be Are you? Ya you are So this is This directory Is this directory Just npm Ya So it's nothing Okay so hopefully You have something like this Right now The next thing I'm going to do Is to Create An about component Okay So If I go back to my slides You see what I wanted Was I wanted the header I wanted an about And I wanted a to-dos So I'm going to create This about And render it as well So the same thing Go back to your VS Code Now you have Add header to-dos Now add a new file again New component New file And now It's the same pattern Save Save this file Components About.js And how do we Declare React component Again Same pattern Import React From React And then Declare the class And export that class So if you're Very lazy You can also Copy-pasta this Into your file Just beware That when you Copy-pasta You change the Correct things So I need to change this To about And I'm going to render So I'm going to Render Some Bunch of Text Inside a div So I'm going to First I'm going to put a header That says about me And then I'm going to Render some bunch of text You can put Anything that you want here I'm just going to put the standard This thing they call Is just a text generator So if you want to put Some nonsense Text And you have nothing to And you just want Something quick You can just go And find some norm To Put into your paragraph So I'm just going To take this And paste it in So that we have Some lengthy amount Of text to see But you can put Whatever you want In your paragraph You can really Describe yourself And whatever Uh Like this It should have a div Of a header About me And your paragraph You can put Anything to describe yourself Or Put a loram Just basically put Some text in there So that we can see On the screen So when you're done With a bot.js Same thing again Go back to App.js Import it in the same manner Import About From About And now render it Below your header Above your todoos If you want to render Below your todoos Also fine You'll just be Render below the todoos And finally At the end of the day Your app should look Kind of like this Which is not Okay, this is not the best Maybe I put too much text Let me remove that Okay, sorry Because of the The styling Existing styling This is not really showing up well So I'm just going to Put some short text So now you should see Your header You should see this About me And whatever Is something about you And your todoos below And your todoos Should still function as normal The CSS is doing Something super weird To the header So if your header Is getting chopped off It's okay When you have time You can go back And try to Fade on the CSS To get it to work But if I do it here I'll probably Overrun this workshop By 3 hours So basically Just Hopefully you see Something like this For me And your todoos Everyone okay so far? Okay So that was about splitting Our App up Now if I wanted to Make use of some props To change How I render certain things Let's say for example In my About component I may want to make this Value Taken From the props Instead of hard coding About me inside So I can Put this curly brace This.props.title If you do this right now And you reload Sorry You notice my title is gone Why? Because this.props.title Is not defined yet To define it I must make sure My parent component Passes it in My parent component is App.js So if I want to Pass title in I have to specify Title attribute And I'll put in whatever I want about me Title to be So now if I do this And I Look at the page The title has changed Right so the title Has now gotten through My parent As a prop Rather than hard coding Diarily in my Js Clear So again Just to recap to do Put this.props.title In your H1 And in your App.js You have to specify This title here Otherwise it will not be defined When you render your to-dos Sorry when you render Your about page Sorry To-dos has not changed Since Since I started breaking it out So to-dos is just Same old code from last time So far so good Everyone managed to get Something like this Changed this to whatever Title that you want If you want me to stop Sound it out now If not, I'm gonna move on Okay, I'm just gonna Talk about some A bit high level stuff So if you're still Trying to get a code to work You can already pay attention It's okay For those who are un-done Just can listen to me Talk nonsense or what So I'm gonna talk about State props and rendering So like I mentioned You can think of state and props As ways to tell React What I should render On my screen And whenever Your state and props change React basically will Kind of Will know that it has to Rerender And there are different ways Your state and props can change So some scenarios So the scenario That the to-do list for example So your component Okay, so When React first initialises Your component It can't It then mounts it in the DOM That means it inserts That component Into the document Into the DOM And this is the initial render And now your component Is in the DOM It's a node in the DOM And now your user Can interact with it Because it's in the DOM So let's say You have some user action That's a button press This will trigger A state change For example In our to-do component We press a button We add a new tool To the list The component state is updated This will cause a re-render So now your component In the DOM Will have the extra to-do Okay, this is one scenario Another scenario Which is also very common This diagram Is essentially the same But instead of a user action We fetch some data From an API By API I mean Think of it as Some other web server That's serving some data You fetch some data From something Or from the internet And you want to render That in your component So very common Idiom is to A very common thing to do Is to actually Fetch something From somewhere On the internet And then Update the state With that new data And then you will re-render Another case Is Like you've seen just now If I have a parent component And let's say And my parent component Is passing props to my child Right If the parent component Somehow itself There's some change In its state So the parent component State change And let's say the props That passes to the child Depends on its state So that means the props That passes to the child Is also changes If let's say These props Are changed That component Will also re-render Okay And Another case is Your parent component Changes some kind of state So now you have Two components How component of your parent Bboth of them have state Right State is Specific to a single component So your parent component Is some state Or child is some state Let's say your parent component state Also change This will also trigger a re-render Of everything inside the parent component And everything inside the parent component Includes a child So everything will be re-render So that's why This arrow is like The whole I'm trying to say That both the component Re-renders And the parent component renders So that's just kind of Like a high level thing You know how state and props Affect your rendering Okay Dan I'm going to go into something A bit Sounds a bit scarier I guess Something called a component life cycle So I mean I'm sure you guys understand What you mean by life cycle Right That different phases Your component goes through So if you look at it If you look at the React docs They actually tell you That your component Actually goes through These different stages First it will mount That means It will be initialized It will be rendered in your DOM And then after that It will be updated And finally Let's say you navigate away From the page That component no longer Should be showed It will be un-mounted So that node is removed From the DOM And in React We have these things called Life cycle methods That are called At every stage in the life cycle So these are hook You can think of it Like how do I say It's like a hook Into the life cycle So let's say I want to do something When I mount I can implement I can do something in this method I can define this method In my class And do something in it So that when my component mounts This code will be executed So it's hooking Into the life cycle To do something So you see That on mount There are some different functions That will be called The constructor is one Render is another Because it will render There's an initial render And then this special method Called component did mount So if you want to do something special Just after your component Has mounted You can actually Define this method in your class For example For example I gave is fetching data From a server If you want to fetch Some data in a server To show on your component This is Typically where you would do it In component did mount In updating We also have Some other hooks Should component update Component did update We will not be touching this For this workshop And on unmounting Also There's another hook That you can hook into So we will only touch Component did mount For this workshop But there are use cases For all these other hooks As well And more complicated apps So now comes We are going to get Some random cat images To show on our component Why cats? I direct you To this Wikipedia page On cats and the internet Everyone loves cats, right? So The end product Should look something like this We're going to have a Random cat gif On our about component So this Requires us To get the cat gif From somewhere Thank God the internet Is everything So we even have cats As a service You've heard of software As a service, right? Something like Netflix You buy You subscribe To this software And it's a service for you People have built cats As a service So is this API you can call To actually get Random cat pictures This page is not loading Properly So basically This Someone is running This server somewhere on the internet And they are serving Random cat images And you can call Certain URLs Random gif Random cat images And so forth But this is a bit slow Right now Cat as a service Oh no, I hope it's Not down today Ah, okay It's loaded Oh my God So This is what we call A.P.I An application when interface It's a way It's like A.P.I is a way To talk to some other Program or machine So this server Exposed this Language To us To communicate with this server So this server says That you know If you Hit this URL I will return you A random cat But it's a bit slow today So May take a while to load So I get my random cat Can also get Random cat gif Laser eye cat So we are going to Use this Cat as a service To put some cat gif Into our About component So Let's Go back to Visual Studio Code Go to About component Right now it just has The random method, right? So I mentioned just now You have this life cycle Method called component did mount So we're going to Define this method right here Component And you see VS Code Kind of smart It really kind of knows That there are so many Life cycle methods And it's suggesting to me A few of them So I'm going to Interment component did mount The same way The function name Brackets And what I want to do When my component mounts Is Make a What we call API call To the server So I want to talk to the API Basically It's like imagine your browser It's a It's also When it loads a page It's kind of also making an API call To whatever server Serving the webpage So It's what we call a client Right There's a server as a client We are also We are also going to Write code The X as a client That fetches These files From whatever web server Serving the cat images And in On In javascript There's this thing called the This is built in API client On the web On typical browsers On every On most browsers Called fetch The fetch API Sorry So if you Google fetch API You will see Some documentation on it Right This is a standard thing across Intermented across most browsers And usually I want to figure how to do stuff You always look at the docs So the docs actually shows you How to Use this You know, API So if you go using fetch You can just see some code Fetch Stuff from this URL And when I get my response Do something Right This is basically what we're going to do I'm going to do something Slightly different from this But the end result Is going to be the same The code will look slightly different But end result Is going to be the same So The first thing I need to do Is run fetch Right And I need to specify the URL The URL In this case Is going to be my Cats as a service URL Sorry So This random cat Okay I want the random cat gif So I'm going to get this URL Copy this This URL from here And paste it inside The double codes And I'm going to Actually Okay So what fetch returns What you get out of Doing this Call to fetch So fetch is self a function And you're calling this function With the URL This function is going to return To you the response It gets from the server So I'm going to assign it To this Variable called response There's something tricky here Because When I make calls To my Server It's something called It's a It's this fancy term Called asynchronous So it's a Asynchronous request Meaning like If I make this call My code continues to run And that request Is resolved sometime later Kind of like in the background Sort of thing It's not like My whole app freezes And waits for the call to resolve Because your server Could take very long To send back the resource So instead of Waiting for this call To finish Before running All the other code Like the rendering code The browser actually kind of Schedules this call Asynchronously So it kind of Fires that call off Kind of in the background You can think of it And when the call The response is resolved Is returned Then you can do stuff with it So a way that we can Kind of wait on A asynchronous call Is to use something called A wait So this is telling my code That I'm going to do this fetch I know it's an asynchronous call And whatever code I'm going to put below here Has to wait I want this code to wait On the fetch call Because whatever code I'm going to put into here I want to do something the response Because if the response Is not returned yet You're not going to be able to What you want to do Which is show it In your component Okay So To actually use a wait You have to put this Funny thing called async So async stands for asynchronous You have to make sure You put async In front of your method name Otherwise the code will not compile So now we await The response of fetch And Now that we have the response What do we do? In order to render it In the render method I have to have a reference to it So what I'm going to do Is I'm going to set Something in the state That Points to that That picture That I got So I'm going to declare That my state now has This image source Which right now Is an empty string And actually below My h1 If Okay Above the return If my image source Is not an empty string Is already there That means I already Fetched out from the server Okay, let me do The other way round If my image source Is not there So if not Image source If my image source Is not there yet I Just want to return Some text that says I'm still loading Otherwise If this if statement Is not executed It's just going to fall through Down to the next return So if it's not Already there It's going to show This text thing loading But if it's there It's going to actually Return This div if the header And the paragraph And then inside This one I'm going to put An image tag And the source points To this dot state Dot image source Okay So basically I have Now I have this state With an image source I have this component That makes the fetch request I'm not doing anything To response yet I'll do it very soon But in the render So in the render If my image source Is not already fetched I'm just going to show loading It's waiting for The server to respond Otherwise I can render my image With that source So remember If you remember The source attribute Is basically attribute Then you specify Which image to Which image you want The image tag to show Everyone okay with this? Okay so if you reload I mean if you reload App right now It's going to be the same Because we didn't Change anything Oh okay sorry Now it just shows loading Because we are not Actually setting The image source On our state yet So we are going to do that In the component did mount So In component did mount We get back this response Now this This response object How do you find out What kind of object it is Again you have to look At the documentation If you want to dive into it But basically What you need to do To extract The actual image source Right As a string Okay It's a bit complicated So some magic going on here But this This cat as a service They happen to send you back This whole file as binary As binary data Like the whole file object What we call a block It's some binary It's like some bits It's sending bits over the wire To your browser And to Get a handle on That That block And convert it to the string For the image source You have to do a bit of You know magic So There's this API I mean like So JavaScript has these methods exposed That allow you to do this conversion So first let's get the image block So the response itself Is not the block It's not yet the block The response is A kind of a wrapper Around The actual payload That the server is sending And the response has some other properties Like that allow you Check the status of the response For example Because the response May not always be successful But let's just For the purpose of this workshop We assume that the response is going to You know Return us this block successfully And to get the block of the response We call this block function And this block function Like I said It's binary data It's bits We cannot put that in our source attribute As a string That doesn't make sense So To get the actual image source As a string from the block There's another method Exposed by JavaScript Called window.url Create object URL From the image block Okay So this image source Is now going to be a string Created from the Block of binary data That points to the That cat image That was written to us So now that we have the image source What do we need to do? Volunteers If you just do this When anything happens State change How do I change the state? Set state, right? So the final line again Is this.set state Okay, let me Sorry for my inconsistent naming Let me just all change it To image As a full word So I like to keep stuff consistent So now I want to set image source To this image source So by right after My component mounts It makes the API call API call kind of happens In the background Once the server returns a response My component is notified It extracts the image source On the response Changes its state And after seeing the loading For a while Now after it re-renders You should see the cat gif Okay, so let me See if this works It's a gif And if I reload the page I get a A new cat gif probably It's kind of slow today though Anyone, everyone Able to see the gif Do you have a question? No You cannot see the gif Can you see the code below? Ya So it's It's not showing loading But you don't see the gif I can show loading Ya I had some foul problems Or is it because of the foul? Foul? One of my foul problems Apparently just now I accidentally deleted the fouls But it should be very pleased now I'm just tracking It's making a request to the Oh, you're not even rendering it So you imported it But you didn't render it So it's the whole About component It's not even showing So you put it in Then you should Do you have a question? Oh, it's okay Okay Thank you What is the How do you get Okay, so first Firstly, you need to Actually import your Input Like, some syntax errors In your code And it is not It's that It's you It's one of these Ya, so you just delete These comments Because they are causing Some issues Awas, saya bermain dari Kepital H ke Kepital H. Bagi saya, saya berdua akan bermain dari Kepital H ke Kepital H. Jadi saya bermain dari Kepital H ke Kepital H. Jadi saya berubah ke Kepital S ke Kepital H. Dari Kepital H, saya berubah ke Kepital S. Okey, minta minta maaf. Kita perlu jadi takut untuk melakukannya. Sebalik-balik itu terjadi. Kerana tidak ada yang mengambil kongsi kondisi. dan kita perlu mempunyai hati, jadi sama seperti yang kita mempunyai Tudu, kita perlu mempunyai hati jadi saya akan mempunyai ini dan mengubah hati ini dan kemudian kita juga perlu mempunyai tentang saya jadi ia akan mempunyai hati daripada orang ini dan kemudian saya akan rendahkan hati di sini dan kemudian ada sesetengah error jadi apabila anda melihat semua ini, maka anda perlu mengubah hati di sini kerana jika ia tidak mengubah hati ini, ia akan mengubah hati ini jadi ia akan mengubah hati ini dan saya perlu mengubah hati ini untuk mengubah hati ini kerana jika anda mempunyai hati ini, ia tidak mempunyai hati ini ia tidak mempunyai hati dan ia akan mengubah hati ini jadi hewan ini mempunyai hati ini dan ini harus mempunyai hati ini ini harus mempunyai hati ini kamu boleh membuat ini? sehingga ada bloody yang menggemas hati ini dan ini harus mempunyai hati itu jadi ada sesetengah error yang menyebabkan hati ini quindi sekarang, kalau tidak, ia mempunyai hati ini jadi kamu harus memperdiri Seperti itu, dia tak faham sepanjang bahagian ini. Jadi ini patutnya... Sekarang-kadang, tak ada masalah tentang masalahnya. Jadi kita lihat bahawa ada beberapa perkara yang teruk. Mungkin kamu dah lupa perangai di sini dan di sana. Ia sedikit susah untuk diperkenalkan kadang-kadang. Kenapa masih ada beberapa perkara yang teruk? Ia ada di perangai kamu. Ia ada di perangai kamu? Ia ada di perangai kamu. Ia ada di perangai kamu. Ia ada di perangai kamu. Saya rasa perangai kamu tak bergerak. Jadi kita akan memilih terminal. Dan kamu boleh memulai PMS. Ia perlu memiliki perangai kamu. Ya, ini sebenarnya perangai kamu. Saya akan memilih perangai kamu. Saya akan memilih perangai kamu. Ya, jadi ia masih membutuhkan. Jadi sekarang ini adalah perangai yang teruk. Jadi kamu ada beberapa perkara yang teruk. Oh, kamu ada perkara yang teruk? Kamu ada beberapa perkara yang teruk. Okey, mari kita menerima ini juga. Kerana ia mempunyai apa yang kamu nama. Jika tidak, di perangai kamu akan bercakap tentang... ...tapi jika kamu nampak perangai, ia tidak ada di sana. Jadi sekarang ia membuat sesuatu di perangai kamu. Jadi perangai kamu tidak bergerak lagi. Jadi dalam kes ini... ...kalau kamu ingin membuat perangai-perangai yang teruk... ...sebelum mempunyai perkara yang teruk... ...kamu membuat perangai-perangai yang teruk. Dan kamu boleh memulai apa-apa yang kamu mahu di sini.みたいnya Dalam pertanyaan... 40 connect usia. Jika kamu mahu perangai-perangai yang teruk untuk dibetINT, kamu boleh Diskasih tulis ini. Jadi adaeling. Janganhehe, tidak salah tidak salah... Jadi Saya mahu kemudian kita tunjukkan kelasnya. Kita mahu memaksa supaya ia lebih mudah untuk menjelaskan. Jadi sekarang ia menjelaskan... Tidak memperkenalkan untuk mengambilkan. Oh, ini adalah ... Ah, maaf. Ya, jadi bagi orang ini, orang ini mungkin hanya... Okay, ada penyakit... Bukan... Penyakit tak akan jadi penyakit ini juga. Sangat penyakit. Jadi ini penyakit. Kemudian nama ini sebenarnya adalah untuk... Untuk... Yang ini... Yang ini. Jadi kamu perlu berhenti. Kamu perlu pastikan penyakit bergantung lagi. Jadi itu sebabnya sekarang kamu... Penyakit... Mereka akan berjumpa selepas penyakit dibuat. Jadi ada beberapa penyakit dibuat. Tapi untuk menggantung penyakit, kamu sebenarnya perlukan sebuah penyakit. Jadi penyakit yang dibuat... Mereka sebenarnya dapat dibuat daripada penyakit. Okay, jadi selepas penyakit ini, semoga penyakit itu akan menggantung. Semua orang, kamu cuba... Kamu cuba menggantung... Macam mana yang terlalu terlalu terlalu terlalu terlalu terlalu terlalu terlalu terlalu terlalu terlalu... Tergantung lagi-dまた... So ia치는 apa yang saya mesti belajar. Ketika kamu membuat perkenalkan, Me Tek penyakit apabila saya mem Thanos, Kamu ingin t sogenan anspr ideally. Walaupun Oh, ini salah sebabnya. Jadi, ia sesuatu yang hanya mempunyai sebagai kode. Jadi, lebih banyak kode, anda akan mendapatkan. Maaf, boleh saya pergi? Okey, untuk simsisi, saya akan melakukan ini dengan penjara. Sejak saya minta, saya minta jalan-jalan dengan penjara. Jadi, mari saya... Jika anda mahu melakukannya, anda boleh melakukannya dan melakukannya di penjara. Atau jika anda mahu melakukannya, hanya cuba melakukannya di arah sekarang. Jadi, kita sudah tidak banyak masa. Jadi, saya akan beri anda sedikit perjalanan yang lebih tinggi. Saya tidak rasa kita boleh melakukannya lagi. Kode-kode. Jadi, berharap untuk orang-orang yang telah mempercayai untuk membuat serva. Anda dapat melihat serva ini dengan banyak kerja di dalam. Dan yang penting yang saya mahu melihat dulu adalah App.js. Jadi, App.js mempunyai banyak kerja di atas jalan-jalan ini. Di atas jalan-jalan ini, mempunyai berat. Mereka mempunyai cara lain untuk membuat kerja di javascript. Seperti yang saya katakan, javascript adalah sedikit... kerana ada banyak versi yang berbeza. Kemudian ada beberapa cara yang berbeza dan cara untuk melakukan sesuatu. Di reaksi, anda melihat bahawa anda dapat menggunakan import. Di node.js, anda tidak dapat menggunakan secara langsung. Anda harus menggunakan sesuatu. Jika anda mahu menggunakan senteksi yang sama, anda harus menggunakan sesuatu yang kita nampak transparler... untuk mengubah senteksi baru... ke senteksi seperti engine yang anda dapat faham. Di reaksi, kita sebenarnya mempunyai transparler... yang menggunakan konversi dari senteksi import... ke senteksi yang sebenarnya normal. Di node.js, kita tidak mempunyai. Sebab itu, kita harus menggunakan senteksi untuk menggunakan senteksi. Tetapi, jangan risau, hanya menggunakan senteksi yang sama. Ia hanya sebuah cara untuk anda memperkenalkan... kemungkinan kemungkinan atau kemungkinan dari senteksi lain. Jadi, import yang memperkenalkan, anda tidak boleh melakukan perkara yang sama. Anda hanya menghormati sesuatu yang anda perlukan dari senteksi lain. Dia minta sesuatu. Kita masih di node.js, tidak terlalu banyak... yang menggunakan senteksi. Dia memperkenalkan senteksi yang saya tidak mempunyai. Jangan risau. J.S. Buka code VSCode. Periksa server anda. Periksa server. Ya, itu sebuah file app.js. Saya hanya akan memperkenalkan bagaimana jauhnya ini. Okey, jadi ini file yang sebenarnya... meminiti aplikasi saya. Jadi, pertama saya memperkenalkan aplikasi ini... dan kemudian saya sebenarnya meminiti aplikasi ini... disebabkan aplikasi ini. Jadi, ini membuat aplikasi aplikasi yang memperkenalkan. Dan anda lihat sekarang... seluruh setelah aplikasi, aplikasi, aplikasi, aplikasi, aplikasi. Dan saya beritahu anda bahawa... aplikasi ini adalah apa yang kita nampak... framework middleware. Jadi, sebenarnya aplikasi... memperkenalkan setelah aplikasi... bahawa apabila aplikasi anda memperkenalkan server anda... ia berlaku... dengan semua aplikasi yang diperkenalkan. Jadi, klien anda seperti aplikasi anda... anda membuat aplikasi untuk aplikasi anda. Ini adalah aplikasi HGDP yang diperkenalkan. Data yang diperkenalkan adalah... yang menggunakan aplikasi HGDP. Jadi, aplikasi ini beri kepada aplikasi anda. Plikasi anda menggunakan aplikasi yang memperkenalkan... semua aplikasi middleware. Jadi, ini seperti aplikasi fungsi. Anda dapat menerima aplikasi... aplikasi aplikasi yang anda memperkenalkan... dan mereka membuat aplikasi melalui aplikasi... atau transformasi atau apa-apa saja. Dan pada akhirnya, ia berlaku sebagai respon... yang akan diperkenalkan kepada klien anda. Jadi, klien anda akan menyebabkan listan Tudus. Plikasi Tudus akan menyebabkan aplikasi middleware... dan aplikasi akan menerima respon pada akhirnya. Jadi, sebenarnya semua aplikasi yang anda memperkenalkan... aplikasi yang anda memperkenalkan... ini menghargai apa yang middleware yang anda memperkenalkan. Apa yang middleware yang saya menggunakan untuk menggunakan aplikasi. Jadi, ada satu middleware yang ditangkap sebagai logger. Satu middleware yang menolak anda memperkenalkan jason. Jadi jason adalah format yang tersebut... yang sangat selalu digunakan untuk menggunakan data. Ini adalah jaman yang lain untuk mencari URL dan koding. Jadi, anda tidak perlu tahu terlalu banyak tentang ini. Tapi, di jalan tinggi, ini adalah setiap fungsi... untuk menggunakan jalan yang anda memperkenalkan dan meletakkan untuknya. Jika anda dengar kerana jaman-jaman jaman, jaman-jaman jaman jaman untuk menggunakan jaman jaman. Jadi, jaman jaman jaman jaman anda di jaman ini... adalah untuk anda... Saya tidak tahu jika anda fokus pada apa yang anda lakukan, tapi ia sesuatu yang berlebihan untuk... membuat jaman jaman jaman jaman di jaman jaman anda. Dan kemudian, yang paling menarik adalah jaman jaman ini. Jaman jaman jaman jaman... dekat jaman jaman jaman. Jadi, ingat saya bincangkan tentang routing itu tidak, kan? Di reaksi reaksi, anda dapat routing, seperti saya katakan, anda pergi ke URL ini, anda dapat rindukan komponen yang berbeza. Itu routing pada klien di depan. Di belakang, anda juga ada konsep routs. Ingat, jika anda menghidupi server anda dengan routs yang berbeza, ingat, anda melihat saya menunjukkan RESTful, RESTful API. Jadi, perkara ini plus URL adalah 1 rout. Jadi, jika saya menghidupi server ini, server berbuat sesuatu. Jadi, itu routing. Dan rindukan app.use adalah seperti untuk menghidupi apa yang perlu dilakukan jika saya menghidupi router itu. Jadi, ini berkata, saya berkata, jika klien menghidupi router ini dengan belakang, saya akan menghidupi reaksi router ini. Saya akan menghidupi reaksi router ini dengan reaksi router ini. Dan router ini juga ada di tengah-tengah. Anda menambahnya dengan cara yang sama, rindukan app.use. Dan mari kita lihat apa router ini. Ini adalah di mana rindukan router yang saya menghidupi. Ini hanya fungsi. Jadi, ini adalah jisah router itu sebenarnya. Jadi, router ini dibuat dengan sesuatu yang berlaku pada Express. Dan kemudian, kita menghidupi router.get. Untuk mengatakan bahawa, ingat, h3-method, kita menghidupi post-delete. Bagaimana pembantu dengan menggunakan method get? Dan jika kita menghidupi URL dengan slash, ia akan menghidupi pembantu ini. Jadi, ini adalah pembantu ini. Dan apa yang pembantu ini? Pembantu ini menggantikan tiga perkara. Ia menggantikan objek reaksi, objek respons. Dan kita tidak kisahkan tentang ini sekarang. Ini tidak berlaku dengan apa-apa pun. Jadi ini adalah actually a way untuk anda berkata untuk berlaku ke pembantu yang tersebut. Kerana saya kata kita mempunyai pembantu yang tersebut. Setiap pembantu yang telah dibuat, ia akan menghidupi pembantu yang tersebut. Jadi, setiap pembantu akan mempunyai objek reaksi yang tersebut, dan objek respons yang tersebut. Kita menghidupi pembantu yang tersebut sebagai objek javascript. Saya tidak mempunyai pembantu ini. Atau pembantu index.js. Ya. Di dalam, server slash routes index.js. Mungkin ada beberapa pembantu index.js di sekitar ini. Jadi... Ya. Jangan beritahu yang betul. Tidak, pembantu yang tersebut adalah perlukan dan menghidupi pembantu. Sebenarnya, saya menghidupi pembantu yang tersebut menjadi pembantu yang tersebut, ia menyalin pembantu ini. Dan pembantu ini mengembangkan pembantu. Jadi, apabila pembantu mengembangkan, tidak ada pembantu yang mengembangkan. Pembantu ini mengembangkan pembantu. Jadi, anda boleh mengingatkan yang ini, adalah pembantu terakhir di sini. di mana yang menerima jawapan. Okey. Jadi, dalam kes ini, sebenarnya rendahkan page HTML. Jadi, bagi anda yang menerima server-up dan menerima. Jadi, sebenarnya rendahkan ini. Ada perkara-perkara ini di bawah. Yang ini, .j, berubah menjadi server-up dan menerima. Dan ia sebenarnya menerima server-up untuk client-request untuknya. Jadi, bagi anda yang menerima server-up dan menerima. Jadi, jika anda masuk server-up dan menerima npm, anda akan melihat sesuatu seperti ini. Saya perlu menerima npm-i sebelum saya dapat menerima npm-i. Untuk menerima pendidikan lagi. Setelah saya menerima pendidikan, saya dapat menerima npm-i. Dan anda harus dapat melihat bahawa ia menerima node.sdbn-www. Dan ini server-up akan menerima port 3000xdefault. Jadi, jika anda mempunyai server-up yang lain, anda harus menerima npm-i dulu. Jika anda menerima npm-i dan menerima npm-i sebelumnya, anda harus menerima server-up. Jadi, saya hanya ingin anda menerima server-up untuk ke belakang. Saya hanya ingin anda menerima server-up untuk sekarang. Kontrol C dalam terminal anda. Jadi, untuk menjelaskan, bagaimana kita menerima server-up? Ketika anda menerima server-up, bagaimana anda menerima server-up? Anda melihat bahawa ini menerima npm-i untuk npm-i. Dan server-up akan menerima npm-i. Ia juga menerima npm-i untuk npm-i. Jadi, saya tidak ingin ada npm-i. Jika anda menerima server-up, browser saya dapat menerima npm-i. Jika saya menerima npm-i untuk npm-i, ini adalah page rumah. Ini adalah perlukan kepercumaan dengan perkelahan itu. Ingat, kami melihat perkelahan index yang dikatakan bahawa apabila saya menerima npm-i yang seperti page rumah, seperti saya tidak ingin mengisikan apa-apa yang berlaku di belakang di sekolah 3000. Jadi, hanya kepercumaan. Ia sebenarnya menerima npm-i yang adalah page HTML ini. Itu yang REST.Render dengan. Ia menerima 7 npm-i. Bila anda dapatkan ini, npm-i akan diberikan apabila anda menerima. Jadi, melakukan Cdx Server, dan membuat NPM Start Jadi, NPM Start dan Server adalah membuat perkara yang berlaku daripada NPM Start dan Client Jika kita menentang browser itu menyebabkan Pada ke-HTB, keucian browser ini merupakan keucian kek Jadi, apabila browser kita tanya untuk webpage, ia selalu mencinta untuk membuat keucian kek Jadi, ke-HTB yang membuat keucian kek adalah ke-ucian kek Jadi, mari kita buat sesuatu yang lebih intres Jika anda melihat pakaian di bawah ini, kita mempunyai index.js dan user.js. Biar kita ubah pakaian ini untuk menerima sesuatu yang berbeza. Pertama, mari kita test jika pakaian ini berbeza. Jadi jika anda melihat pakaian anda lagi, anda menggunakan pakaian yang berbeza. Itu adalah pakaian yang anda melihat di tengah-tengah. Anda melihatnya menghubungi pakaian ini, menerima pakaian yang berbeza. Dan ini adalah pakaian yang anda melihat di tengah-tengah. Jadi anda boleh menggunakan pakaian yang berbeza seperti itu juga dari pakaian anda. Atau cara yang anda gunakan dengan pakaian yang sangat selalu digunakan untuk menggunakan pakaian dari pakaian itu. Ia adalah sesuatu yang dipanggil jason. Jadi jason data payload nampak seperti javascript. Sebenarnya nampak seperti javascript objek. Jadi saya boleh sebenarnya melakukan sesuatu seperti, mari kita katakan saya membuat pakaian dari pakaian. Jadi saya akan membuat pakaian ini. Dan dalam pakaian ini, saya akan mempunyai beberapa objek. Jadi mari kita katakan nama, ID dan pakaian dengan nama ini. Jadi saya mempunyai pakaian ini. Jika anda boleh menikmati, ia bagus. Jika tidak, tidak mengingatkan. Saya hanya mahu menunjukkan bagaimana ini berlaku. Saya boleh mempunyai pakaian ini. Dan tanpa membuat pakaian untuk membuat pakaian dari pakaian, saya boleh membuat pakaian jason. Dan membuat pakaian jason. Jadi saya membuat pakaian ini dengan pakaian yang penting dan mengambil pakaian ini. Jadi sekarang jika saya menikmati, pakaian saya menikmati pakaian yang sama. Okey, jadi sekarang ia sama. Ia tidak berubah. Jadi ini adalah apakah aplikasi serva yang berbeza dari aplikasi reaksi anda. Apabila anda membuat aplikasi reaksi, apabila anda membuat aplikasi reaksi, ia akan menghubungi apa-apa yang berubah. Jadi dalam kes ini, aplikasi ekspres tidak terlambat. Skrip mengubahnya tidak terlambat. Ia tidak menghubungi perubahan anda. Jadi anda perlu membuat pakaian untuk membunuhnya. Dan kemudian kita mengubahnya untuk menggabungi perubahan dalam kota. Jadi kawasan C untuk membunuh serva. Sekarang jika anda meminta, anda akan melihat respon baru. Jadi ini adalah bagaimana aplikasi reaksi yang berbeza yang jason tersebut yang serva anda telah menghubungi. Seperti jason. Jadi jason kita telah mengubah jason. Jadi jason ini beritahu ekspres yang saya mahu mengubah jason data. Jadi jason ini berguna seperti sesuatu yang diberi? Okey, jadi saya menghubungi objek ini dengan pakaian yang penting. Dan kemungkinan ini adalah kebunan. Pakaian lain di sini adalah nama yang ini. Pakaian yang tersebut. Pakaian yang tersebut. Pakaian yang tersebut. Pakaian yang tersebut. Pakaian yang tersebut. Jadi pakaian yang tersebut adalah objek ini. Jadi jika anda melihat bagaimana untuk menemukan objek, adalah cerita pakaian. Dan pakaian tedu dan pakaian yang ini adalah orang orang yang saya memikirkan. Saya boleh memindahkan apa-apa pun yang lain. Tapi saya akan memindahkan pakaian yang ia. Tapi jika saya memindahkan begini, kemudian saya memindahkan pakaian. Itu akan berubah dengan pakaian yang lain. Jadi saja memangta memindahkan pakaian yang ia diberi, dan kemudian menggunakan pakaianan npm lagi. Jadi jika saya memindahkan pakaian yang ia, pakaian yang akan me-medahkan. jika anda mahu pakaian untuk menggunakan pakaian, kemudian menggunakan pakaian jadi anda boleh menggunakan apa-apa yang anda mahu pakaian yang penting adalah REST.JSON apabila anda sebenarnya beritahu, berkata, saya mahu menggunakan jason data ke belakang apabila pakaian membuat pakaian ke pakaian ini atau ke pakaian ini untuk mendapatkan pakaian, saya akan menggantikan pakaian ini jadi, kita akan menghentikan sedikit dan ke tempat yang tinggi jadi, sekarang apabila kita menggunakan pakaian REST kita tahu bagaimana untuk membuat pakaian ke pakaian, apabila pakaian bergerak kita membuat pakaian ke pakaian dalam keputusan kita menggunakan pakaian ini sebagai pakaian servis dan ia memberikan kita pakaian pakaian tapi jika kita mahu membuat pakaian ke pakaian ini kita akan membuat pakaian ke pakaian di belakang kita dan ia akan dikongsi dengan sama sekali pada keputusan yang digunakan, anda dapat membuat pakaian ke pakaian ini dengan kata-kata, pakaian akan membuat pakaian ke pakaian tapi anda dapat menghentikan jika ia adalah pakaian yang berbeza jadi, saya menghentikan pakaian ini sebagai pakaian pada pakaian belakang saya jika saya membuat pakaian ke depan saya dan saya menghentikan pakaian pakaian ke pakaian yang berbual 3,000 pakaian, dengan kawan saya akan mempunyai juga ke data ini dan dia dapat mendapatkan data atau membuat sesuatu jadi, itu idea basikal anda hanya mempunyai pakaian belakang mempunyai api, pakaian depan anda panggil api, mendapatkan data mendapatkan kata-kata, membuat sesuatu jadi, saya tidak mempunyai saya bermaksud saya sudah selama enam untuk orang yang tidak boleh tinggal di luar saya rasa ini akan menjadi pakaian ke pakaian tapi jika banyak anda sedang memutuskan saya dapat bercakap lebih banyak saya ada banyak bercakap tapi memang banyak-banyak jadi, untuk orang yang sudah bermain dan anda ingin menikmati rekan-rekan terima kasih banyak untuk datang pada hari ini untuk memperbaiki dan belajar jadi, seperti yang saya katakan, jangan terlalu terlalu teruk jika anda bercakap tentang apa yang dia bercakap hanya cuba yang terbaik dan cuba membuat sesuatu untuk aplikasi anda cuba membuat aplikasi anda saya tidak ingat pakaian keadaan saya tidak ingat pakaian keadaan tetapi dalam beberapa minggu 13 Agar Oh, 13 Agar 2 hari dari sekarang aplikasi sangat terlalu dekat jadi anda dapat melihat masa itu jadi, saya rasa 2 hari nanti anda akan mempunyai klinik jadi, jika anda bekerja pada masa anda sendiri dan anda perlukan bantuan untuk mempunyai klinik dan dapat meminta diri perkara lebih mudah untuk meminta diri daripada sebuah Facebook dan sebagainya kerana ia sangat susah untuk menjelaskan kadang-kadang dan anda dapat juga saya rasa anda dapat memberi e-mel kepada semua pendidikan untuk semua pendidikan kerana ia sangat susah untuk menjelaskan jadi, kami akan memberi e-mel kepada semua orang yang menjelaskan untuk semua pendidikan dan kami akan menjelaskan di Facebook juga ya, sebelum anda pergi jika anda perlu pergi segera tolong tolong membantu kami memperkenalkan pendidikan ini anda tidak boleh memperkenalkan ini tolong pergi ke pendidikan ini dan beri kami segera di pejabat kerja segera sangat kecil ok biar saya membuatnya sangat baik RHPK1T mana sesi mana? saya rasa anda ingat yang ini? oh, tidak, ok jadi, perkara klinik ini adalah perkara klinik apabila anda memperkenalkan sesuatu di terminu dan ia memperkenalkan di terminu dan anda ingin membunuhnya anda memperkenalkan di terminu tetapi tidak secara klinik jika anda ingin memperkenalkan ini hanya membuatnya secara normal yang mana? terima kasih saya tanya mengapa anda memperkenalkan memperkenalkan ASDF ASDF adalah pengalaman versi yang kita nampak sepanjang masa orang-orang perjalanan berbeza yang berbeza mereka mungkin menggunakan versi yang berbeza dari paket atau bahkan versi yang berbeza dari langkah saya bermakna semua versi yang berbeza ada versi yang berbeza dengan perangkat yang berbeza jadi, j gambling-chain juta guna bersatu jadi kadang lain respectfully jika orang ber actually berponj jika Anda melakukan pengekuan perangkat hanya loves nor In this case, it's 8.11.3, I guess. But it doesn't allow you to give you an easy way to. You know, if I want to go to this project, I want to switch to a different version. If I want this project, I want to switch to another version. So that's why I always encourage people to use a version manager like ASDF, but there are others like another one NVM. But it's not, I mean like, it's not strictly necessary lah. So for our cases, you won't get big issue if someone's running on 10 or someone's running on 8. But it's just a general good practice in general. Not just for Node.js, but like any other language or... ...even like your dependencies like NPM. That's the reason we have a package manager. But I always thought because NPMs like your dependencies are... ...that they depend on the package.json. Like so whichever version is... Ya, ya, exactly. So package.json is a way for you to specify the dependency versions. But if you think about it, there's no way... ...if you don't have ASDF or NVM, there's no way for you to... ...there's no way for you to specify your language version. Right, so package.json is for you to specify the version of your packages. So ASDF is kind of like similar to NPM, but... ...to specify the version of your language itself. Ya, got it. Thank you. Okay, come. Why didn't I? Oh, it's a client. It's the... ...she's a client, I guess. That's like the... ...to try speaking the norm. Eh... ...did you guys? Hmm? I'm not sure. Eh, who's interested in staying on or if people are leaving already? So I have a few of them, yeah. Just a few, man. I was working on a code academy, and I wonder why this is wrong. Why, what is wrong? It's... It's the same thing, it's wrong. It's the same thing, it's wrong. What is the test return error? So it means it should be in the homepage, right? So it's the syntax error, meaning you made a typo somewhere, probably. Okay. I can't... Okay, so the thing about indentation, right, is there's a reason why I try to keep my indentation super... ...precise and like, you know... ...like if I curly brace the opening and closing on the same... ...on the same column, because it helps me spot this kind of issue. Like if now you have one brace here and one brace there, it's kind of hard to see. So like, good practice is to try to keep that indentation, you know, aligned. So you can spot like, whether you missed out some parenthesis somewhere here or there. So, so... Well, I guess for me it's like, I don't know how to... Ah, okay. So... ...there are tools that allow you to auto-correct indentation, but you need to install some things on VS Code. But generally like, normally when you write VS Code automatically, you know, try to put it on the same line already. But in case if you got out of line, you can just always tap. Ya, just tap to correct it. And let's say if it is here, this curly is here, should I use this curly to displace? Okay, so how we align indentation usually is... Okay, let's say we are declaring a new constant. I will try to align it with that declaration, not like that. Hmm... It's something like... Ya. And for example, let's say we have a... ...let's say when you have a class, right? Sorry, not this one. This class, this is the starter indentation. And this ending one aligns with the first. So same, same kind of thing. But sometimes you also see them on the same corner. So it's like kind of just a pattern. That you just have to get used to. Okay, thanks so much. Hai, hai. The rest of the file no need to change, right? Eh, ya. I mean like this won't... So what I did is just I comment out, then I put here, then I put the next. Then still cannot lay. It's supposed to be the... Slash users. All slash users ah. Ya, because if you see where this router is registered. Oh okay. We app.use slash users. And this is registering that user router. Oh okay, okay. So... But then just now, we got the error of users. Oh, not found. Oh, is it because... ...uh... ...by... Catch users. By right, it should... So actually it's actually hitting this error lah. By right, it should go through here lah. Oh, okay. So isn't it, this one... ...this one should be slash user too. Because if like, if this is just slash right, it's like contradicting of the what we put in the app. No, of course the thing is that when you export this, and you import here, right? You are requiring it here, right? Here, you specify slash users already. Oh, okay, okay. So if you put another slash user, end up being slash users slash users. Oh, okay, okay, okay. So doesn't mean that I have to put here like the... ...because here... ...routes, right? I should put routes.set. And routes.use. Route.use. No, it's app.use. So inside here, is you do router.get. Oh, okay. Specify that if I hit this URL with a get request, it will trigger this function. Oh, okay, okay. Bye. I'm not sure why it's not moving. Spiralite, this should be fine. We'll see. Oh, maybe. Oh, did you restart your server? Oh, yes. Oh, but we didn't restart our server. Ya. Ya, sorry. Because you can't get used to it for the react side that you don't have to restart. But for this, it's a bit... ...dama. Okay, okay. Ya. Refresh the web page. Oh, okay. Because actually, I will be at the A, right? Control-R. We... This is several times. I think just now we knew there's a shortcut. Control-R. Or you can just manually keep the refresh. Refresh. Break, right? Ya, this one. Okay, thank you. Ya. Ya, this one. Okay, thank you, thank you. Ya. What are you going to say? Ya. Ya. Jadi, yang anda yang saya mahu berhenti mendengar lebih, saya hanya akan teruskan dengan apa yang saya sebenarnya telah diperlukan jika saya ada lebih banyak masa. Jadi, plan ini untuk serva untuk mempunyai setiap ruang mana anda dapat mengambil tujuan anda dan menambah tujuan baru dan sebagainya. Jadi, apa yang saya akan lakukan adalah saya akan memperbaiki pakaian ini.js. Sebelum memperbaiki pakaian, saya akan memperbaiki tujuan. Jadi, hanya untuk keperluan, pertama saya akan... Baiklah, semua ini. Pertama, saya akan nama pakaian. Jadi, dalam code VS, jika anda menarik, anda boleh nama pakaian. Jadi, saya hanya akan nama tujuan.js. Bukan tujuan yang sama? Apa kata kita? Bukan perlukan suatu ruang dan перемiliki pakaian. Okey, jadi... Pada pula saya, di reaksi saya. Ya. Jangan. Terlalu berbeda, cara berbeda. Jadi, tujuan dan reaksi saya, pula-pula, esok keadaan dan pakaian yang pada code ziet je, betul. Jadi, tujuan ini dalam ruang-rug adalah untuk server ke belakang kita. Jadi, saya akan mengenai Tudus. Dan jika saya mengenai file, saya perlu mengubah semua import juga. Jadi, app.js, small app, bukan app besar, small app.js, mari kita selesai saja. Jadi, small app.js sebenarnya memperbaiki file Tudus. Jadi, sebelumnya, ia sebenarnya pengguna. Tetapi selepas saya mengenai file, VSCode cukup smart untuk membantu saya mengubah nama sebenarnya. Jadi, sebenarnya, ini adalah pengguna, dan apabila saya mengenai VSCode, VSCode sebenarnya membuat saya mengubah untuk Tudus. Okey, jadi saya mengenai... saya mengenai pengguna.js untuk Tudus.js, bermaksud, apapun yang saya mengenai file ini, apapun yang saya mengenai file ini yang mengenai pengguna.js, saya perlu mengubah referensi, kerana nama file ini mengubah. Dan sebenarnya apabila saya mengenai file VSCode, ia sebenarnya cukup smart. Ia sebenarnya mengubah nama untuk saya, automatikal. Orang lain. Ya. Jadi sekarang, sebab ini adalah Tudus, dengan Tudus, saya akan mengenai tudus router. Adi anda tidak suka anda. Okey, jika anda tidak mengubah, sila mengubah diri. Jadi, mengubah ini untuk rock slash Tudus, dan mungkin anda ingin mengenai router Tudus, bukan berita untuk pengguna. Dan URL ini mungkin dapat menjadi Tudus, bukan berita untuk pengguna dan ini juga tudus router. Okey. movement.express.onden Boleh anda jaksikan hal ini? Bagaimana jika anda mempunyai nama saya dan untuk di sini? Tidak, ini cuma nama saya. Jadi, ia mungkin dipunyai dengan berbeda dengan masyarakat anda. Jadi nama akan berbeza. Sebab itu nama awak. Nama saya adalah segala-galanya. Jadi nama saya. Ini nama saya. Sebab itulah anda melihatnya di visual studio. Tapi nama awak mungkin hanya mempunyai nama saya untuk melakukan ini. Bagaimana anda bercakap tentang nama saya? Mungkin nama awak berbeza adalah berbeza daripada saya. Saya tidak yakin. Sebenarnya, ia sepatutnya cukup mudah untuk mengubahnya. Bagaimana saja? Selepas saya mengubah semuanya kepada Tudus, saya juga mengubahnya kepada Tudus. Saya juga mengubahnya kepada Tudus. Kemudian, tidak ada apa-apa lagi. Saya hanya melakukannya. Jika saya mengubah Tudus kali ini, saya masih akan mendapat jawapan yang sama. Tapi saya perlu memulangkan server saya dulu. Saya masih akan mendapat jawapan yang sama dengan pengguna. Kerana saya tidak sebenarnya mengubah kode dalam router. Saya hanya mengubah semuanya. Jadi jika saya mahu mengubah apa yang sebenarnya terjadi, saya perlu mengubah kode di sini. Jadi biar saya mengubah kode di sini. Ia akan menjadi Tudus kali ini. Jadi sekarang saya akan melihat format yang sama di depan saya. Tudus saya ada deskripsi yang dikorek. Inilah perkara yang sama dikorek. Ia ada value bulan. Jika adil dikorek dan dikorek, saya akan memakai nama yang berlaku. Bagaimana saya mengubah perjalanan? Boleh. Tapi perjalanan awak perlu mengubah objek. Bagaimana keadaan saya untuk mengubah diskripsi adalah capital D. Dia dapat mengubah small D dan ia tidak bisa berfungsi. Jadi cara yang paling mudah adalah membuatnya sama. Tapi kalau anda mahu menerima lebih banyak kode, anda boleh menerima lebih banyak kode di depan anda untuk mengatakan bahawa jika ia adalah capital D, kode dan diskripsi dengan small D tetapi jangan membuat hidup awak terlalu susah. Ya? Apa yang terlebih dahulu, maaf. Oh, okey, ini adalah komponen reak. Okey, jadi ini adalah aplikasi yang separat. Ia sudah di dalam kode yang sama. Ia adalah folder yang sama. Tapi kita mempunyai klien dengan serva. Jadi serva adalah aplikasi yang berbeda. Klien adalah aplikasi yang berbeda. Jadi jangan risau. Ada kode yang berbeda. Kode klien bergerak pada aplikasi anda. Kode serva seperti yang saya katakan, bergerak di sesuatu serva, sesuatu masin, jika anda meletakkan masin di internet, anda akan meletakkan masin itu. Ya, ini adalah kode belakang. Sekarang anda meletakkan masin di lokala, tetapi aplikasi yang sebenarnya telah diletakkan pada serva di internet. Apa yang berguna? Ya, jadi dengan baik-baik saja, anda harus membuat data yang sama seperti apa yang front-end menunggu. Kerana jika kita katakan serva anda akan meletakkan deskripsi dengan capital D, bukan small D. Kemudian klien akan mencuba meletakkan deskripsi dengan small D. Ia tidak akan bekerja. Jadi jika anda ingin melakukan transformasi di kode klien untuk mengatakan bahawa jika ia adalah besar D, membuatnya small D, yang akan memperbaiki kode yang lebih bergerak. Untuk keperluan, hanya membuatnya sama sekarang. Sebenarnya ia tidak sepatutnya, tapi jika anda menulis kode yang bergerak, dan ia tetap disebabkan kode user, orang yang meletakkan kode anda akan berkata, apa yang anda lakukan? Jadi ia untuk diri anda sendiri dan untuk keperluan. Jadi saya akan mempunyai listan kode dan seolah-olah menjawab, sekarang saya akan mengubah kode. Dan yang lain adalah semua sama. Jadi sekarang, ingat, anda harus memulangkan aplikasi anda, dan memulangkan kode, dan mulakan MPM. Dulu, dalam aplikasi kode yang bergerak, jika saya menghidupkan kode, jika saya membesar dan turun, saya dapatkan komand yang baru. Bagaimanapun, saya sedang memuntukkan kode semua kali. Jika saya membesarkan, saya akan membesar komand yang baru. Jadi saya membesarkan MPM, dan saya membeli sekarang saya akan mengambil listan kode. Okey? Maaf, saya rasa saya akan memulangkan kode. Boleh saya jemput bahawa anda memulangkan kode? So, I just change the JSON.json to instead of users, colon users, I change the todos, colon todos. So, make sure you restart your, after you change your code, restart your server. The code or the server? The code? Yes, you have to make sure you declare your todos first, otherwise it cannot reference the variable here. So, just make sure you are able to go to your browser and get this list of todos. Busy, the fact that we are able to do that. The site is too busy. Ya, I just do this test test test test. Where is your terminal? Are you running your server? You're probably not running it, so just npm start. Go inside server, cd server. Yes. Cd, change directory to server in your terminal. Npm start. So, that's right. That means your server is not running, so your client cannot connect to it. 404? Yes, 404. This is? Now should be slash todos. Now should be, you should change your URL here to slash todos. Oh, it's not users. Ya, because you remember you renamed the route. And so what? Ya. Cool. I got this page. Is your server running? I guess not. But it's your enter. Wah, your keyboard so fancy. So you cannot run properly. I guess you got some. So your todos router, you never change the require statement properly. So you should rename this to... Oh, all that app? You should... No, no, change this to todos router. Because down there you prefer todos router, right? But it's not declared anymore. Todos. So this is the only... Ya, and then you should probably change this to todos also. Because now you want to request todos. This route. This URL. So this, that means if you go to localhost slash todos, you will hit this router. Okay. Ya. The error is? You probably have some error in your code. Since next error. So you need a comma after this. Is it if I add this... Say I add more application here. Say I add more application here. This is the front end, right? Then I have to add it here also. No. I mean like... What you might have to. You don't have to. Say I want a user login. Ya, if you want to add some feature. Ya, let's say you want to add a login feature. You probably need to write some back end code to authenticate the user. Your front end is just going to call the API. And the authentication will be like a new JS file. Ya. Okay. User.js. Negation is quite complicated. So it's not as simple as just that. But let's say when we add new end points or new routers, then ya you can add in a new file. Okay. So... Ya, ya. Is this considered as a database server? Or not yet? So database is a separate thing. So this server is just another application running on your machine right now. It's not talking your database at all. So actually, once you kill your server, whatever is here, is in memory. That means when your process is running, there's the data that stores some data in your memory. But once you kill that process, it's gone. I still don't understand why you need a front end. So this will go with the Mongo? So the front end is just the part that your user interacts with. So actually the front end don't need to have all these things and you'll put me all in the server. Ya, so you put me in the server. And the front end and your react will actually fetch the to-dos from this server. And normally this to-dos, but right this to-dos will usually be fetched