Components

Dalam pengembangan yang bersifat modular, di dalam React.js kita bisa membuat beberapa modul component yang memiliki fungsinya masing-masing. Setiap komponen merupakan bagian kecil dari aplikasi yang dapat digunakan kembali (reusable).

Silakan buat folder baru didalam folder src dengan nama components. kemudian didalam folder components buat sebuah file baru dengan nama Header.js, Footer.js, TaskForm.js dan TaskList.js.

src/
│── components/
│   ├── Header.js
│   ├── Footer.js
│   ├── TaskForm.js
│   ├── TaskList.js

Anda bisa membuat folder dan file yang disebutkan diatas dengan cara manual. Atau jika ingin membuatnya secara cepat, kita bisa langsung menggunakan CMD(Windows), dengan cara menjalankan perintah berikut:

mkdir src\components

kemudian pindah kedalam direktori components dengan cara:

cd src\components

Jika sudah berada dalam direktori components silakan jalankan perintah dibawah ini satu persatu:

type nul > Header.js

type nul > Footer.js

type nul > TaskForm.js

type nul > TaskList.js

Maka secara keseluruhan akan terlihat seperti berikut ini:

Context

Silakan buat folder baru didalam folder src dengan nama contexts. Kemudian didalam folder contexts buat sebuah file baru dengan nama ThemeContext.js.

src/
│── contexts/
│   ├── ThemeContext.js

Seperti pada cara sebelumnya, silakan jalankan perintah berikut pada direktori todo-react, ingat jangan sampai salah direktori.

mkdir src\contexts

Kemudian pindah kedalam direktori yang baru saja dibuat, dengan menjalankan perintah berikut:

cd src\contexts

Lalu Jalankan perintah berikut ini:

type nul > ThemeContext.js

Maka akan terlihat seperti pada gambar berikut ini:

Services

Pada folder ini, kita akan menyimpan sebuah file yang bertanggung jawab untuk komunikasi dengan API yang sudah kita buat pada laravel sebelumnya.

Silakan buat folder baru didalam folder src dengan nama services. Kemudian didalam folder services buat sebuah file baru dengan nama taskService.js. Seperti pada cara sebelumnya, silakan jalankan perintah berikut pada direktori todo-react, ingat jangan sampai salah direktori.

src/
│── services/
│   ├── taskService.js

Silakan jalankan perintah berikut:

mkdir src\services

Kemudian pindah kedalam direktori yang baru saja dibuat, dengan menjalankan perintah berikut:

cd src\services

Lalu Jalankan perintah berikut ini:

type nul > taskService.js

Maka akan terlihat seperti pada gambar berikut ini:

Pada materi berikutnya, kita akan melakukan konfigurasi pada masing-masing file yang sudah kita buat.