Untuk melihat dan mengedit kode kami, kami memerlukan editor dan saya sarankan menggunakan Visual Studio Code yang merupakan
bebas untuk digunakan, IDE yang sangat kuat yang bagus untuk pengembangan Javascript, yang pada akhirnya kami lakukan
di sini.
Anda bisa mendapatkannya dari kode. Studio visual. com di
sana Anda menemukan versi untuk Mac, Windows dan Linux, cukup unduh satu untuk sistem
operasi Anda dan berjalan melalui installer ini memberi Anda. Setelah Anda menginstalnya, buka Visual Studio Code
dan di sana, buka proyek Anda dengan membuka file dan kemudian hanya memilih proyek
Anda, dalam kasus saya, rn-first-app. Klik buka di sini dan ini sekarang
akan membuka proyek di sini di Visual Studio Code. Sekarang Visual Studio Code saya terlihat seperti itu terlihat di sini karena saya memiliki tema
khusus yang diaktifkan yang dapat Anda ubah di bawah preferensi, tema warna dan di sana saya menggunakan tema plus gelap.
Jadi jika Anda ingin memiliki tampilan
yang sama Anda dapat menggunakan itu dan saya juga menginstal ekstensi khusus yang dapat Anda lakukan di
bawah tampilan ekstensi, di sana saya mendapat tema ikon materi diinstal, yang ini di sini yang benar-benar opsional tetapi Anda dapat
menginstalnya dari di
sana juga dan kemudian kembali untuk melihat explorer untuk melihat file
Anda lagi sehingga Anda mendapatkan ikon file
yang sama seperti yang saya miliki di sini, sekali lagi ini benar-benar opsional dan dengan itu, aplikasi React Native kami dikelola oleh expo.
Sekarang izinkan saya dengan cepat memandu Anda melalui apa yang kami miliki di sini dan kemudian menunjukkan kepada Anda apa yang dapat
Anda ubah dalam kode untuk mengubah sesuatu di aplikasi Anda.
Sekarang kami memiliki beberapa folder dan file
di sini, file. folder expo cukup tahan
beberapa konfigurasi untuk expo, Anda tidak perlu menyentuh ini. Folder aset, yang menampung beberapa gambar dalam kasus ini, seperti
ikon aplikasi Anda dan gambar splash screen dan kami akan menyelami bagaimana Anda dapat menyesuaikan ini di akhir kursus dan kami akan menggunakan
aset lain seperti gambar di umum sepanjang kursus ini tentu saja. Folder modul simpul menampung semua dependensi dari
proyek ini, itu misalnya Bereaksi dan Bereaksi Asli tetapi juga dependensi dependensi dan folder ini
dikelola secara otomatis untuk Anda sehingga Anda tidak perlu menyentuh ini dan
Anda tidak harus menyentuhnya memang . gitignore adalah file yang membantu kami dengan git yang
merupakan sistem manajemen kode sumber atau alat manajemen kode sumber dan Anda tidak perlu menggunakan git, jika Anda
melakukannya, Anda mungkin tahu apa yang gitignore lakukan dan jika Anda tidak tahu apa git adalah, setelah kuliah ini,
Anda akan menemukan pengantar singkat untuk itu atau beberapa sumber daya yang membantu Anda memulai dengan itu tetapi Anda tidak
perlu menggunakan git untuk bekerja dengan React Native. Watchmenconfig, itu adalah sesuatu yang dapat Anda abaikan karena Anda melihatnya kosong di sini, ini
adalah alat yang digunakan di belakang layar oleh expo pada akhirnya dan aplikasi. file js lalu file yang
menyimpan kode yang bertanggung jawab untuk menampilkan apa yang kita lihat di sini di layar.
Kami akan menyelami ini dalam satu detik, aplikasi. json mengadakan beberapa konfigurasi untuk aplikasi React Native kami yang didukung oleh expo
dan kami akan menyelami ini di sepanjang kursus ini juga untuk saat ini, mari abaikan saja. Konfigurasi Babel mengkonfigurasi bagaimana kode Javascript
dioptimalkan dan dikompilasi, Anda dapat meninggalkan default di sini
juga dan paket. file json mengelola dependensi Anda dan di
sana Anda melihat bahwa Anda menggunakan expo tetapi juga Bereaksi, juga Bereaksi DOM karena expo sebenarnya juga mendukung pembangunan aplikasi Bereaksi untuk web
tetapi juga Bereaksi Pribumi di sini dan Bereaksi Pribumi karena sekali lagi, expo memberi Anda opsi juga membangun aplikasi
web dengan bantuan React Native, itu bukan sesuatu yang akan kita fokuskan dalam kursus ini.
Jadi itulah pengaturan yang kami miliki
di sini, file penting bagi kami saat ini adalah aplikasi. File js karena pada akhirnya bertanggung jawab
untuk mendapatkan sesuatu ke layar.
Sekarang konten file persis yang Anda lihat di sini di aplikasi Anda. File js dapat berubah dari waktu
ke waktu, proyek awal ini yang dihasilkan secara otomatis kadang-kadang diubah.
Itu tentu saja tidak mempengaruhi apa yang saya jelaskan di sini atau kursus ini, itu tidak berarti bahwa
apa pun sudah usang atau
semacamnya, itu hanya proyek awal yang berbeda
dan jika Anda ingin mengikuti dengan persis sama dengan yang saya dapatkan, Anda Saya akan menemukannya terlampir, jadi Anda juga
dapat menggunakannya tetapi tentu saja, Anda juga dapat melanjutkan dengan pemirsa jika terlihat sedikit berbeda
karena seperti yang saya sebutkan, itu hanya proyek awal
yang Anda punya, React Native tentu saja masih bekerja sama dengan Saya menjelaskannya di sini dan
karena itu Anda benar-benar dapat mengikuti dan menambahkan aplikasi Anda. File js persis seperti yang saya tambahkan dan di
sana kita melihat kita mengimpor Bereaksi seperti yang akan kita lakukan di aplikasi web Bereaksi.
Kita perlu mengimpor Bereaksi karena di sini, Anda juga dapat melihat kami menggunakan jsx yang merupakan
sintaksis Javascript khusus ini
yang terlihat seperti HTML tetapi pada akhirnya
hanya Javascript dan jika Anda tidak pernah melihat ini, pasti terjun ke aplikasi Bereaksi atau Bereaksi tutorial
pertama, saya berharap Anda tahu bagaimana Bereaksi umumnya bekerja.
Kami selalu memiliki impor lain di sini dan itulah impor Bereaksi Asli tempat kami mengimpor stylesheet,
teks, dan tampilan dari sana.
Sekarang ini adalah komponen dan fitur khusus yang saya bicarakan sebelumnya, teks dan tampilan adalah komponen yang
disediakan oleh React Native yang dikompilasi ke widget platform asli dan stylesheet adalah fitur tambahan yang disediakan oleh
React Native yang membantu Anda dalam menata gaya.
Sekarang di sini, kami memiliki komponen Bereaksi normal karena kami juga akan membuatnya dalam aplikasi Bereaksi untuk web.
Kami memiliki komponen fungsional di sini dan dengan bantuan React hooks, kami dapat bekerja dengan komponen
fungsional hanya karena Anda mungkin tahu dan komponen fungsional ini mengembalikan beberapa kode JSX yang dirender ke
layar dan
di sini kami menggunakan widget tampilan atau komponen tampilan yang disediakan oleh React Native dan komponen
teks dan komponen tampilan seperti div,
itu pembungkus yang baik, juga baik untuk menerapkan beberapa gaya untuk beberapa wadah dan mendeteksi kemudian digunakan untuk menghasilkan
beberapa teks yang Anda tempatkan di antara pembukaan dan tag penutup.
Dan di sini, kami memiliki beberapa gaya yang ditentukan, React Native tidak menggunakan CSS tetapi menggunakan sintaks
styling yang didasarkan pada CSS atau mengikuti konvensi penamaan yang serupa, tetapi kami akan menyelami lebih dalam bagaimana cara mendesain
aplikasi React Native Anda sepanjang kursus ini. tentu saja.
Maka dengan itu, mari kita ubah apa yang kita lihat di layar dan mari kita benar-benar menambahkan tombol di sini.
Sekarang hal baiknya adalah, kita dapat mengimpor tombol dari React Native, itu komponen inti lain yang disediakan oleh React Native, sehingga kita dapat
menambahkan impor ini dan kemudian menggunakan tombol di sana. Namun kita tidak menggunakannya dengan tag pembuka
dan penutup
tetapi sebagai elemen penutup sendiri dan kemudian kita dapat menambahkan prop judul di sini untuk mengatur
teks yang kita lihat pada tombol, misalnya mengubah teks.
Sekarang ketika kita mengetuk tombol ini, kita mungkin ingin mengubah teks ini di sini dan
untuk ini, kita perlu mengelola beberapa keadaan di sini karena saya ingin mengubah beberapa data yang akan
menyebabkan komponen ini dirender ulang dan untuk ini, Anda perlu keadaan .
Sekarang sebelum Bereaksi 16. 8 yang didukung di sini, Anda harus mengubahnya menjadi komponen berbasis
kelas untuk menggunakanState, karena Bereaksi 16. 8, kita dapat menggunakan
kait React dan jika Anda tidak tahu apa
itu kait, Anda pasti harus menyelam ke dasar-dasar kait, terpasang Anda menemukan
sumber daya yang membantu Anda memulai dengan itu. Kait diimpor dari Bereaksi dan di sini, kita memerlukan kait useState
yang memungkinkan kita mengelola status dalam komponen fungsional.
Dengan itu, kita dapat menggunakan hook itu dengan memanggil useState di sini dan memberikannya nilai default yang bisa berupa teks ini di sini, mari kita potong
dari sana dan tambahkan
di sini sebagai string dan kemudian di sini kita dapat menggunakan array destrrukturisasi untuk mendapatkan output kita. teks dan
dapatkan fungsi untuk mengubah atau mengatur ulang atau mengganti teks keluaran ini dan begitulah cara useState hook bekerja, itu
memberi Anda sebuah array dengan tepat dua
elemen, di mana elemen pertama adalah snapshot keadaan Anda saat ini, jadi baik keadaan awal kita
atau sesudahnya untuk siklus re-render berikutnya, apa pun yang kita atur status kita dan yang kedua adalah
fungsi
yang memungkinkan Anda untuk mengatur negara Anda ke nilai baru dan memanggil fungsi itu
akan merender ulang seluruh komponen dan teks keluaran kemudian akan merujuk ke yang terbaru negara baru.
Jadi di sini di antara teks, saya ingin menampilkan teks keluaran dan setelah menekan tombol ini,
saya ingin mengubah ini.
Jadi pada tombol, kita dapat mendaftar onPress yang pada dasarnya setara dengan onClick yang
akan kita miliki
di web, ini onPress dan kemudian kita perlu mengikat ini ke suatu fungsi, misalnya ke fungsi
inline anonim di sini dengan sintaks ini tempat kita memanggil set output text dan kita atur ini ke text berubah.
Jadi ini akan memanggil fungsi ini di sini, menimpa keadaan kita, karena itu render kembali komponen
ini, ini akan diperbarui dalam siklus render berikutnya dan karena itu karena kita menampilkan teks keluaran di
sana, ini akan berubah. Jika sekarang kita menyimpan
semua itu, yang paling keren adalah aplikasi Anda yang seharusnya masih dibuka di ponsel Anda secara otomatis dimuat
ulang,
Anda tidak perlu
memulai ulang, Anda tidak perlu memindai kode ini lagi, cukup dengan mengubah kode dan menyimpan file ini,
itu harus secara otomatis memuat ulang di sini. Dan sekarang jika sekarang kita ketuk ubah teks di sini, Anda
melihat teks berubah dan itulah aplikasi React Native pertama Anda melakukan tugasnya
didukung oleh expo tapi sekali lagi Anda dapat membangun dan menerbitkan ini sebagai aplikasi mandiri dan kami akan
melakukannya pada akhir kursus dan karenanya ini adalah cara yang menakjubkan untuk memulai dan Bereaksi pengembangan asli bisa
semudah itu.
Sekarang dengan itu, mari selesaikan modul pertama ini sebelum kita menyelam lebih dalam ke React Native
dan menulis React Native code dari modul course kedua.