1
00:00:02,250 --> 00:00:09,030
Agar terlampir untuk menemukan proyek awal, proyek awal ini dibuat dengan aplikasi Create React, alat

2
00:00:09,150 --> 00:00:11,820
yang dibuat oleh tim React.

3
00:00:11,880 --> 00:00:18,510
Pada akhirnya, yang membuatnya mudah untuk memunculkan proyek reaksi baru dan memberi kami struktur proyek seperti ini.

4
00:00:18,630 --> 00:00:22,980
Saya menyesuaikan sedikit, tetapi secara umum persis sama dengan yang Anda dapatkan dari alat ini.

5
00:00:23,460 --> 00:00:25,550
Sekarang, mengapa kita membutuhkan alat seperti itu?

6
00:00:25,560 --> 00:00:28,020
Mengapa kita tidak mengimpor saja script di H. kami

7
00:00:28,020 --> 00:00:29,580
File HTML dan mulai?

8
00:00:30,120 --> 00:00:33,660
Karena Bereaksi sedikit lebih kompleks daripada JavaScript vanili.

9
00:00:33,840 --> 00:00:39,660
Pada akhirnya, kami mengirimkan kode JavaScript vanilla, tetapi cara kami menulis ke kode sedikit lebih nyaman bagi

10
00:00:39,690 --> 00:00:40,770
kami sebagai pengembang.

11
00:00:41,070 --> 00:00:46,620
Kita dapat menggunakan fitur-fitur tertentu yang tidak dapat berjalan di browser dan oleh karena itu pengaturan proyek

12
00:00:46,620 --> 00:00:52,680
ini di sini memiliki beberapa alat termasuk yang mengambil kode yang kita tulis sebagai pengembang dan benar-benar mengubahnya menjadi

13
00:00:52,680 --> 00:00:54,480
kode yang berjalan di browser.

14
00:00:54,570 --> 00:00:57,960
Jadi, apakah kita memiliki Neuroma, kode yang dijalankan di browser?

15
00:00:58,320 --> 00:01:01,710
Tetapi kami memiliki waktu yang lebih mudah menulis kode itu sebagai pengembang.

16
00:01:02,220 --> 00:01:07,800
Selain itu, kami mendapatkan server pengembangan, yang merupakan server sederhana yang melayani aplikasi ujung depan kami sehingga tidak

17
00:01:07,860 --> 00:01:13,020
memiliki punggung dan hanya melayani di depan aplikasi itu dan yang secara otomatis memuat ulang atau menyuntikkan

18
00:01:13,020 --> 00:01:18,060
perubahan setiap kali kami mengubah dan menyimpan sesuatu di salah satu sumber kami file kode.

19
00:01:18,780 --> 00:01:23,950
Selain itu, di sini dengan REACT, kami sedang membangun aplikasi satu halaman.

20
00:01:24,060 --> 00:01:29,040
Itu tidak harus dilakukan, tetapi itu adalah pilihan umum dalam satu aplikasi halaman.

21
00:01:29,370 --> 00:01:34,710
Anda hanya memiliki satu file H Timal, yang pada akhirnya dikembalikan oleh server yang melayani aplikasi itu.

22
00:01:34,890 --> 00:01:39,360
Dalam hal ini, ini file Timmo usia, yang itu sendiri relatif kosong.

23
00:01:39,930 --> 00:01:44,490
Namun file ini nantinya akan menyertakan impor skrip.

24
00:01:44,620 --> 00:01:50,370
Mereka akan ditambahkan secara otomatis oleh alat-alat ini yang saya sebutkan sebelumnya, yang pada akhirnya host

25
00:01:50,430 --> 00:01:56,280
dan menjalankan aplikasi reaksi kami, yang pada gilirannya kami di sini di folder sumber dengan file kami,

26
00:01:57,000 --> 00:02:03,420
kami tiba di sana sehingga pada akhirnya kami memiliki aplikasi web dari Front End, yang terdiri dari satu file

27
00:02:03,420 --> 00:02:09,450
html di mana Denn JavaScript digunakan untuk membuat sesuatu di layar dan membuat ulang sesuatu di layar

28
00:02:09,750 --> 00:02:10,740
saat dibutuhkan.

29
00:02:11,250 --> 00:02:17,910
Dan itu memungkinkan kita untuk membangun antarmuka pengguna modern yang sangat reaktif di mana semuanya terjadi secara instan

30
00:02:18,030 --> 00:02:21,480
karena JavaScript menjalankan browser, semuanya terjadi secara instan.

31
00:02:21,570 --> 00:02:25,530
Kami tidak perlu menunggu file L baru diunduh dari server.

32
00:02:25,950 --> 00:02:27,510
Semua sudah ada di sana.

33
00:02:27,570 --> 00:02:33,270
Jadi ketika pengguna mengklik tombol dan kami ingin menampilkan kotak di layar sebagai tanggapan terhadap boom klik itu,

34
00:02:33,540 --> 00:02:35,730
itu terjadi secara instan karena JavaScript.

35
00:02:36,090 --> 00:02:37,530
Itulah perasaan yang ingin kami berikan.

36
00:02:37,900 --> 00:02:40,110
Kita bisa melakukannya dengan bereaksi sekarang.

37
00:02:40,200 --> 00:02:41,700
Cukup berbicara tentang teorinya.

38
00:02:42,030 --> 00:02:42,990
Mari kita menulis beberapa kode.

39
00:02:43,350 --> 00:02:47,940
Seperti yang saya sebutkan, kami melakukannya di sini di folder sumber tempat kami menemukan diindeks ke file-nya

40
00:02:47,940 --> 00:02:50,370
di file aplikasi Chase, keduanya file yang sangat sederhana.

41
00:02:50,970 --> 00:02:53,100
Sekarang mari kita lihat ponsel peluang yang diindeks

42
00:02:53,340 --> 00:02:56,010
Begini, kami memiliki beberapa impor di bagian atas.

43
00:02:56,310 --> 00:02:59,610
Omong-omong, inilah cara Anda mengimpor kode di ujung depan.

44
00:03:00,150 --> 00:03:05,550
Impor sesuatu dari lalu Śiva jalur relatif ke file Anda sendiri.

45
00:03:05,700 --> 00:03:08,820
Atau jika itu adalah paket pihak ketiga, hanya nama paket.

46
00:03:09,780 --> 00:03:13,080
Dan kemudian di sini kita memiliki impor dari file kita sendiri dengan jalur relatif.

47
00:03:13,170 --> 00:03:16,800
Seperti yang saya sebutkan maka di sini kita menjalankan satu perintah pada akhirnya.

48
00:03:16,980 --> 00:03:18,660
Bereaksi Dom render.

49
00:03:19,740 --> 00:03:24,990
Sekarang, ini datang dari objek React Dom di sini di akhir, yang

50
00:03:24,990 --> 00:03:31,110
kami impor dari perpustakaan React Arm, dan itu membuat hal aneh ini, yang bukan JavaScript biasa.

51
00:03:31,490 --> 00:03:31,760
Itu kamu.

52
00:03:31,800 --> 00:03:33,900
Ini bermain di H. kami M. halaman.

53
00:03:34,290 --> 00:03:35,900
Ini adalah JavaScript biasa.

54
00:03:35,910 --> 00:03:39,110
Dan di sini kita memilih elemen dengan ide root.

55
00:03:39,510 --> 00:03:42,990
Jika kita melihat file HGL tunggal kita, itu adalah Dave di sini.

56
00:03:43,110 --> 00:03:48,270
Jadi data pada akhirnya di mana aplikasi satu halaman reaksi kami akan dihosting di dua.

57
00:03:48,600 --> 00:03:52,710
Dan mereka akan bereaksi, akan mengambil alih dan membuat segalanya di tempat itu.

58
00:03:53,940 --> 00:03:55,230
Jadi itulah yang kami lakukan di sini.

59
00:03:55,260 --> 00:03:58,290
Tapi apa yang aneh bagi ayah?

60
00:03:58,310 --> 00:04:01,500
Kita perlu memahami komponen apa itu dan bagaimana reaksinya bekerja.