Skip to main content

Posts

Showing posts from December, 2021

Cara Menyiapkan Redux Pada React

  Dalam membuat aplikasi tentu kita berharap aplikasi itu bisa beraktifitas dengan mengolah data, mengirimkan data, memunculkan notifikasi, memberikan pesan error ketika kita tidak mengakses suatu halaman, atau aktifitas dimana kita beraktifitas satu halaman satu dengan halaman lain Semua itu kita membutuhkan state di dalamnya. Dengan state kita bisa memberi nilai awal dan nilai tertentu yang ingin kita berikan dan berubah ubah Untuk beberapa pergerakan dan perubahan kita bisa menggunakan useState. Namun jika aplikasi itu sudah sangat besar dan memiliki fitur yang banyak. Maka kita harus menggunakan Redux Apa Itu Redux? "A Predictable State Container for JS Apps" wadah state yang bisa diprediksi. Artinya kita menentukan setiap pegerakan state ini. Mulai dari nilai awalnya hingga nilai akhirnya. Kita bisa menentukan itu semua dengan segala urutan logika Kali ini saya akan menjelaskan bagaimana cara menerapkan Redux ini pada project React Native Kenapa React Native? Karena saat

Cara Menerapkan Form Local State Pada React Native

  Postingan kali ini akan membahas bagaimana cara mengolah pengiriman data dari form React Native menggunakan state Hooks yang akan kita gunakan kali ini adalah useState. Pastikan kalian sudah mengimportnya dari library 'react' Langkah Langkah Definisikan useState menggunakan const dengan kode dibawah ini Coba saya jelaskan apa sih maksud email dan setEmail diatas email (sebenarnya bisa menggunakan nama apapun) adalah sebuah value yang nilainya bisa berubah ubah atau mendefinisikan state yang ingin kita gunakan setEmail, adalah fungsi yang memungkinkan kita mengubah value dari email ini Untuk kasus yang lebih luas lagi, kita bisa menamakan email dan setEmail dengan konteks kasus kita. Seperti data dan setData, payment dan setPayment. Lalu berikan props pada component   Props yang diberikan adalah value dan onChangeText.  value akan berisi state onChangeText adalah props yang berisi fungsi yang akan mengubah, mengolah value yang berisi state. Semisal kita mengetikan "abcdef

Cara Mengatasi error: Error: Unable to resolve module Pada React Native

  Apakah kalian pernah mendapatkan pesan error yang menujukan pesan berikut? error: Error: Unable to resolve module Lalu beberapa kesalahan kesalahan lain dalam penulisan kode bermunculan dibawahnya Yang lebih membingungkan lagi kalian sebenarnya sudah memperbaiki kode tersebut dan yakin bahwa semuanya sudah benar. Namun komputer kita secara serta merta menganggap bahwa segala perubahan tidak dikenali Penyebab Hal ini bisa disebabkan karena cache pada penyimpanan sementara di aplikasi kita mulai penuh, sehingga komputer akan membaca memori manapun, yang barang kali ia akan membaca memori sebelum kode tersebut dirubah Solusi Maka dari itu kita harus membersihkan cache cache ini hingga bersih. Sehingga aplikasi kita/komputer kita bisa secara tertaur mengenali segala perubahan Langkah Langkah Masukkan perintah berikut. Pada directory aplikasi kalian   npm cache clean --force Lalu restart metro yang sudah dirunning npm start Lalu build android emulator kalian dengan perintah npm run androi

Cara Membuat Navigasi Bottom Tab Pada React Native

  Ketika kita menggunakan aplikasi android, terkadang kita menjumpai beberapa komponen yang berfungsi apabila kita menyentuhnya maka aplikasi tersebut akan menyajikan segala pilihan menu sesuai kebutuhan kita Contohnya seperti yang terjadi pada aplikasi ini Tab Bottom yang menyediakan tombol untuk Home, Order, dan Profile Bagaimana cara membuatnya? Ternyata ada beberapa langkah yang harus diikuti Langkah Langkah Instal package menggunakan perintah berikut npm install @react-navigation/bottom-tabs@^5.x  Atau kalian bisa melihatnya pada documentation resminya  Lalu kita tambahkan kode ini pada file index.js pada folder route kita yang sudah kita terapkan sesuai dengan prinsip Atomic Design Baca Juga: Belum Tahu Atomic Design? Pelajari Sekarang Juga Disini! ./src/routes/index.js Lalu, buat component untuk tiap tiap halaman Profile, Home, dan Order. Untuk pembuatan tahap awal boleh menggunakan kode yang sederhana saja atau setidaknya menampilkan teks yang menjelaskan tiap tiap components.