React Native — Redux (file structure type 2)

Pada pembahasan ini kita akan mencoba membuat organization folder pada react native dengan disertai penggunaan Redux sebagai state managementnya. Untuk pembuatan organization folder ini digunakan agar project kita menjadi rapih dan tertata, hal ini juga digunakan untuk standardisasi file sehingga dapat dibaca secara uneversal.

Baca Juga: React Native — Redux

Create basic project react native

Running App on your devices

Create folder src

Buat file baru di bawah root project, untuk folder ini akan diisi dengan berbagai file kodingan yang akan kita buat. Termasuk pada App.js akan kita pindahkan kesini sehingga di folder ini khusus untuk semua komponen utama yang berhubungan dengan kodingan app kita.

Edit index.js

Didalam index.js kita harus pindahkan route pada App.js karena telah dipindahkan ke folder src. File index.js akan menjadi seperti berikut.

Create all File inside folder src

Kita aka membuat semua file didalam filder src kita

Gambar 1. src structure

Kemudian isi semua filenya sebagai berikut

App.js

Assets Folder Structure

Gambar 2. Assets folder structure
  1. Icon folder, berisi seluruh icon yang akan digunakan pada app kita, icon ini dapat berupa gambar dengan extension png, jpg, svg dan sejenisnya
  2. Ilustrasion folder, sama seperti folder icon, folder ini juga digunakan untuk menyimpan gambar yang akan ada pada app kita, namun untuk ilustration digunakan untuk menampung gambar yang bersifat content seperti banner, atau sejeninsnya bukan seperti icon yang biasanya digunakan untuk tombol dans sejenisnya
  3. index.js, file ini berfungsi untuk pemanggilan yang lebih mudah dilakukan, isinya seperti berikut

Components Folder Structure

Gambar 3. Components folder structure
  1. Folder atoms, berisi semua file yang sifatnya bersifat per component, seperti custom pada button, text dan sejenisnya.
  2. Folder Button, terdapat file bernama index.js ini merupakan component Button yang nantinya dapat kita panggil pada kodingan kita. Isi dari index.js didalam folder Button adalah berikut

3. Didalam atoms akan terdapat file index juga, file index di dalam atoms ini berfungsi untuk memanggil semua data component sepeti pada Button, kemudian pemanggilan component ini akan lebih mudah nantinya. Isi kodingan index.js pada folder atoms adalah berikut

4. Index.js pada dibawah folder Compoenent, ini digunakan untuk juga memudahkan pemanggilan component didalam folder ini. Isi kodingannya adalah berikut

Pages Folder Structure

Gambar 4. Pages Folder Structure

Pada folder ini menampung semua file yang berhubungan langsung pada app, karena folder ini merupakan perwujudan dari kodingan per page pada app. Bisa dibilang ini juga merupakan file utama kodingan yang membentuk app kita. Disini kita hanya akan mengambil contoh salah satu saja

  1. Folder Login, pada folder ini akan berisi file index.js sebagai file utama login, kemudian selain file ini kita juga dapat membuat file lain yang akan menjadi component File login.
  2. index.js di dalam folder login, file ini berisi kodingan utama login. Berikut merupakan kodingan index.js pada folder login

3. ActionButton.js , ini merupakan file berupa component button untuk nantinya digunakan pada file index, file ini sendiri berguna untuk melakukan suatu action tertentu.

redux Folder Structure

Gambar 5. ActionButton Folder Structure

Folder Redux ini tentunya memuat managament state kita, didalamnya terdapat beberapa file yang digunakan.

  1. action.js

2. index.js

3. reducer.js

4. store.js

Untuk folder redux ini sebenarnya dapat kita buat satu lagi folder ‘constants’ yang berisi nama file action method yang akan digunakan pada tiap action di redux, namun disini akan kita hapus dikarenakan hal ini bersifat opsional dan tentunya kita dapat menambahkannya jika dirasa perlu.

router Folder Structure

Gambar 6. router folder structure

index.js

utils Folder Structure

Gambar 7. utils folder structure
  1. colors Folder, pada folder ini akan digunakan untuk menampung warna yang akan kita jadikan sebagai patokan warna component app kita, hal ini digunakan untuk memudahkan juga pada saat mendeklarasikan warna. Isi dari index.js didalam folder colors ini adalah.

2. index.js pada utils, file ini digunakan untuk nantinya dapat memudahkan kita dalam pemanggilan kita di component lainnya.

Dan itu merupakan keseluruhan isi dari app yang akan kita deklaraskan, sebenarnya kita juga dapat memetakan folder kita sesuai yang kita inginkan dan senyaman kita dalam penyusunan foldernya. Namun apabila yang masih belajar, structur folder diatas juga dapat dijadikan landasan, namun tentunya dapat berubah sesuai dengan kebutuhan saat dalam proses membuild app kita. Sekian dan terimakasih

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store