1
00:00:02,070 --> 00:00:07,410
Jadi di layar daftar tempat, saya ingin menampilkan daftar tempat yang tidak mengejutkan dan untuk itu Anda tahu

2
00:00:07,550 --> 00:00:09,780
satu komponen dari Bereaksi Asli yang dapat

3
00:00:09,780 --> 00:00:14,010
kami impor dan itulah daftar datar. Daftar datar tentu saja sempurna

4
00:00:14,040 --> 00:00:15,620
untuk menghasilkan daftar.

5
00:00:15,780 --> 00:00:18,570
Jadi di sini saya akan mengembalikan daftar datar

6
00:00:18,900 --> 00:00:21,890
sekarang dan saya ingin mendapatkan akses ke tempat saya.

7
00:00:21,930 --> 00:00:23,970
Ini disimpan di Redux sehingga

8
00:00:23,970 --> 00:00:30,960
kami dapat atau dengan bantuan Redux, sehingga kami dapat mengimpor Bereaksi Redux di sini atau tepatnya, dari paket itu, kami

9
00:00:30,960 --> 00:00:37,740
mengimpor pemilih penggunaan karena sekarang dalam komponen kami, kami dapat menggunakannya untuk mendapatkan akses ke data disimpan di Redux.

10
00:00:37,740 --> 00:00:41,630
Jadi di sini, saya ingin mendapatkan akses ke tempat saya dengan

11
00:00:41,640 --> 00:00:47,190
bantuan pemilih penggunaan, itu mudah, kami melewati fungsi yang menerima toko Redux kami, keadaan Redux

12
00:00:47,190 --> 00:00:53,490
kami yang disimpan di toko di sana dan di sana saya ingin mendapatkan akses ke tempat mengiris dan

13
00:00:53,490 --> 00:00:59,880
di sini saya menggunakan tempat karena di app. js, saya menggunakan tempat sebagai pengidentifikasi di sini, yang membawa kami ke irisan yang dikelola

14
00:01:00,240 --> 00:01:02,880
dengan peredam tempat dan dalam peredam itu, kami memiliki kunci tempat lain,

15
00:01:03,000 --> 00:01:09,870
jadi pada akhirnya di sini saya ingin mengakses status. tempat tempat dan dengan itu, kita tahu jenis

16
00:01:09,870 --> 00:01:12,660
data apa yang ingin kita masukkan ke daftar datar.

17
00:01:12,660 --> 00:01:19,800
Sekarang lagi, saya juga akan menambahkan extractor kunci di sini untuk memberi tahu daftar datar di mana menemukan ID unik untuk

18
00:01:19,800 --> 00:01:23,480
setiap item dan bagi saya itu ada di properti ID setiap

19
00:01:23,490 --> 00:01:29,820
tempat dan tentu saja kita perlu menambahkan render item, sehingga kita mendapatkan data barang data kami dan kemudian menampilkan

20
00:01:29,820 --> 00:01:32,920
komponen untuk setiap item yang ingin kami hasilkan.

21
00:01:33,060 --> 00:01:38,730
Sekarang untuk itu, saya akan benar-benar membuat komponen baru di folder

22
00:01:38,790 --> 00:01:47,910
komponen dan itulah PlaceItem. file js. Sekarang untuk menghemat waktu, saya lampirkan PlaceItem saya. File js ke kuliah ini dan Anda bisa mengganti

23
00:01:48,180 --> 00:01:53,040
milik Anda atau konten Anda dengan milik saya tapi tentu saja saya akan memandu Anda melalui apa yang saya lakukan

24
00:01:53,040 --> 00:01:53,790
di sana.

25
00:01:53,910 --> 00:01:59,520
Ini adalah komponen dasar karena kami juga membangunnya beberapa kali selama kursus ini, saya hanya memiliki

26
00:01:59,520 --> 00:02:05,460
komponen sendiri di sini yang dapat menampilkan gambar karena kami akan membutuhkannya nanti, yang kemudian memiliki tampilan

27
00:02:05,520 --> 00:02:09,240
dengan dua bagian teks yang akan duduk di sebelah gambar

28
00:02:09,270 --> 00:02:15,930
ini, berkat gaya yang saya terapkan di sana. Di sana, saya menampilkan judul dan alamat tempat itu,

29
00:02:15,930 --> 00:02:21,900
tentu saja itu informasi yang belum kami miliki tetapi kami akan menambahkan ini di seluruh modul ini dan kami

30
00:02:21,900 --> 00:02:27,720
memiliki komponen opacity yang dapat disentuh di sekitar ini sehingga kami dapat menekan setiap tempat dan kapan kami

31
00:02:27,720 --> 00:02:31,400
menekannya, kami memicu fungsi yang kami harapkan untuk mendapatkan pada prop pilih.

32
00:02:31,440 --> 00:02:36,990
Sekarang dalam gaya saya di sini, saya mengatur ini sehingga gambar dan blok teks ini duduk

33
00:02:36,990 --> 00:02:43,230
bersebelahan di satu baris di sini dengan baris arah fleksibel, gambar tersebut kemudian gambar bulat, jadi itu adalah

34
00:02:43,230 --> 00:02:49,860
gambar bulat, itu adalah lingkaran dengan warna latar belakang penuh jika kita belum memiliki gambar yang tentu saja Anda

35
00:02:49,860 --> 00:02:56,310
juga dapat berubah menjadi misalnya warna keabu-abuan ini. Kemudian kita memiliki wadah info yang merupakan wadah

36
00:02:56,310 --> 00:03:01,590
menampung dua potongan teks yang sekarang disusun dalam kolom di atas satu sama lain

37
00:03:02,010 --> 00:03:07,290
dan kemudian kita memiliki judul yang sedikit lebih besar dari alamat dan di sana,

38
00:03:07,290 --> 00:03:14,210
saya sebenarnya juga ingin menggunakan hitam sebagai warna teks. Itulah pengaturan yang akan saya gunakan di sini

39
00:03:14,210 --> 00:03:17,330
dan itu adalah item tempat yang sekarang

40
00:03:17,330 --> 00:03:27,850
dapat kita impor ke layar daftar tempat, jadi di sana kita dapat mengimpor item tempat dari komponen item tempat dan menampilkannya di sini dalam item render.

41
00:03:27,850 --> 00:03:34,780
Jadi di sana saya ingin menampilkan item tempat sebagai komponen penutup sendiri dan sekarang item tempat, komponen

42
00:03:34,780 --> 00:03:40,630
baru ini memerlukan beberapa data input. Kita harus memasukkan prop terpilih yang menunjuk

43
00:03:40,630 --> 00:03:47,560
pada fungsi yang harus dijalankan ketika kita mengetuk ikon. Kita harus memasukkan prop gambar, prop judul dan prop alamat, sehingga

44
00:03:47,560 --> 00:03:53,730
empat prop yang perlu disediakan. Jadi mari kita lakukan di sini. Untuk gambar, kami belum mendapatkan gambar, jadi

45
00:03:53,740 --> 00:03:59,500
di sini saya hanya akan memberikan nol untuk saat ini. Untuk judul, kita bisa melakukannya tentu saja,

46
00:03:59,590 --> 00:04:06,010
kita bisa menunjuk pada itemData. barang. judul karena satu item hanyalah item yang mengikuti

47
00:04:06,010 --> 00:04:13,100
model tempat kami dan tentu saja memiliki judul prop, sehingga kami dapat mengaksesnya dengan aman. Untuk alamatnya, kami belum memilikinya, jadi saya akan mengatur

48
00:04:13,100 --> 00:04:14,470
ini menjadi

49
00:04:14,780 --> 00:04:16,260
nol dan untuk

50
00:04:16,280 --> 00:04:18,440
dipilih, tentu saja kita dapat

51
00:04:18,440 --> 00:04:19,940
mengatur ini, di sana

52
00:04:19,970 --> 00:04:25,070
saya ingin pergi ke halaman baru. Jadi kita dapat melakukan ini dengan fungsi inline anonim di sini atau dengan

53
00:04:25,070 --> 00:04:26,750
fungsi bernama disimpan dalam konstanta terpisah, apa pun

54
00:04:27,200 --> 00:04:28,300
yang Anda inginkan, saya

55
00:04:28,610 --> 00:04:35,440
akan melakukannya inline dan di sana saya dapat menggunakan alat peraga. navigasi. navigasi dan pergi ke layar detail tempat

56
00:04:35,450 --> 00:04:40,580
dengan pengenal detail tempat yang tentu saja di navigator saya adalah pengidentifikasi ini di sana-sini saya

57
00:04:43,380 --> 00:04:43,950
juga

58
00:04:43,980 --> 00:04:50,610
ingin memberikan beberapa data tambahan, beberapa param, jadi saya akan memberikan argumen kedua di sini untuk menavigasi dan ada dua informasi

59
00:04:50,610 --> 00:04:52,860
yang ingin saya sampaikan, itulah judul tempat

60
00:04:52,860 --> 00:04:57,680
dan tentu saja itemData. barang. judul, jadi hal yang

61
00:04:57,750 --> 00:05:01,770
sama persis saya makan ke prop judul di sini dan itu juga

62
00:05:01,770 --> 00:05:06,650
ID tempat yang merupakan itemData. barang. id dan kami sudah

63
00:05:06,720 --> 00:05:08,890
memiliki ID itu juga, jadi itu sudah

64
00:05:08,910 --> 00:05:14,640
sesuatu yang kami hasilkan ketika kami menambahkan tempat baru. Dengan itu, kita memiliki item tempat yang membawa

65
00:05:14,640 --> 00:05:19,800
kita ke layar detail tempat dan karena kita sudah memiliki kerangka dasar di layar

66
00:05:19,950 --> 00:05:21,890
itu, kita harus dapat melihatnya.

67
00:05:21,960 --> 00:05:28,170
Satu hal yang saya akan tambahkan ke layar detail tempat adalah konfigurasi opsi navigasi saya di

68
00:05:28,170 --> 00:05:34,950
mana saya memerlukan fungsi dinamis yang kemudian mengembalikan objek konfigurasi karena di sana saya ingin mengatur judul header

69
00:05:34,950 --> 00:05:41,040
berdasarkan params yang saya dapatkan karena dalam daftar tempat layar, saya meneruskan judul tempat dan

70
00:05:41,040 --> 00:05:47,070
parameter ID tempat ke layar baru ini. Judul tempat adalah apa yang ingin saya ekstrak dan atur di sini

71
00:05:47,070 --> 00:05:47,890
di tajuk,

72
00:05:47,940 --> 00:05:56,040
sehingga di sana saya dapat mengatur judul tajuk ke navData. navigasi. judul tempat getParam sehingga

73
00:05:56,070 --> 00:06:02,910
kami memiliki judul ini di header. Dan sekarang dengan itu, mari kita coba,

74
00:06:02,910 --> 00:06:11,230
mari kita simpan semuanya dan tambahkan tempat baru, ujian. Klik simpan tempat, kami kembali dan kami melihatnya di sini jika saya mengetuknya,

75
00:06:11,230 --> 00:06:18,100
kami pergi ke layar detail tempat kami melihatnya di tajuk. Mari kita coba juga di Android

76
00:06:18,700 --> 00:06:26,070
dengan tes, simpan ini, klik dan semuanya berfungsi. Jadi itulah aliran dasar untuk ini tetapi satu hal

77
00:06:26,070 --> 00:06:30,300
yang masih belum kita lakukan tentu saja adalah menggunakan beberapa fungsi asli.

78
00:06:30,570 --> 00:06:34,710
Jadi sekarang saatnya kita melakukan itu dan saya ingin memulai dengan kamera.