1
00:00:02,260 --> 00:00:08,440
Sekarang, dalam kursus penyegaran ini, Module Yeater tidak akan menulis aplikasi reaksi kompleks karena itu sama sekali bukan

2
00:00:08,440 --> 00:00:10,120
ide dari modul ini.

3
00:00:10,630 --> 00:00:17,260
Kami akan menulis aplikasi realistis dalam modul utama nanti kursus ini setelah modul ini di sini kami akan bekerja

4
00:00:17,260 --> 00:00:18,730
pada proyek kursus.

5
00:00:18,880 --> 00:00:20,890
Jadi itu hanya penyegaran di sini.

6
00:00:21,070 --> 00:00:25,840
Dan saya fokus pada elemen-elemen reaksi inti, Stael, untuk dan bukan pada membangun aplikasi luar biasa.

7
00:00:26,530 --> 00:00:31,870
Jadi REACT adalah semua tentang komponen dan karenanya kami membagi aplikasi menjadi beberapa komponen.

8
00:00:32,080 --> 00:00:34,300
Sekarang mari kita mulai tanpa membaginya.

9
00:00:34,390 --> 00:00:41,320
Dan alih-alih mengeluarkan H satu teknologi di sini, sebuah aplikasi, saya akan menggunakan div, katakanlah dalam div itu.

10
00:00:41,710 --> 00:00:43,840
Mari kita tambahkan lebih banyak kode html.

11
00:00:44,050 --> 00:00:50,420
Saya mengatakan html di sini tentu saja J adalah X tetapi diterjemahkan ke dua catatan HCM Altidore di belum.

12
00:00:50,500 --> 00:00:50,700
Baik.

13
00:00:50,980 --> 00:00:52,120
Tapi itu J adalah X.

14
00:00:53,020 --> 00:01:00,830
Jadi di sini kita bisa meminta H untuk menandai di mana kita mengatakan tujuan dan di bawahnya kita ingin memiliki daftar atau

15
00:01:00,830 --> 00:01:02,950
menambahkan daftar tujuan kursus kita.

16
00:01:03,180 --> 00:01:04,150
Dan mereka adalah tujuan.

17
00:01:04,180 --> 00:01:04,840
Bisa jadi.

18
00:01:05,260 --> 00:01:09,460
Ayah, kami ingin menyelesaikan kursus.

19
00:01:10,350 --> 00:01:13,560
Bahwa kami ingin mempelajari semua tentang kursus.

20
00:01:17,240 --> 00:01:21,230
Topik utama dan kami ingin, katakanlah, membantu.

21
00:01:22,920 --> 00:01:25,950
Siswa kami dalam kursus, CU dan.

22
00:01:28,030 --> 00:01:31,890
Bagian, dan itu bisa berupa emas.

23
00:01:32,260 --> 00:01:34,060
Sekarang, aplikasi yang sangat sepele.

24
00:01:34,240 --> 00:01:39,850
Sekarang, saya tidak memiliki gaya khusus yang spektakuler di sini, itulah sebabnya kami menyimpannya dan mengeluarkannya.

25
00:01:39,880 --> 00:01:47,050
Tapi sekarang saya akan menambahkan beberapa gaya dan untuk itu saya akan menambahkan aplikasi, file Sears di sini dan impor Deadfall

26
00:01:47,110 --> 00:01:48,370
ke file JavaScript.

27
00:01:48,400 --> 00:01:53,710
Ini, tentu saja, tidak mungkin di Manila, JavaScript, tetapi karena itu di bawah tenda perkakas, yang

28
00:01:53,710 --> 00:01:56,860
Nien menganalisis file kami dan kemudian mengubah kode.

29
00:01:57,310 --> 00:02:02,740
Ini mungkin dan ini hanya ditransformasikan untuk menyuntikkan kode CSX ini ke dalam H.

30
00:02:02,740 --> 00:02:03,790
File waktu juga.

31
00:02:04,660 --> 00:02:07,580
Sekarang di sini, saya akan memberikan nilai C ini sebagai kelas.

32
00:02:07,600 --> 00:02:09,370
Dan ada satu hal khusus.

33
00:02:10,080 --> 00:02:16,500
Atribut kelas seperti ini tidak ada dan J adalah X karena kelas adalah kata kunci dalam JavaScript.

34
00:02:16,840 --> 00:02:18,160
Jadi itu adalah nama kelas.

35
00:02:18,190 --> 00:02:21,870
Dan ini adalah bagaimana Anda menambahkan kelas siestas ke elemen dan J adalah X.

36
00:02:22,240 --> 00:02:28,400
Ini semua, tentu saja, adalah semacam bukti atau mengingatkan Anda pada fakta bahwa ini bukan H Tim.

37
00:02:28,660 --> 00:02:29,320
Tapi H Tim.

38
00:02:29,320 --> 00:02:37,630
Owlish mencari sintaksis semua bernama sebagai daftar sasaran kelas di sini dan sekarang di sini kita bisa.

39
00:02:39,040 --> 00:02:46,300
Menentukan beberapa gaya untuk Gollust di sini, dan saya hanya akan mengatur daftar untuk gaya ke non di

40
00:02:46,300 --> 00:02:52,660
sini, menghapus margin atau memberinya margin dua ram atas dan bawah dan padding dari nol.

41
00:02:53,350 --> 00:03:00,040
Dan pada setiap item daftar sasaran, saya akan menambahkan margin satu ruangan atas dan bawah nol dua kiri dan kanan,

42
00:03:00,460 --> 00:03:03,020
dan kemudian hanya perbatasan satu pixel padat.

43
00:03:03,040 --> 00:03:07,460
Dan kemudian warna keabu-abuan di sini dan bantalan satu ram.

44
00:03:07,550 --> 00:03:12,460
Ini adalah gaya yang sangat, sangat sederhana karena saya tidak ingin menghabiskan banyak waktu untuk menulis sebagai gaya

45
00:03:12,520 --> 00:03:13,150
di sini.

46
00:03:13,930 --> 00:03:15,820
Sekarang, mungkin satu penyesuaian.

47
00:03:16,420 --> 00:03:19,810
Mari kita benar-benar memberikan daftar margin dua pita semua arah.

48
00:03:20,230 --> 00:03:24,310
Sekarang kami memiliki daftar tujuan kami untuk menyesuaikan tujuan kursus di sini di bagian atas.

49
00:03:24,640 --> 00:03:25,990
Saya juga akan.

50
00:03:27,750 --> 00:03:30,420
Berikan nama kelas ini, tentu saja, tengkorak.

51
00:03:31,460 --> 00:03:33,050
Dan kemudian di D. C. sebagai file AS.

52
00:03:34,390 --> 00:03:41,410
Mungkin di bagian paling atas, kita dapat menghentikan tujuan dan d. h untuk menandai untuk disejajarkan di tengah.

53
00:03:41,620 --> 00:03:42,220
Seperti itu.

54
00:03:43,060 --> 00:03:45,160
Sekarang lagi, tujuan yang sangat Euge.

55
00:03:45,190 --> 00:03:47,470
Tapi itu tidak masalah untuk wacana di sini.

56
00:03:47,650 --> 00:03:49,270
Kami hanya berlatih bereaksi.

57
00:03:49,780 --> 00:03:51,070
Jadi kita punya tujuan kursus ini di sini.

58
00:03:51,430 --> 00:03:51,880
Luar biasa.

59
00:03:52,450 --> 00:03:54,860
Ini, tentu saja, adalah markup yang sangat sederhana.

60
00:03:55,450 --> 00:04:00,940
Sekarang, apa yang sering Anda lakukan sebagai reaksi ketika Anda akan membaginya menjadi lebih banyak

61
00:04:00,940 --> 00:04:07,570
komponen, Anda akan, misalnya, meng-outsource daftar ini ke dalam komponen terpisah untuk menjaga setiap komponen tetap relatif ramping

62
00:04:07,570 --> 00:04:09,640
dan fokus pada satu tugas.

63
00:04:10,180 --> 00:04:14,560
Untuk itu, kita bisa menambahkan folder sup komponen di sini di folder sumber.

64
00:04:15,400 --> 00:04:20,650
Dan di sana saya akan menambahkan daftar tujuan J. S. Mengajukan.

65
00:04:20,830 --> 00:04:22,960
Ini akan menampung komponen daftar sasaran saya.

66
00:04:23,620 --> 00:04:27,880
Sekarang, untuk membuat komponen baru seperti itu, pertama-tama kita harus mengimpor, bereaksi dari bereaksi.

67
00:04:27,940 --> 00:04:30,450
Kalau tidak, kita tidak bisa menggunakan J ini sebagai X Syntex.

68
00:04:31,000 --> 00:04:32,290
Dan kemudian saya sebutkan mati.

69
00:04:32,290 --> 00:04:33,760
Komponen adalah fungsi.

70
00:04:33,880 --> 00:04:37,660
Dan omong-omong, Anda juga dapat dibuat dengan kata kunci fungsi atau.

71
00:04:38,710 --> 00:04:42,280
Dengan ekspresi fungsi atau.

72
00:04:43,490 --> 00:04:47,480
Dengan fungsi Arrow segera teks yang saya gunakan sebelumnya, itu hanya somatics saya akan gunakan di sini,

73
00:04:47,480 --> 00:04:48,680
tapi itu tidak harus dilakukan.

74
00:04:49,430 --> 00:04:52,430
Dan kemudian di sini saya mengekspor daftar sasaran saya seperti ini.

75
00:04:52,790 --> 00:04:54,860
Dan sekarang di sini, saya kembali.

76
00:04:55,920 --> 00:05:01,530
Daftar tanpa urutan ini, garam, potong di sini dan kemudian ditambahkan, di sini adalah nilai balik dan

77
00:05:01,530 --> 00:05:07,500
jika direformasi, Anda melihat secara otomatis tanda kurung ini ditambahkan di sekitarnya sehingga ini dapat diformat dengan baik

78
00:05:07,680 --> 00:05:08,910
di beberapa baris.

79
00:05:08,940 --> 00:05:10,890
Kalau tidak, ini tidak akan menjadi JavaScript yang valid.

80
00:05:11,280 --> 00:05:13,350
Begitu pula dengan tanda kurung.

81
00:05:13,350 --> 00:05:16,920
Karena dengan demikian JavaScript tahu bahwa blok ini dimiliki bersama.

82
00:05:17,730 --> 00:05:20,170
Jadi sekarang kita memiliki daftar sasaran di sini dan sebuah aplikasi.

83
00:05:20,430 --> 00:05:24,630
Ya, kami sekarang dapat mengimpor komponen daftar sasaran kami.

84
00:05:24,930 --> 00:05:26,520
Anda dapat menamainya di sini sesuka Anda.

85
00:05:26,790 --> 00:05:29,990
Tidak harus sama dengan nama tempat Anda mengekspornya di sini.

86
00:05:30,450 --> 00:05:36,720
Satu-satunya hal yang penting adalah bahwa itu harus dimulai dengan karakter huruf besar di sini di Abcess dan impor dari

87
00:05:36,720 --> 00:05:39,510
folder komponen dan mereka berasal dari daftar sasaran.

88
00:05:39,780 --> 00:05:43,430
Dan seperti yang saya sebutkan sebelumnya, Anda dapat menghilangkan D. ekstensi file di sini.

89
00:05:43,620 --> 00:05:44,460
Itu tidak wajib.

90
00:05:45,210 --> 00:05:52,710
Dan kemudian di sini Anda menggunakan daftar go seperti J. biasa S. Elemen X, seperti elemen H tim L biasa, bisa

91
00:05:52,710 --> 00:05:53,040
dibilang.

92
00:05:53,310 --> 00:05:58,890
Tetapi karena kami tidak memiliki konten antara tag pembuka dan penutup, kami dapat dan kami harus menulis tag penutup diri

93
00:05:58,890 --> 00:05:59,460
di sini.

94
00:05:59,760 --> 00:06:00,960
Ini tidak akan diizinkan.

95
00:06:01,050 --> 00:06:03,280
Anda selalu harus menutup pajak dan jazz x.

96
00:06:03,990 --> 00:06:06,240
Jadi ini sekarang akan menjadi komponen daftar sasaran saya.

97
00:06:06,630 --> 00:06:10,230
Dan karena itu, jika kita aman, kita melihat output yang sama seperti sebelumnya.

98
00:06:10,980 --> 00:06:17,520
Kami juga mendapatkan gaya yang sama karena gaya di sini selalu diterapkan secara global, bahkan jika Anda mengimpornya

99
00:06:17,520 --> 00:06:19,140
ke file komponen tertentu.

100
00:06:19,590 --> 00:06:26,250
Dan tetap saja, itu adalah praktik yang baik untuk mengatur gaya dalam file CSX di sebelah komponen milik mereka.

101
00:06:26,520 --> 00:06:28,610
Karenanya, saya akan menambahkan daftar sasaran C sebagai file.

102
00:06:29,040 --> 00:06:33,210
Tambahkan daftar sasaran saya Stollsteimer dan impor daftar sasaran itu.

103
00:06:33,300 --> 00:06:36,450
CSX termasuk dalam daftar file JavaScript JavaScript tujuan.

104
00:06:36,720 --> 00:06:41,580
Ini bukan suatu keharusan, tetapi membuatnya mudah untuk menemukan gaya yang termasuk dalam komponen ini.

105
00:06:41,880 --> 00:06:47,160
Ingatlah bahwa gaya tidak dibatasi secara otomatis ke komponen, meskipun aturan normal seperti itu

106
00:06:47,220 --> 00:06:52,860
diterapkan karena semua C ini sebagai berikut, di mana pun Anda mengimpornya, diterapkan secara global ke

107
00:06:52,890 --> 00:06:54,120
seluruh halaman Anda.

108
00:06:54,960 --> 00:06:57,540
Namun, dengan itu, kita kembali ke hasil yang sama seperti sebelumnya.

109
00:06:58,020 --> 00:06:59,220
Jadi mengapa kita melakukan itu?

110
00:06:59,290 --> 00:07:02,280
Dan mengapa kita membagi ini jika kita memiliki hasil yang sama seperti sebelumnya?