histats

Memulai project React Native yang pertama

Catatan: Halaman ini masih dalam proses penyuntingan.

Belajar dari dasarnya dulu

React Native seperti React, tetapi menggunakan komponen asli alih-alih komponen web sebagai blok bangunan. Jadi untuk memahami struktur dasar aplikasi React Native, Anda perlu memahami beberapa konsep React dasar, seperti BEJ, komponen, state , dan props . Jika Anda sudah tahu Bereaksi, Anda masih perlu mempelajari beberapa hal spesifik Bereaksi-Asli, seperti komponen asli. Tutorial ini ditujukan untuk semua audiens, apakah Anda memiliki pengalaman Bereaksi atau tidak.

Mari kita lakukan hal ini.

Halo Dunia

Sesuai dengan tradisi kuno orang-orang kita, pertama-tama kita harus membangun sebuah aplikasi yang tidak melakukan apa-apa kecuali mengatakan “Halo, dunia!”. Ini dia:

Jika Anda merasa ingin tahu, Anda dapat bermain-main dengan kode sampel langsung di simulator web. Anda juga dapat menempelkannya ke file App.js Anda untuk membuat aplikasi nyata di mesin lokal Anda.

Apa yang terjadi di sini?

Beberapa hal di sini mungkin tidak terlihat seperti JavaScript untuk Anda. Jangan panik. Inilah masa depan .

Pertama-tama, ES2015 (juga dikenal sebagai ES6) adalah serangkaian peningkatan JavaScript yang sekarang merupakan bagian dari standar resmi, tetapi belum didukung oleh semua browser, sehingga sering belum digunakan dalam pengembangan web. Bereaksi kapal asli dengan dukungan ES2015, sehingga Anda dapat menggunakan barang-barang ini tanpa khawatir tentang kompatibilitas. import , from , class , dan extends dalam contoh di atas adalah semua fitur ES2015. Jika Anda tidak terbiasa dengan ES2015, Anda mungkin dapat mengambilnya hanya dengan membaca kode sampel seperti tutorial ini. Jika Anda mau, halaman ini memiliki ikhtisar yang baik tentang fitur ES2015.

Hal lain yang tidak biasa dalam contoh kode ini adalah <View><Text>Hello world!</Text></View> . Ini adalah JSX – sintaks untuk menyematkan XML ke dalam JavaScript. Banyak kerangka kerja menggunakan bahasa templating khusus yang memungkinkan Anda menanamkan kode di dalam bahasa markup. Dalam Bereaksi, ini terbalik. JSX memungkinkan Anda menulis bahasa markup Anda di dalam kode. Sepertinya HTML di web, kecuali alih-alih hal-hal web seperti <div> atau <span> , Anda menggunakan komponen Bereaksi. Dalam hal ini, <Text> adalah komponen bawaan yang hanya menampilkan beberapa teks dan View seperti <div> atau <span> .

Komponen

Jadi, kode ini mendefinisikan HelloWorldApp , Component baru. Saat Anda membuat aplikasi Bereaksi Asli, Anda akan sering membuat komponen baru. Apa pun yang Anda lihat di layar adalah semacam komponen. Sebuah komponen bisa sangat sederhana – satu-satunya hal yang diperlukan adalah fungsi render yang mengembalikan beberapa JSX ke render.

Terakhir diperbarui: 22 Juni 2019
Sumber: https://facebook.github.io/react-native/