1
00:00:02,350 --> 00:00:08,950
Untuk ini saya menyiapkan proyek kecil yang akan ditampilkan tahun ini di layar dan Anda akan menemukan Proyek awal

2
00:00:09,040 --> 00:00:11,830
ini terlampir pada kuliah ini di sini.

3
00:00:11,860 --> 00:00:16,810
Jadi ini adalah proyek reaksi sederhana yang dibuat dengan aplikasi create react.

4
00:00:16,810 --> 00:00:21,160
Ini berjalan di bengkel di lebih dari 16 bukan delapan dan itu penting.

5
00:00:21,160 --> 00:00:23,890
Anda harus bereaksi enam belas titik delapan atau lebih tinggi.

6
00:00:23,920 --> 00:00:29,200
Kalau tidak, Anda tidak dapat menggunakan kait reaktor sementara rata-rata selain itu tidak ada yang istimewa di

7
00:00:29,860 --> 00:00:34,520
sini, itu hanya aplikasi reaktor normal dengan beberapa komponen yang sudah dibuat untuk Anda.

8
00:00:34,660 --> 00:00:37,430
Jadi izinkan saya dengan cepat memandu Anda melalui apa yang kami miliki di sini.

9
00:00:37,450 --> 00:00:43,450
Sebelum kita mulai bekerja dengan Ayah dan sebelum kita mulai menggunakan kait reaksi dengan indeks kami untuk

10
00:00:43,450 --> 00:00:50,050
jatuh yang cukup sepele saya mengimpor CSX yang diindeks yang mengatur beberapa impor global styling yang menyenangkan membuat beberapa

11
00:00:50,050 --> 00:00:54,110
styling global yang baik untuk mendanai tombol dan itu Itu.

12
00:00:54,160 --> 00:00:58,270
Dan kemudian di sini saya membuat komponen aplikasi yang tinggal di aplikasi J. S. mengajukan.

13
00:00:58,270 --> 00:01:00,770
Ini komponen yang sangat sederhana tidak banyak membantu.

14
00:01:00,970 --> 00:01:05,260
Ini akan melakukan lebih banyak nanti yang mengapa saya memiliki komponen tambahan ini.

15
00:01:05,260 --> 00:01:10,300
Tetapi untuk sekarang ini hanya mengembalikan komponen bahan yang kita dapatkan dari folder komponen di sana

16
00:01:10,330 --> 00:01:15,310
dari sub folder bahan dan kemudian dari bahan J sebagai file yang akan menjadi file

17
00:01:16,320 --> 00:01:22,290
ini di sini sekarang di sana saya pada akhirnya memiliki div saya membuat bentuk bahan komponen yang hidup dalam

18
00:01:22,290 --> 00:01:27,840
bentuk bahan file ust dan kemudian saya memiliki bagian di mana membuat komponen pencarian yang tidak mengejutkan

19
00:01:27,840 --> 00:01:33,720
tinggal di file JS pencarian dan jika kita melihat pada bentuk bahan maka kita melihat bahwa ini adalah

20
00:01:34,140 --> 00:01:38,090
komponen yang menggunakan komponen kartu khusus yang ada di folder UI.

21
00:01:38,090 --> 00:01:42,430
Kita akan melihat folder itu sebentar lagi dan kemudian formulir bahan di sini.

22
00:01:42,480 --> 00:01:50,700
Saya memiliki formulir di sini. Saya memiliki bagian yang merupakan bentuk normal dengan beberapa input untuk input yang

23
00:01:50,700 --> 00:01:53,900
tepat untuk judul dan jumlah dengan tombol.

24
00:01:54,000 --> 00:02:01,590
Dan saya juga menggunakan memo reaksi di sini untuk membungkus komponen ini ke render yang tidak perlu luas sehingga ini

25
00:02:01,710 --> 00:02:08,480
hanya membaca membuat komponen ini hanya benar-benar render ketika props tergantung pada perubahan dan tidak selalu ketika

26
00:02:08,490 --> 00:02:09,990
komponen induk berubah.

27
00:02:10,020 --> 00:02:15,240
Jadi tidak selalu ketika bahan berubah tetapi hanya ketika bahan berubah dan kami memberikan Anda alat peraga untuk

28
00:02:15,240 --> 00:02:20,010
bentuk bahan yang saat ini kami tidak pernah melakukannya, sekarang bahan bahan tidak akan ditampilkan ulang saat

29
00:02:20,010 --> 00:02:21,180
bahan kami render.

30
00:02:21,180 --> 00:02:26,370
Itu hanya catatan kecil ini yang akan Anda pelajari tentang memo reaksi awal dalam

31
00:02:26,370 --> 00:02:29,140
kursus di modul menyelam dalam komponen.

32
00:02:29,370 --> 00:02:34,480
Nah, itu folder bahan sementara hampir kita juga punya daftar bahan di sana.

33
00:02:34,490 --> 00:02:36,230
Saya hanya memberikan daftar bahan.

34
00:02:36,240 --> 00:02:41,340
Saat ini kami tidak mendapatkan bahan apa pun dari mana pun dan mereka menawarkan dengan baik kami

35
00:02:41,370 --> 00:02:47,070
tidak menggunakan ini, kami akan menggunakannya untuk modul ini dan tentu saja dalam pencarian, hanya pada musim gugur, saya juga

36
00:02:47,490 --> 00:02:52,410
akan menggunakan memo untuk alasan yang sama. lakukan dalam bentuk bahan dan hanya menghasilkan kotak pencarian.

37
00:02:52,500 --> 00:03:00,320
Masukan ini di sini di gerobak dan itu tentu saja kotak disk di sini di bagian bawah Saya punya beberapa C salah di sana

38
00:03:00,330 --> 00:03:04,850
juga Anda tentu saja bisa melalui itu jika Anda ingin sedikit gaya untuk membuat

39
00:03:04,970 --> 00:03:06,420
ini semua terlihat bagus.

40
00:03:06,440 --> 00:03:09,170
Sehingga kami memiliki aplikasi yang terlihat bagus untuk bekerja.

41
00:03:09,440 --> 00:03:15,350
Sekarang di folder UI saya menyiapkan beberapa komponen UI seperti kartu di sini yang hanya membungkus apa pun yang

42
00:03:15,350 --> 00:03:21,100
kami lewati antara tag pembuka dan penutupnya dan memberikannya tampilan kartu yang bagus dengan gaya-gaya ini di sini.

43
00:03:21,110 --> 00:03:26,540
Saya mendapatkan modal kesalahan yang saat ini tidak saya gunakan tetapi yang akan kami gunakan penipuan.

44
00:03:26,560 --> 00:03:33,050
Modul ini dan ini hanya menggunakan fragmen reaksi yang merupakan pengganti komponen OCS.

45
00:03:33,050 --> 00:03:39,080
Kami membuat secara manual selama kursus ini, itu hanya komponen pembungkus untuk memenuhi kondisi ini

46
00:03:39,080 --> 00:03:46,500
dengan memiliki satu pembungkus root per komponen reaksi sehingga kita tidak harus menggunakan div yang tidak perlu di sini.

47
00:03:46,610 --> 00:03:52,670
Lalu saya membuat latar belakang di sana dan modal itu sendiri di mana kita dapat menampilkan konten khusus seperti

48
00:03:52,910 --> 00:03:56,390
pesan kesalahan khusus kita mendapatkan tombol untuk menutup klik itu.

49
00:03:56,390 --> 00:04:00,170
Latar belakang harus semua dekat dengan modal tetapi akan terserah kita untuk kita.

50
00:04:00,170 --> 00:04:06,410
Logika ini yang saya maksudkan selalu menggunakan memo reaksi di sini dan di sini saya mendapatkan beberapa gaya untuk

51
00:04:06,410 --> 00:04:13,620
modal dan saya memiliki indikator pemuatan yang hanya pemintal yang dapat kami render untuk menunjukkan bahwa saat memuat data, jadi Data adalah apa

52
00:04:13,640 --> 00:04:15,560
yang kami miliki di sini.

53
00:04:15,560 --> 00:04:19,260
Ini adalah komponen yang saya berikan kepada Anda dan Red sekarang melakukan aplikasi tidak melakukan apa-apa.

54
00:04:19,280 --> 00:04:24,950
Anda dapat memasukkan sesuatu di sini tetapi menekan tombol ini tidak akan melakukan apa-apa karena sekarang terserah kita untuk

55
00:04:24,950 --> 00:04:26,130
Wired sudah habis.

56
00:04:26,320 --> 00:04:32,700
Dan jika Anda perhatikan dengan seksama Anda akan melihat bahwa semua komponen ini di sini semuanya adalah komponen fungsional.

57
00:04:32,700 --> 00:04:39,200
Tidak ada komponen berbasis kelas tunggal di sana dan kami akan meninggalkan komponen ini sebagai komponen fungsional sehingga

58
00:04:39,200 --> 00:04:45,680
kami tidak akan mengubahnya karena karena sekarang Anda akan mempelajari modul ini, kami dapat membangun seluruh tab

59
00:04:45,680 --> 00:04:47,960
reaksi dengan hanya komponen fungsional.

60
00:04:47,960 --> 00:04:54,500
Dengan bantuan kait, mari selami dan mari kita pelajari tentang pengambilan pertama yang mungkin paling banyak

61
00:04:54,530 --> 00:04:55,220
diambil.