1
00:00:02,350 --> 00:00:09,690
Jadi dengan itu, mari kita mulai dengan aplikasi kita di sini dan ada berbagai cara untuk memulai tentu

2
00:00:09,700 --> 00:00:10,520
saja,

3
00:00:10,690 --> 00:00:19,420
saya ingin memulai dengan pertama-tama menjatuhkan gaya wadah ini di sini di layar awal saya dan sebagai gantinya, saya ingin menyingkirkan teks

4
00:00:19,960 --> 00:00:25,060
dan semuanya di sini dan saya ingin memulai dengan menambahkan tajuk saya sendiri,

5
00:00:25,060 --> 00:00:27,790
jadi bilah ini di bagian atas layar.

6
00:00:28,150 --> 00:00:34,360
Sekarang kita dapat membuat bilah seperti itu sendiri di sini, biarkan saya menyingkirkan impor yang tidak kita

7
00:00:34,360 --> 00:00:39,880
perlukan dan saya akan membuatnya bukan di dalam komponen aplikasi ini tetapi di file komponen

8
00:00:39,880 --> 00:00:46,630
terpisah, dalam komponen khusus yang terpisah karena dan itu sudah satu hal super penting untuk diambil, seperti dalam

9
00:00:46,630 --> 00:00:47,630
Bereaksi untuk

10
00:00:47,680 --> 00:00:55,360
aplikasi web, itu adalah praktik yang baik untuk membagi aplikasi Anda menjadi beberapa komponen yang kemudian Anda susun bersama karena itu

11
00:00:55,360 --> 00:00:59,540
mengarah pada kode yang lebih mudah dikelola dan dapat digunakan kembali.

12
00:00:59,540 --> 00:01:04,660
Jadi saya akan menambahkan folder baru, komponen, nama terserah Anda, Anda dapat memberi nama folder itu apa pun yang Anda

13
00:01:04,910 --> 00:01:09,360
inginkan dan di sana saya ingin memiliki header. File js untuk memegang komponen header.

14
00:01:09,490 --> 00:01:14,490
Di sana, kita perlu mengimpor Bereaksi dari Bereaksi sehingga kita dapat menggunakan Bereaksi

15
00:01:14,500 --> 00:01:23,300
di sana dan menulis kode jsx dan kemudian kita juga akan memerlukan beberapa komponen dari Bereaksi Asli karena Anda tidak boleh lupa bahwa

16
00:01:23,300 --> 00:01:27,650
ini adalah satu-satunya komponen inti yang dapat Anda gunakan di akhir.

17
00:01:27,650 --> 00:01:31,310
Anda tidak dapat menggunakan elemen HTML web apa pun atau semacamnya,

18
00:01:31,310 --> 00:01:34,720
Anda membutuhkan primitif inti ini React Native memberi Anda.

19
00:01:34,850 --> 00:01:40,290
Jadi kita pasti membutuhkan tampilan di sini dan juga komponen teks dan juga komponen stylesheet dan sekarang

20
00:01:40,520 --> 00:01:43,420
dengan itu, kita bisa mulai membangun header kita.

21
00:01:43,550 --> 00:01:51,890
Jadi untuk ini, saya akan menambahkan konstanta tajuk yang memegang komponen fungsional saya karena saya akan bekerja dengan komponen fungsional hanya dalam

22
00:01:51,890 --> 00:01:58,560
kursus ini, kita akan menggunakan kait di tempat-tempat di mana kita perlu mengelola efek negara atau efek

23
00:01:58,620 --> 00:02:06,170
samping dan di sini, kita akan tentu saja mengekspor komponen ini pada akhirnya dan juga mengatur objek gaya dengan

24
00:02:06,170 --> 00:02:10,460
style sheet buat sehingga kita bisa gaya ini pada akhirnya.

25
00:02:10,520 --> 00:02:13,020
Sekarang mari kita buat komponen kita di sini, mari

26
00:02:13,040 --> 00:02:14,580
kita kembalikan sesuatu di sini dan

27
00:02:14,750 --> 00:02:19,120
apa yang ingin saya kembalikan adalah pada akhirnya tampilan dengan teks di dalamnya dan teks harus

28
00:02:19,120 --> 00:02:20,190
menjadi judul kita.

29
00:02:20,300 --> 00:02:26,780
Jadi oleh karena itu antara tag pembuka dan penutup di sini, saya akan menampilkan judul alat peraga sehingga komponen kita

30
00:02:26,780 --> 00:02:34,010
sendiri dapat menerima judul prop dan menampilkan ini di sini. Dan tampilan di sekitar teks akan digunakan untuk

31
00:02:34,010 --> 00:02:40,790
memposisikan teks dan untuk memberikan gaya ini, jadi untuk menata tajuk kami karena elemen teks sendiri juga

32
00:02:40,880 --> 00:02:47,960
bergaya tetapi tidak pada tingkat yang sama seperti tampilan, tampilan benar-benar sedikit lebih fleksibel mengenai gaya yang dapat

33
00:02:47,960 --> 00:02:53,090
Anda tetapkan dan tentang bagaimana perilakunya dan oleh karena itu, Anda selalu

34
00:02:53,120 --> 00:02:59,600
ingin menggunakan tampilan untuk wadah di sekitarnya dan untuk penataan keseluruhan ini yang mungkin dimiliki komponen

35
00:02:59,600 --> 00:03:02,380
Anda atau bagian dari komponen Anda.

36
00:03:02,390 --> 00:03:08,810
Jadi di sini, saya akan menambahkan prop gaya dan menetapkan gaya untuk objek gaya saya, gaya yang belum kita buat di sana

37
00:03:08,810 --> 00:03:16,810
tapi saya akan beri nama header dan saya juga akan memberikan teks gaya prop dan menunjuk ke judul gaya header atau apa pun yang Anda ingin nama itu

38
00:03:16,820 --> 00:03:21,500
karena seperti yang saya katakan, Anda dapat gaya teks juga dan di sini saya ingin memiliki

39
00:03:21,500 --> 00:03:28,360
beberapa gaya teks tertentu nanti juga memastikan bahwa teks terlihat bagus. Jadi sekarang di sini di stylesheet, kita bisa mulai menata

40
00:03:28,450 --> 00:03:35,170
header kita dan saya akan mulai dengan header itu sendiri, dengan menambahkan prop header dan kemudian objek ini akan

41
00:03:35,170 --> 00:03:40,810
menyimpan definisi gaya ini untuk header, jadi untuk komponen tampilan ini di sana-sini tentu saja, Anda

42
00:03:40,810 --> 00:03:46,960
bebas bereksperimen dengan apa pun yang Anda inginkan. Saya akan pergi dengan lebar 100% sehingga

43
00:03:47,080 --> 00:03:53,470
dibutuhkan lebar perangkat penuh yang bisa kita dapatkan atau lebar penuh dari komponen induk menjadi tepat, tetapi saya

44
00:03:53,470 --> 00:03:58,810
akan menambahkannya sehingga komponen induk mengambil lebar perangkat penuh dan oleh karena itu ,

45
00:03:58,840 --> 00:04:05,040
ini juga akan mengambil lebar perangkat penuh pada akhirnya. Tetapkan ketinggian dan di sana, Anda dapat bereksperimen dengan

46
00:04:05,040 --> 00:04:10,020
nilai yang berbeda, saya menemukan 90 terlihat cukup baik dan karena itu saya akan pergi dengan itu.

47
00:04:10,020 --> 00:04:16,500
Catatan tambahan, untuk saat ini saya akan mengoptimalkan untuk layar-layar ini yang saya miliki di sini, dalam

48
00:04:16,500 --> 00:04:23,610
modul kursus berikutnya, kita akan membahas bagaimana Anda dapat menyesuaikan tampilan dan kode Anda untuk perangkat yang berbeda, baik

49
00:04:23,610 --> 00:04:30,690
mengenai ukurannya maupun mengenai platform kode Anda sedang berjalan. Untuk saat ini, kami tidak akan memiliki perbedaan di sana,

50
00:04:30,690 --> 00:04:37,640
kami akan menyesuaikan juga di aplikasi kami agar terlihat bagus pada dua emulator ini, tetapi sekali lagi, saya akan membahasnya nanti.

51
00:04:37,830 --> 00:04:45,900
Jadi ketinggian 90, padding ke atas 36 untuk memiliki beberapa jarak ke atas dan saya perlu menambahkan ini pada

52
00:04:45,900 --> 00:04:53,130
dasarnya mengatasi atau hal-hal seperti status bar di sini atau kedudukan ini di sini, jadi karena

53
00:04:53,160 --> 00:05:00,200
itu saya menambahkan top padding ini dan saya juga ingin untuk menambahkan warna latar belakang di

54
00:05:00,360 --> 00:05:04,760
sini dan sekarang Anda tentu saja benar-benar bebas untuk

55
00:05:04,770 --> 00:05:13,350
memilih warna yang Anda inginkan, saya menyiapkan warna yang bagus, kode hex warna yang saya pribadi suka dan itu adalah

56
00:05:13,380 --> 00:05:21,450
# f7287b yang merupakan warna yang cukup bagus di saya pendapat seperti yang akan Anda lihat dalam sedetik.

57
00:05:21,460 --> 00:05:27,250
Sekarang saya juga ingin memusatkan judul dan karena itu, saya akan menggunakan item pelurusan

58
00:05:27,340 --> 00:05:33,280
dan justifyContent karena setiap tampilan secara default menggunakan flexbox dan oleh karena itu dengan menyelaraskan

59
00:05:33,280 --> 00:05:39,610
item dan justifyContent, kita dapat mengontrol bagaimana elemen anak dari tampilan diposisikan di dalam tampilan. dan

60
00:05:39,640 --> 00:05:40,780
dengan pusat

61
00:05:40,780 --> 00:05:48,010
untuk menyelaraskan item dan justifyContent juga diatur ke pusat, kami memusatkan semua anak atau elemen anak di dalam tampilan

62
00:05:48,010 --> 00:05:50,680
di tengah, baik secara horizontal maupun vertikal.

63
00:05:50,680 --> 00:05:52,480
Sekarang untuk judul tajuk,

64
00:05:52,480 --> 00:05:55,640
saya juga ingin mengatur beberapa gaya untuk ini.

65
00:05:55,780 --> 00:06:05,230
Jadi judul tajuk di sini, yang seharusnya mendapatkan warna hitam karena itu akan cocok dengan warna ini di sini dan agar kita dapat

66
00:06:05,260 --> 00:06:11,020
membaca teks dan saya ingin mengatur ukuran font menjadi 18 katakanlah, sehingga kita memperbaikinya,

67
00:06:11,050 --> 00:06:18,500
sedikit ukuran font yang lebih besar di sini. Dengan itu, mari kita coba gunakan tajuk ini dan

68
00:06:18,620 --> 00:06:26,550
mari kita gunakan di aplikasi. File js di sini. Di sana, kami memiliki

69
00:06:26,560 --> 00:06:31,070
tampilan ini dan tampilan ini tidak memiliki gaya.

70
00:06:31,150 --> 00:06:38,050
Saya akan mengubah ini dan mengatur tampilan layar di sini dan memberikannya satu atribut.

71
00:06:38,050 --> 00:06:44,090
Sekarang kita dapat menetapkan ini di sini dan melenturkan satu akan memastikan bahwa tampilan ini mengambil semua

72
00:06:44,140 --> 00:06:49,780
ruang yang bisa didapat dan karena itu adalah tampilan root aplikasi kita, itu berarti akan mengambil

73
00:06:49,780 --> 00:06:56,770
semua lebar dan tinggi yang bisa didapat, itu akan menempati penuh layar dan karena itu karena tajuk saya mengambil lebar

74
00:06:56,770 --> 00:07:03,730
100%, karena saya akan menambahkannya langsung di dalam tampilan ini yang sekarang dikonfigurasi untuk mengambil lebar dan tinggi penuh, tajuk

75
00:07:03,730 --> 00:07:06,360
ini juga akan mengambil lebar penuh.

76
00:07:06,370 --> 00:07:08,440
Jadi sekarang kita hanya perlu menambahkan header

77
00:07:08,440 --> 00:07:12,480
di sini, jadi impor header dari. / komponen / header, Anda

78
00:07:12,580 --> 00:07:20,020
dapat menghilangkan ekstensi file dan kemudian hanya menambahkan header sebagai tag penutup diri di sini tapi jangan lupa untuk mengatur

79
00:07:20,020 --> 00:07:25,120
prop judul karena ingat bahwa kami mengeluarkan prop judul di sini di antara

80
00:07:25,570 --> 00:07:33,120
tag teks, jadi kami dapat menambahkan judul di sini dan saya akan menyebutkannya menebak angka karena itulah tujuan permainan kami.

81
00:07:33,120 --> 00:07:39,210
Sekarang jika kita menyimpan ini, itu akan secara otomatis membangun kembali dan Anda akan melihat header yang terlihat seperti ini di iPhone dan seperti ini

82
00:07:39,240 --> 00:07:45,900
di sini di Android dan saya akan mengatakan tidak apa-apa untuk kedua perangkat. Sekali lagi, nanti kita akan mencari cara

83
00:07:46,290 --> 00:07:52,320
bagaimana Anda dapat menyempurnakan tampilan ke perangkat spesifik yang sedang dijalankan aplikasi Anda.