Yang akan Anda pelajari
Lengkap pengembangan aplikasi asli React
Belajarlah untuk membangun 20 proyek dari dasar hingga akhir
Pelajari manajemen Redux di aplikasi React Native
Pelajari tentang API, KAMERA, SUARA dan fitur seluler lainnya
Pelajari tentang penyimpanan lokal di aplikasi seluler
Pelajari tentang Firebase – Database waktu nyata online
Persyaratan
Dasar-dasar Javascript diperlukan seperti loop, fungsi, array.
Laptop / desktop yang layak yang dapat membuka editor kode seperti VSCode
Tidak diperlukan sistem kelas atas karena Anda dapat menjalankan semua aplikasi di ponsel Anda yang sebenarnya
Deskripsi
Mari kita mulai diskusi dengan beberapa pertanyaan paling jelas:
Apa prasyarat untuk kursus ini?
Sebelum memulai kursus ini, kami berasumsi bahwa Anda merasa nyaman dengan javascript. Hal-hal seperti fungsi loop, fungsi, array dan panah jelas bagi Anda.
Apakah react native terkait dengan reactJS?
Kursus ini dirancang sedemikian rupa sehingga siswa dapat mulai langsung dengan kursus ini. Tidak perlu ahli untuk kursus ini. Tetapi jika Anda benar-benar memiliki pengetahuan, itu bagus.
Apakah saya memerlukan laptop / desktop kelas atas untuk kursus ini?
Ini adalah satu hal hebat dengan react native. Sepanjang kursus ini, kami akan bekerja dengan VSCode dan Anda dapat menjalankan aplikasi di ponsel (perangkat nyata). Jangan khawatir, proses tercakup dalam kursus.
Apakah termasuk redux?
Ya tentu saja. dan termasuk firebase, API Kamera, suara dll juga.
Aplikasi apa yang akan kita buat dalam kursus ini?
Begitu banyak aplikasi.
DiceRoller, CurrencyConverter, TicToeToe, Gores dan menang, Photo clicker, Aplikasi Karyawan, API Pengguna, Otentikasi, Papan Pesan, aplikasi Obrolan, Aplikasi Kontak, dll.
React native adalah proyek oleh Facebook (sumber terbuka), yang digunakan untuk merancang aplikasi Android dan iOS dengan aplikasi kode tunggal. Satu lagi hal yang menakjubkan tentang react native adalah memuat ulang secara cepat yang membuat waktu pengembangan aplikasi lebih cepat.
Untuk siapa saja kursus ini:
Pemula dalam pengembangan aplikasi seluler
Pemula dalam pengembangan Android
Pemula dalam pengembangan iOS
Siswa yang mencari solusi untuk pengembangan ponsel menggunakan react native.
Silabus Kursus :
-
Apa itu React Native?
-
Bagaimana React Native Bekerja
-
Expo vs React Native CLI
-
Unduh Node.js
-
Membuat Aplikasi Asli React Pertama Kami
-
Aplikasi Asli React Adalah Kerja Keras!
-
Penyegaran Persyaratan Kursus
-
Menjalankan Aplikasi di Emulator Android
-
Menjalankan Aplikasi di Simulator iOS
-
Sumber & Tautan Berguna
-
Pengenalan Modul
-
Bagaimana bekerja dengan React Native Components
-
Menyiapkan Proyek Baru
-
Merencanakan Aplikasi
-
Bekerja dengan Komponen Inti
-
Memulai dengan Gaya
-
Flexbox & Tata Letak (Pengantar)
-
React Native Flexbox Deep Dive
-
Gaya Sebaris & Objek StyleSheet
-
Komponen, Gaya, Tata Letak
-
Bekerja dengan State & Event
-
Mengeluarkan Daftar Item
-
Item Daftar Gaya
-
Membuatnya Dapat Digulir dengan ScrollView!
-
Daftar yang Lebih Baik: FlatList
-
Lebih Banyak Komponen & Daftar
-
Memisahkan Aplikasi Menjadi Komponen
-
Melewati Data Antar Komponen
-
Bekerja dengan Komponen yang Dapat Disentuh
-
Menghapus Item
-
Menambahkan Hamparan Modal
-
Lebih Banyak Gaya Flexbox
-
Menutup Modal & Kliring Input
-
Menyelesaikan Modal Styling
-
Sumber & Tautan Berguna
-
Pengenalan Modul
-
Apa yang Harus Di-debug & Bagaimana Cara Debug?
-
Menjalankan Aplikasi di Perangkat Nyata & Debugging
-
Menangani Pesan Kesalahan
-
Memahami Alur Kode dengan console.log()
-
Menggunakan Debugger & Breakpoint Jarak Jauh
-
Bekerja dengan Hamparan Perangkat DevTools
-
Men-debug UI & Menggunakan React Native Debugger
-
Sumber & Tautan Berguna
-
Pengenalan Modul
-
Pengaturan & Perencanaan Aplikasi
-
Menambahkan Komponen Header Kustom
-
Menambahkan Komponen Layar
-
Bekerja di Tata Letak
-
Menata Tampilan sebagai Wadah “Kartu” (dengan Drop Shadows & Sudut Bulat)
-
React Native Styling vs CSS Styling
-
Mengekstrak Komponen Kartu (Komponen Presentasi)
-
Komponen & Gaya
-
Bertema Warna dengan Konstanta
-
Mengonfigurasi & Menata Gaya Input Teks
-
Membersihkan Input Pengguna & Mengontrol Soft Keyboard
-
Menyetel Ulang & Mengonfirmasi Masukan Pengguna
-
Mengkonfigurasi Komponen
-
Menampilkan Peringatan
-
Saatnya Menyelesaikan “Kotak Konfirmasi”
-
Menambahkan Pembuatan Angka Acak
-
Beralih Antara Beberapa “Layar”
-
Menambahkan Fitur Game: Petunjuk & Validasi
-
Memeriksa Kondisi “Menang” dengan useEffect()
-
Menyelesaikan Logika Game
-
Menambahkan Pemuatan Aplikasi
-
Menambahkan Font Kustom
-
Menginstal expo-font
-
“Cascade” Gaya Sintetis: Komponen Pembungkus Kustom & Gaya Global
-
Menambahkan Gambar Lokal
-
Gambar Penataan
-
Bekerja dengan Gambar Jaringan (Web)
-
Melihat Lebih Dekat pada Komponen “Teks” (dan apa yang dapat Anda lakukan dengannya)
-
<View> vs <Text> – Ringkasan
-
Membangun Komponen Tombol Kustom
-
Menambahkan Ikon
-
Menjelajahi Perpustakaan UI
-
Mengelola Tebakan Sebelumnya sebagai Daftar
-
Daftar Item & Daftar Styling
-
ScrollView & Flexbox (Ya, itu berhasil!)
-
Menggunakan FlatList Alih-alih ScrollView
-
Sumber & Tautan Berguna
-
Pengenalan Modul
-
Menemukan Peluang Peningkatan
-
Bekerja dengan Aturan Penataan Gaya yang Lebih Fleksibel
-
Memperkenalkan Dimensi API
-
Menggunakan Dimensi dalam Pemeriksaan “jika”
-
Menghitung Ukuran Secara Dinamis
-
Masalah dengan Orientasi Perangkat Berbeda
-
Mengontrol Orientasi & Menggunakan KeyboardAvoidingView
-
Mendengarkan Perubahan Orientasi
-
Membuat Tata Letak Berbeda
-
Memperbaiki Layar GameOver
-
Memperbarui Semua Kode untuk Memperbarui Secara Dinamis
-
Dimensi API & UI Responsif
-
API Orientasi Layar Expo
-
Memperkenalkan Platform API
-
Bekerja dengan Platform.select() dan Platform di Cek “jika”
-
Menggunakan File Kode Khusus Platform
-
Platform API
-
Menggunakan SafeAreaView
-
Sumber & Tautan Berguna
-
Pengenalan Modul
-
Merencanakan Aplikasi
-
Menambahkan Layar
-
Menambahkan Pemuatan Aplikasi
-
Menambahkan Font
-
React Dokumen Navigasi
-
Memasang Navigasi React & Menambahkan Navigasi ke Aplikasi
-
Memasang Navigator yang Berbeda
-
Membuat StackNavigator
-
React Navigasi & Lampiran Kode
-
Menavigasi Antar Layar
-
Sintaks Navigasi Alternatif
-
Dasar-dasar Navigasi
-
Navigasi ke Layar “Rincian Makanan”
-
Mendorong, Meletakkan & Mengganti
-
Mengeluarkan Kotak Kategori
-
Mengonfigurasi Header dengan Opsi Navigasi
-
Melewati & Membaca Params Saat Navigasi
-
Mengatur Opsi Navigasi Dinamis
-
Opsi & Konfigurasi Navigasi Default
-
Parameter & Konfigurasi Navigasi
-
Styling Grid & Beberapa Refactoring
-
Menambahkan Model & Data Makanan
-
Memuat Makanan untuk Kategori
-
Membuat Daftar Makanan
-
Melewati Data ke Layar Detail Makanan
-
Tombol Header: Menggunakan Versi yang Benar
-
Menambahkan Tombol Tajuk
-
Memperbaiki Bayangan
-
Menambahkan Navigasi Berbasis Tab
-
Mengatur Ikon dan Mengkonfigurasi Tab
-
Pilihan navigasi di dalam Navigator
-
Menambahkan MaterialBottomTabs
-
Menambahkan Tumpukan Favorit
-
Menambahkan Tombol Menu & Navigasi Laci
-
Mengkonfigurasi Laci
-
Lebih Banyak Konfigurasi & Gaya Navigasi
-
Menambahkan Komponen DefaultText
-
Menambahkan Konten Layar MealDetail
-
Saatnya untuk Konten Layar “Filter”!
-
Melewati Data Antara Komponen & Opsi Navigasi (Header)
-
[React Refresher] useEffect() & useCallback()
-
Sumber & Tautan Berguna
-
Pengenalan Modul
-
Apa itu State & Apa itu Redux?
-
Redux & Penyiapan Toko
-
Memilih Irisan State
-
Redux Data & Opsi Navigasi
-
Tindakan Pengiriman & Logika Peredam
-
Mengganti Ikon Favorit
-
Merender Teks Pengganti
-
Menambahkan Logika Penyaringan
-
Mengirim Tindakan Filter
-
Men-debug Redux di React Native Apps
-
Sumber & Tautan Berguna
-
Pengenalan Modul
-
Merencanakan Aplikasi
-
Membuat Pengaturan Proyek Dasar
-
Layar Ikhtisar Produk
-
Menyiapkan Navigator
-
Menata Produk Produk
-
Menambahkan Komponen yang Dapat Disentuh
-
Bekerja di Layar Detail Produk
-
Menggunakan Font Kustom
-
Menambahkan Item ke Keranjang
-
Menerapkan Tombol Tajuk
-
Mengeluarkan Item Keranjang
-
Menambahkan Logika untuk Menghapus Item
-
Menambahkan Logika Redux untuk Pesanan
-
Laci Samping & Layar Pesanan
-
Membersihkan Keranjang
-
Styling Item Pesanan
-
Membuat Tombol “Tampilkan Detail” Berfungsi
-
Membangun Layar “Produk Pengguna”
-
Menata Ulang Komponen ProductItem
-
Menghapus Item
-
Menambahkan Logika Pengeditan & Navigasi Dasar
-
Menangani Masukan Pengguna
-
Menggunakan Params untuk Mengirim Input Pengguna
-
Mengirim Tindakan untuk Membuat & Memperbarui
-
Saatnya Meningkatkan Aplikasi!
-
Sumber & Tautan Berguna
-
Pengenalan Modul
-
Mengonfigurasi Input Teks
-
Menambahkan Validasi Dasar
-
Memulai dengan useReducer()
-
Menyelesaikan Formulir Penggabungan & Manajemen Input
-
Memindahkan Logika Input Menjadi Komponen Terpisah
-
Menghubungkan Komponen & Formulir Input
-
Mengubah Gaya & Menangani Soft Keyboard
-
Alternatif & Penutup
-
Sumber & Tautan Berguna
-
Pengenalan Modul
-
Setup & Cara Mengirim Permintaan
-
Menginstal Redux Thunk
-
Menyimpan Produk di Server
-
Mengambil Produk dari Server
-
Menampilkan Loading Spinner & Penanganan Kesalahan
-
Menyiapkan Pendengar Navigasi
-
Memperbarui & Menghapus Produk
-
Menangani Kesalahan Tambahan
-
Menyimpan Pesanan
-
Menampilkan Indikator Aktivitas
-
Mengambil Pesanan Tersimpan
-
Menambahkan “Tarik untuk Menyegarkan”
-
Sumber & Tautan Berguna
-
Pengenalan Modul
-
Cara Kerja Otentikasi
-
Menerapkan Layar Masuk Dasar
-
Menambahkan Pendaftaran Pengguna
-
Masuk Pengguna
-
Mengelola Status & Kesalahan Pemuatan
-
Menggunakan Token
-
Memetakan Pesanan ke Pengguna
-
Pemetaan yang Ditingkatkan (Pelingkupan)
-
Menggunakan AsyncStorage
-
Menerapkan “Login Otomatis”
-
Menambahkan Logout
-
Menerapkan “Logout Otomatis”
-
Auto-Logout & Android (Peringatan)
-
Sumber & Tautan Berguna
-
Pengenalan Modul
-
Merencanakan Aplikasi
-
Pengaturan Navigasi di Kuliah Berikutnya
-
Pengaturan Layar & Navigasi
-
Memulai dengan Formulir
-
Redux & Menambahkan Tempat
-
Mengeluarkan Daftar Tempat
-
Mengakses Kamera Perangkat
-
Mengonfigurasi Akses Kamera
-
Menggunakan Gambar yang Dipilih
-
Menyimpan Gambar di Sistem File
-
Impor SQLite yang diubah
-
Menyelam ke SQLite untuk Penyimpanan Data Permanen
-
Menyimpan Data di Database Lokal
-
Mengambil Data dari Database Lokal
-
Mendapatkan Lokasi Pengguna
-
Menampilkan Pratinjau Peta Lokasi
-
Lebih lanjut tentang Variabel Lingkungan
-
Menampilkan Peta Interaktif
-
Menambahkan Penanda
-
Membuat Lokasi yang Dipilih “Dapat Disimpan”
-
Menyimpan Tempat Pilihan
-
Memperbarui Layar Lokasi Saat Lokasi Berubah
-
Menyimpan Alamat
-
Menampilkan Layar “Rincian”
-
Menyelesaikan Layar “Peta”
-
Menjalankan Aplikasi di iOS
-
Menjalankan Aplikasi di Android
-
Sumber & Tautan Berguna
-
Pengenalan Modul
-
Alternatif untuk Expo
-
Membangun Aplikasi hanya dengan React Native CLI
-
Muat Ulang Langsung dan Aplikasi RN CLI
-
Penting: Menggunakan React Native Image Picker
-
Menambahkan Modul Asli ke Aplikasi Non-Expo
-
Memahami “Alur Kerja Telanjang” Expo
-
Keluar dari “Alur Kerja Terkelola” Expo
-
Kapan Menggunakan Yang Mana?
-
Sumber & Tautan Berguna
-
Pengenalan Modul
-
Langkah-langkah Penerapan
-
Mengonfigurasi Aplikasi & Penerbitan
-
Mengkonfigurasi Ikon & Layar Splash
-
Bekerja dengan Kumpulan Aset Offline
-
Menggunakan “Pembaruan Melalui Udara” (Pembaruan OTA)
-
Membangun Aplikasi untuk Penerapan (iOS & Android)
-
Menerbitkan Aplikasi iOS tanpa Expo
-
Menerbitkan Aplikasi Android tanpa Expo
-
Mengonfigurasi Aplikasi Android
-
Sumber & Tautan Berguna
-
Pengenalan Modul
-
Apa yang berubah?
-
Mempersiapkan Proyek
-
Informasi Lebih Lanjut & Memperbarui Dependensi Proyek
-
Berpindah dari “Seperti Registri” ke Konfigurasi Navigasi “Berbasis Komponen”
-
Langkah Migrasi Pertama
-
Mengonversi Lebih Banyak Stack Navigator ke Konfigurasi Baru
-
Memigrasikan Navigasi Laci
-
Mengganti Navigator & Alur Otentikasi “Beralih”
-
Logout & Perbaikan/Penyesuaian Lebih Lanjut
-
Mengekstrak Param Layar
-
Mengatur Opsi Layar Secara Dinamis
-
Langkah Migrasi & Roundup yang Tersisa
-
Ringkasan Semua Perubahan Penting
-
Sumber & Tautan Berguna
-
Pengenalan Modul
-
Memahami Notifikasi
-
Mengirim Pemberitahuan Lokal
-
Mendapatkan Izin
-
Mengontrol Bagaimana Notifikasi Ditampilkan
-
Bereaksi terhadap Pemberitahuan Latar Depan
-
Bereaksi terhadap Pemberitahuan Latar Belakang
-
Cara Kerja Notifikasi Push
-
Expo & Pemberitahuan Dorong
-
Mendapatkan Token Dorong
-
Mengirim Pemberitahuan Push
-
Menggunakan Server Dorong Expo
-
Lebih lanjut tentang Token Dorong
-
Menambahkan Pemberitahuan Push ke Aplikasi Toko (1/3)
-
Menambahkan Pemberitahuan Push ke Aplikasi Toko (2/3)
-
Menambahkan Pemberitahuan Push ke Aplikasi Toko (3/3)
-
Pemberitahuan Dorong di Aplikasi Terkelola non-Expo
-
Sumber Daya Modul
-
Roundup & Langkah Selanjutnya
-
Pengenalan Modul
-
JavaScript – Ringkasan
-
Pengaturan Proyek
-
Penyegaran Sintaks Inti
-
Fungsi Panah
-
Objek: Properti & Metode
-
Array & Metode Array
-
Array, Objek & Jenis Referensi
-
Operator Spread & Parameter
-
Destrukturisasi
-
Kode & Async
-
Sumber Daya Modul
-
Pengenalan Modul
-
Apa itu React.js?
-
Proyek Awal
-
Memahami BEJ
-
Memahami Komponen
-
Bekerja dengan Banyak Komponen
-
Bekerja dengan Props
-
Rendering Daftar Data
-
Menangani Acara
-
Komunikasi Orang Tua-Anak
-
Mengelola State
-
Lebih lanjut tentang State
-
Masukan Pengguna & Pengikatan Dua Arah
-
Sumber Daya Modul
- SELESAI
