React Untuk Pemula — CRUD Part 1

Pada Tutorial Sebelumnya kita sudah belajar menginstal React menggunakan tool Create React App. Dan pada bagian ini kita akan lanjut belajar membuat aplikasi crud sederhana dengan React.

Yang perlu disiapkan:

NodeJS & NPM terinstal secara global

Bagi kamu yang belum mengikuti tutorial sebelumnya, silahkan untuk mengunjungi link React Untuk Pemula — Instalasi & Setup atau kamu bisa menclone project yang sudah kami persiapkan pada Github Repo kami.

Memahami Struktur Folder Project React App

Oke, setelah semuanya dipersiapkan hal yang pertama akan kita pelajari adalah memahami struktur folder project yang sebelumnya sudah dibuat atau digenerate menggunakan tool Create React App. Buka folder project tersebut menggunakan text editor favorit kamu.

Struktur Folder Project React 1.0

Struktur Folder Project React 1.1

Bisa kita lihat struktur folder project React kita pada gambar di atas. kita akan fokus ke dua folder yaitu folder public & src, dan abaikan dulu folder node_modules dan file lainnya.

Pada folder public berisi asset seperti file gambar dan file css untuk style ui dan file index.html yang merupakan root template dimana nantinya komponen-komponen React akan di render ke dalam sebuah halaman web (html). Sementara kita belum akan memodifikasi folder public ini.

Folder src bisa dibilang merupakan inti atau core dari aplikasi kita. Nantinya kita akan banyak memodifikasi atau membuat file baru disini.

Menulis Kode React Pertama Kita

Yuk mulai ke bagian menariknya. Hapus semua file yang ada di folder src, dan buat 2 file baru dengan nama index.css dan index.js.

src/index.css

src/index.js

Kita perlu menjalankan aplikasinya untuk melihat hasilnya. Dari dalam folder project, ketikkan:

npm start

buka http://localhost:3000 dan jika kode yang kita tulis benar maka hasilnya akan seperti ini:

Menampilkan List Data dengan React Component

Pada bagian ini kita akan menampilkan data menggunakan React Component. Ada 2 komponen yang nantinya akan dibuat:

1. App Component (src/App.js)
2. Table Component (src/Table.js)

App Component: komponen ini adalah komponen root yang nantinya akan membungkus atau berisi komponen-komponen lain yang akan dirender ke dalam sebuah halaman web html.

Table Component: komponen ini digunakan untuk menampilkan data pada sebuah table.

Oke lanjut. Pertama kita perlu sedikit mengubah file src/index.js yang sebelumnya kita buat.

src/index.js

Buat 2 File baru dengan nama App.js & Table.js pada folder src.

src/Table.js

src/App.js

Buka kembali http://localhost:3000 . Jika tidak ada kesalahan, tampilannya akan seperti ini: