Belajar pemrograman--termasuk mempelajari React--terasa sulit bila hanya berbekal teori. Praktik dengan menuliskan kode secara langsung sangat berpengaruh dalam meningkatkan pemahaman. Sama seperti seorang pilot, semakin banyak jam terbang, semakin andal ia menerbangkan pesawat. Seorang programmer pun demikian, semakin banyak menuliskan kode, semakin paham dengan aturan kode yang ditulis dan mengasah logika untuk kemampuan problem solving.

Karena itu, kami mengajak Anda untuk membuat sebuah proyek sederhana dengan React sebagai bahan latihan. Proyeknya adalah “Aplikasi Daftar Kontak”. Aplikasi ini sederhana saja, ia dapat menampilkan daftar kontak dari data yang sudah ada, menghapus kontak, dan menambahkan kontak baru.

Melalui proyek ini, Anda juga akan mempelajari cara membuat proyek React di desktop yang sebelumnya hanya menggunakan proyek CodeSandBox saja. Anda juga akan belajar hal baru yaitu menerapkan styling pada UI yang dibangun oleh React.

Sudah siap? Yuk kita lanjut.

React Project

Sebelumnya, Anda banyak menuliskan kode React pada platform CodeSandBox. That’s works! Namun, platform tersebut cocok bila Anda ingin bermain atau mencoba potongan-potongan kode React karena Anda tidak perlu repot untuk menyiapkan proyek secara lokal. Untuk membuat proyek yang kompleks, sebaiknya buatlah proyek React lokal secara mandiri.

Untuk membuat proyek secara lokal sebenarnya terdapat 2 cara, yaitu cara mudah dan sulit. Masing-masing cara sebenarnya memiliki kelebihannya sendiri. Ketika kami memberikan cara yang sulit, Anda akan lebih memahami secara lebih rinci kebutuhan dalam menjalankan kode React. Namun, prosesnya akan panjang dan cukup untuk membuat kepala pusing.

Melihat ini adalah kelas pemula, kami tak ingin materi yang rumit disampaikan di kelas ini. Lebih baik Anda fokus pada “cara membuat aplikasi dengan React”, bukan mengetahui “bagaimana module bundler dan Babel bekerja”. Oleh karena itu, kami akan mengambil pendekatan yang lebih mudah.

Di materi awal kelas, kami menyinggung tentang React Ecosystem (kami harap Anda masih mengingatnya). Ada React Ecosystem yang dapat memudahkan Anda dalam menyiapkan proyek React di lokal, yakni create-react-app.


Kita sangat beruntung karena Create React App (CRA) menawarkan Anda untuk membuat proyek React hanya dengan sekali menuliskan perintah saja. Setelah itu, di balik layar CRA akan secara otomatis menyiapkan kebutuhan untuk menjalankan proyek React. Jika kita mengambil cara yang sulit, seluruh persiapan yang otomatis perlu kita siapkan secara mandiri.

Oke agar lebih jelas, kita langsung praktik saja.


Latihan Studi Kasus: Membuat Proyek React

Latihan kali ini bertujuan untuk membuat proyek React (contacts-app) secara lokal menggunakan create-react-app. Simak langkah-langkahnya di bawah ini.

  1. Sebelum membuat proyek, pastikan lagi komputer Anda sudah terpasang Node.js dengan versi minimal 14 dan NPM dengan versi minimal 6. Untuk memastikannya, silakan tulis perintah berikut satu per satu pada CMD atau Terminal.

    node -v
npm -v

    Hasilnya:


    Oke jika sudah siap, kita lanjut.

  2. Masih di dalam Terminal, silakan masuk ke direktori (folder) yang Anda inginkan untuk menyimpan proyek contacts-app. Misalnya, bila Anda menggunakan Linux dan proyeknya akan disimpan di direktori home - react-projects (pastikan folder react-projects sudah dibuat), tuliskan perintah berikut.

    cd /home/<nama user>/react-projects

    Sebenarnya jika Anda menggunakan Windows pun sama, gunakan perintah cd untuk berpindah atau masuk antar direktori.

  3. Setelah itu, saatnya kita buat proyek React baru menggunakan perintah berikut.

    npx create-react-app contacts-app

    Jika ini ada proyek React pertama Anda, mungkin proses pembuatannya memakan waktu yang lama karena proses ini sebetulnya mengunduh seluruh package yang diperlukan dalam membangun proyek React. Namun, proses pengunduhan tersebut sebenarnya dilakukan 1 kali dan setelahnya akan di-cache di dalam hardisk Anda. Dengan demikian, proses pembuatan proyek selanjutnya akan jauh lebih cepat.


    Setelah proses pembuatan proyek selesai, Terminal akan menampilkan beberapa informasi mengenai npm runner yang bisa digunakan pada proyek tersebut. Silakan baca informasinya, jika ada yang tidak dimengerti, jangan ambil pusing dulu, ya!

    Selain itu, pada target folder yang Anda kehendaki, seharusnya sudah ada folder proyek React bernama contacts-app.


    Silakan buka proyek tersebut menggunakan VSCode.


  4. Oke! Proyek contacts-app berhasil dibuat dan CRA sudah menyediakan beberapa berkas sebagai template yang dapat Anda manfaatkan di sana. Sekarang coba buka folder src dan public, di dalamnya ada banyak file yang sudah tersedia.


    Jangan pusing ketika Anda melihat berkas-berkas yang ada di sana. Berkas tersebut secara “umum” dibutuhkan ketika membuat sebuah proyek React, tetapi tidak dalam konteks orang yang baru belajar React.

    Jika Anda bingung apa gunanya berkas manifest.json, robots.txt, App.test.js, reportWebVitals.js, atau setupTests.js, mohon jangan dipikirkan dulu untuk saat ini. Fokuslah pada cara penggunaan seperti menjalankan proyek dan mem-build proyek agar web dapat di-hosting “kelak”.

  5. Lalu, bagaimana cara menjalankan proyek ini? Sebenarnya jawabannya bisa Anda temukan pada berkas README.md. Di sana terdapat informasi bagaimana menjalankan proyek, mem-build, bahkan menjalankan pengujian otomatis. Lengkapnya, Anda bisa membacanya di sana. Untuk menjalankannya, cukup tuliskan perintah berikut pada Terminal proyek.

    npm start

    Kemudian aplikasi seketika tampil pada Browser Anda (secara default, aplikasi dapat diakses melalui URL localhost:3000).


  6. Secara default, tampilan aplikasi yang dibangun menggunakan CRA akan menampilkan component App. Component tersebut berlokasi di src/App.js. Anda bisa mengubah konten yang ditampilkan pada component tersebut dan seketika Browser akan me-reload secara otomatis untuk menampilkan konten terbaru.


  7. Selain menjalankan proyek, Anda juga bisa mem-build proyek ke dalam berkas HTML, CSS, dan JS secara statis. Hal ini wajib Anda lakukan ketika hendak men-deploy website ke tahap production. Untuk build proyek React, Anda bisa gunakan perintah berikut.

    npm run build

    Kemudian, akan tercipta folder baru bernama “build” yang di dalamnya terdapat berkas HTML, CSS, JS, dan berkas lain (seluruh berkas yang berada di folder public) yang dibutuhkan oleh aplikasi agar dapat berjalan dengan baik.


  8. Untuk meminimalisir distraksi oleh berkas-berkas yang sebenarnya belum kita butuhkan, kami sangat menyarankan Anda untuk menghapus seluruh berkas yang ada di dalam folder src dan public. Kita akan membuat berkas yang dibutuhkan satu per satu sehingga lebih mudah untuk memahaminya karena sebenarnya hanya segelintir berkas saja yang kita butuhkan saat ini.

    Silakan kosongkan folder src dan public.Anda juga bisa menghapus folder build (karena belum dibutuhkan) seperti gambar di bawah ini.


  9. Lalu, buat kembali berkas index.html di dalam folder public.


    Kemudian tulis struktur HTML dasar dan sediakan element root sebagai container dari aplikasi React yang hendak dibuat.

    <!DOCTYPE html>
<html lang="id">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Contact Apps</title>
 </head>
 <body>
   <div id="root"></div>
 </body>
</html>

  10. Selanjutnya, kita buat berkas JavaScript bernama index.js di dalam folder src.


    Di dalamnya, kita tuliskan saja kode “Hello, World” dari penggunaan React sebagai placeholder. Seharusnya Anda sudah paham ‘kan seperti apa?

    import React from 'react';
import { createRoot } from 'react-dom/client';
 
const element = <h1>Hello, world!</h1>;
 
const root = createRoot(document.getElementById('root'));
root.render(element);

  11. Simpan seluruh perubahan dan jalankan kembali proyek React. Kini Browser akan menampilkan UI seperti ini.


    Dengan menghapus berkas template yang belum dibutuhkan, semoga Anda menjadi lebih paham fungsi-fungsi berkas yang ada di dalam proyek contacts-app.

Kita akan mulai mengerjakan contact-app pada materi selanjutnya. Jika Anda merasa lelah, silakan istirahat dulu. Jika sudah siap, yuk kita lanjut ke latihan selanjutnya!


Menampilkan Daftar Kontak

Pada latihan sebelumnya, Anda sudah berhasil membuat proyek React (contacts-app) secara lokal. Sekarang, kita akan melanjutkan pembuatan aplikasi daftar kontak sesuai rencana awal. Latihan ini bertujuan untuk meningkatkan “jam terbang” Anda dalam menggunakan React.

Kita akan membangun aplikasi secara bertahap. Di akhir dari modul ini setidaknya Anda akan berhasil menampilkan daftar kontak sederhana seperti ini.


Mengingat Anda sudah banyak berlatihan di materi sebelumnya, seharusnya latihan kali ini akan mudah. Jadi, mari kita mulai!

  1. Pertama, silakan unduh dulu beberapa aset gambar yang diperlukan pada aplikasi di tautan berikut: images.zip

  2. Selanjutnya pada proyek contacts-app, buat folder baru bernama images di dalam folder public.


  3. Kemudian, ekstrak berkas ZIP yang telah diunduh pada langkah pertama. Setelah itu, simpan seluruh gambar di dalam folder public - images.


  4. Seperti biasa, sebelum kita mulai menulis kode ada baiknya buatlah sketsa untuk menentukan pemecahan component yang akan dibuat.


    Berikut adalah pemecahan dari component-nya.

    1. ContactApp (merah) : Sebagai parent yang menampung seluruh UI yang ditampilkan, termasuk lokasi di mana data contacts berada.
    2. ContactList (kuning) : Sebagai container dalam membuat list contact.
    3. ContactItem (hijau) : Sebagai container dalam menampilkan item contact.
    4. ContactItemImage (biru) : Menampilkan gambar contact.
    5. ContactItemBody (ungu) : Menampilkan data nama dan tag sosial media dari kontak.

  5. Sebelum membuat component satu per satu, siapkan dulu data yang hendak ditampilkan pada berkas JavaScript terpisah. Buatlah berkas JavaScript baru bernama data.js dan tuliskan kode berikut.

    const getData = () => {
 return [
   {
     id: 1,
     name: 'Dimas Saputra',
     tag: 'dimasmds',
     imageUrl: '/images/dimasmds.jpeg',
   },
   {
     id: 2,
     name: 'Arif Faizin',
     tag: 'arifaizin',
     imageUrl: '/images/arifaizin.jpeg',
   },
   {
     id: 3,
     name: 'Rahmat Fajri',
     tag: 'rfajri27',
     imageUrl: '/images/rfajri27.jpeg',
   },
 ];
}
 
export { getData };

    Proyek kali ini kita akan menerapkan teknik modularisasi. Tujuannya tidak lain untuk memudahkan kita dalam mengelola kode JavaScript. Dengan memisahkan kode ke berkas yang berbeda, diharapkan tak ada lagi kode JavaScript yang panjang dalam satu berkas. Percayalah, teknik modularisasi sangat memudahkan Anda ke depannya.

    Tak hanya data, teknik modularisasi juga akan diterapkan dalam pembuatan component. Jadi, setiap satu component kita tulis dalam satu berkas JavaScript terpisah.

  6. Kita mulai dengan component yang paling sederhana dulu, yakni ContactItemBody dan ContactItemImage. Mengapa? Karena kedua component tersebut tidak membutuhkan component lain yang harus dibuat terlebih dulu.

    Mari kita mulai dari ContactItemBody. Silakan buat berkas JavaScript baru bernama ContactItemBody.js di dalam folder src.


    Kemudian tuliskan kode pembuatan component-nya. Jangan lupa! Karena data nama dan tag kontak akan dikirim melalui properti, pastikan Anda sudah menyiapkannya.

    import React from 'react';
 
function ContactItemBody({ name, tag }) {
 return (
   <div className="contact-item__body">
     <h3 className="contact-item__title">{name}</h3>
     <p className="contact-item__username">@{tag}</p>
   </div>
 );
}
 
export default ContactItemBody;

    Kita perlu memperhatikan nilai class pada React element karena nantinya class ini akan digunakan sebagai selector ketika menerapkan styling dengan CSS. Dalam memberikan nilai class, kami mencoba mengikuti gaya konvensi BEM (Block Element Modifier). Jika Anda lihat, penamaan class yang diberikan terlihat mudah dipahami dan dibaca bukan?

    Selain itu, jangan lupa untuk selalu mengekspor component menggunakan export default setiap akhir pembuatan component pada berkas JavaScript. Hal tersebut dilakukan dilakukan supaya component dapat digunakan dan dikomposisikan oleh component lain di berkas JavaScript yang berbeda.

    Pengingat: Meskipun dengan JSX kita tidak perlu menggunakan keyword React ketika menggunakannya, tetapi tetap lakukan impor module React. Hal ini untuk menghindari “kemungkinan” eror yang terjadi ketika Babel hendak mengubah kode JSX menjadi kode JavaScript biasa (terutama bila Anda menggunakan React versi < 16).

  7. Kita lanjut membuat component yang kedua yaitu ContactItemImage. Silakan buat berkas JavaScript baru bernama ContactItemImage.js di dalam folder src.


    Tuliskan kode dalam membuat component-nya dan sediakan juga properti imageUrl untuk menampung url gambar yang akan diberikan oleh parent component.

    import React from 'react';
 
function ContactItemImage({ imageUrl }) {
 return (
   <div className="contact-item__image">
     <img src={imageUrl} alt="contact avatar"/>
   </div>
 );
}
 
export default ContactItemImage;

  8. Setelah komponen ContactItemBody dan ContactItemImage selesai, buatlah component ContactItem sebagai induk (parent) dari kedua komponen tersebut. Silakan buat berkas JavaScript bernama ContactItem.js di dalam src.


    Karena komponen ContactItemBody dan ContactItemImage akan digunakan di dalam komponen ini, pastikan Anda telah menyediakan data untuk kedua komponen tersebut melalui properti.

    import React from 'react';
import ContactItemBody from './ContactItemBody';
import ContactItemImage from './ContactItemImage';
 
function ContactItem({ imageUrl, name, tag }) {
 return (
   <div className="contact-item">
     <ContactItemImage imageUrl={imageUrl} />
     <ContactItemBody name={name} tag={tag} />
   </div>
 );
}
 
export default ContactItem;

  9. Sekarang buatlah component ContactList. Di sinilah kita akan melakukan perulangan (menggunakan map) dalam memanggil component ContactItem sebanyak data contacts yang diberikan melalui properti.

    Silakan buat berkas JavaScript ContactList.js di dalam folder src.


    Kemudian, tulis kode dalam pembuatan komponennya. Anda masih ingatkan cara membuat list di React? Kita praktikkan lagi di sini, ya!

    import React from 'react';
import ContactItem from './ContactItem';
 
function ContactList({ contacts }) {
 return (
   <div className="contact-list">
     {
       contacts.map((contact) => (
         <ContactItem key={contact.id} {...contact} />
       ))
     }
   </div>
 );
}
 
export default ContactList;

  10. Komponen terakhir yang perlu kita buat adalah ContactApp. Komponen ini menjadi root component atau induk dari induk component yang ada di dalam aplikasi ini. Di komponen ini juga data contacts--yang didapatkan dari fungsi getData--bersemayam.

    Silakan buat berkas JavaScript bernama ContactApp.js di dalam src.


    Kemudian tulis kode berikut di dalamnya.

    import React from 'react';
import ContactList from './ContactList';
import { getData } from './data';
 
function ContactApp() {
 const contacts = getData();
 
 return (
   <div className="contact-app">
     <h1>Daftar Kontak</h1>
     <ContactList contacts={contacts} />
   </div>
 );
}
 
export default ContactApp;

    Seperti yang Anda lihat pada kode di atas, praktik unidirectional data flow sangat kental di React. Sekali lagi, di React data selalu hidup (berada) di parent component. Jika child component membutuhkannya, data akan dikirim secara drilling (menurun) mulai dari komponen ContactList, ContactItem, ContactItemImage, dan ContactItemBody yang memanfaatkan properti.

  11. Terakhir! Agar apa yang kita kerjakan dapat terlihat pada browser, render-lah component ContactApp pada root. Silakan buka berkas index.js dan ubah kode template “Hello, World” menjadi seperti ini.

    import React from 'react';
import { createRoot } from 'react-dom/client';
import ContactApp from './ContactApp';
 
 
const root = createRoot(document.getElementById('root'));
root.render(<ContactApp />);

    Simpan seluruh perubahan dan jalankan kembali proyek (jika belum berjalan). Sekarang daftar kontak sudah tampak pada Browser.


    Voila! Tugas kita saat ini hampir selesai. Kita tinggal memberikan styling agar aplikasi tampak cantik. Nah, di latihan selanjutnya kami akan menunjukkan bagaimana menggunakan CSS pada proyek React.


Memberikan Styling

Ini adalah latihan sekaligus materi terakhir yang ada di modul React UI Component. Sebelumnya, Anda sudah berhasil menampilkan daftar kontak pada proyek contacts-app, tetapi masih ada yang kurang, yaitu menerapkan styling agar aplikasi tampak lebih menarik.

Ada dua pendekatan berbeda dalam melampirkan berkas styling di proyek React. Sama seperti gambar, kita bisa memperlakukannya seperti berkas statis dengan menyimpannya di dalam folder public atau kita bisa memperlakukannya sebagai module yang diimpor di dalam kode JavaScript. Di latihan kali ini, kita akan mencoba kedua pendekatan tersebut sehingga Anda bisa mengetahui perbedaannya.

Catatan: Latihan ini fokus terhadap tujuan “Bagaimana melampirkan/menggunakan berkas CSS pada proyek React”, bukan pada sintaksis CSS-nya. Jadi, kami tidak akan menjelaskan kode CSS yang kami berikan karena seharusnya Anda sudah mempelajarinya sebelum mengikuti kelas ini.

  1. Kita akan coba cara pertama yaitu memperlakukan berkas CSS sebagai berkas statis. Silakan buat berkas CSS baru bernama style.css di dalam folder public.


  2. Kemudian tuliskan kode CSS berikut.

    * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
 
body {
  font-family: 'Inter', sans-serif;
  background-color: whitesmoke;
}
 
img {
  width: 100%;
}
 
.contact-app {
  max-width: 800px;
  margin: 0 auto;
  padding: 16px;
 
}
 
.contact-app  h1 {
  font-weight: normal;
  font-size: 48px;
  margin-bottom: 32px;
}
 
.contact-item {
  display: flex;
  align-items: center;
  margin: 24px 0;
  border: 1px dashed black;
  padding: 16px;
  border-radius: 8px;
}
 
.contact-item__image img {
  width: 64px;
  border-radius: 50%;
}
 
.contact-item__body {
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid #aaa;
  flex: 1;
}
 
.contact-item__title {
  padding: 4px 0;
}
 
.contact-item__username {
  font-weight: lighter;
}
 
.contact-item__delete {
  padding: 8px;
  font-size: 18px;
  background-color: orangered;
  color: white;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
 
.contact-input {
  border: 1px dashed black;
  padding: 16px;
  margin: 14px 0;
  border-radius: 8px;
  margin-bottom: 32px;
}
 
.contact-input input {
  display: block;
  width: 100%;
  padding: 8px;
  margin: 8px 0;
  font-family: 'Inter', sans-serif;
}
 
.contact-input button {
  width: 100%;
  padding: 8px;
  font-family: 'Inter', sans-serif;
}

  3. Kemudian buka berkas index.html dan tambahkan elemen link di dalam elemen head untuk menghubungkan berkas CSS dengan HTML.

    <!DOCTYPE html>
<html lang="id">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
   <title>Contact Apps</title>
 </head>
 <body>
   <div id="root"></div>
 </body>
</html>

    Anda juga bisa menambahkan external CSS (sebelum style.css), misalnya dari Google Font karena di proyek ini kami menggunakan font “Inter” yang tersedia di Google Font.

    <!DOCTYPE html>
<html lang="id">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
   <!-- START: Google Font -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap" rel="stylesheet">
   <!-- END: Google Font -->
 
   <link rel="stylesheet" href="style.css">
   <title>Contact Apps</title>
 </head>
 <body>
   <div id="root"></div>
 </body>
</html>

  4. Simpan seluruh perubahan dan lihat kembali Browser Anda. Seharusnya aplikasi sudah berhasil menerapkan styling.


    Well done! Cara pertama berhasil, mudah ‘kan?

  5. Sekarang mari kita coba cara yang kedua yaitu memperlakukan berkas CSS sebagai module di berkas JavaScript.

    Agar dapat diimpor oleh berkas JavaScript, silakan pindahkan berkas style.css ke dalam folder src.


  6. Kemudian hapus juga penggunaan elemen link yang menghubungkan style.css pada index.html karena sudah tidak relevan lagi (tidak berada di folder public lagi).

    <link rel="stylesheet" href="style.css">

  7. Coba simpan dulu seluruh perubahan dan pastikan aplikasi kembali menampilkan UI tanpa styling.


  8. Kemudian, buka berkas index.js dan impor berkas style.css seperti ini.

    import React from 'react';
import { createRoot } from 'react-dom/client';
import ContactApp from './ContactApp';
 
// styling
import './style.css';
 
const root = createRoot(document.getElementById('root'));
root.render(<ContactApp />);

    Simpan perubahan kode dan lihat kembali hasilnya pada Browser. Seharusnya styling berhasil diterapkan kembali.


    Selamat! Anda berhasil menerapkan styling dengan teknik modularisasi. Teknik ini cocok ketika Anda ingin memisahkan styling menjadi beberapa berkas css terpisah dan mengimpornya pada component yang spesifik. Dengan begitu, berkas styling dapat lebih mudah dikelola, terlebih bila proyek yang Anda buat semakin besar nantinya.

  9. Karena sekarang di dalam folder src sudah mulai banyak berkas, Anda bisa mulai mengelompokkan berkas-berkas berdasarkan jenisnya. Misal, jika seluruh berkas JavaScript yang merupakan component, simpanlah di folder baru bernama components. Anda juga bisa mengelompokkan berkas CSS (walaupun saat ini hanya satu) pada folder terpisah, misalnya styles.


    Bila sudah dikelompokkan pada folder terpisah, jangan lupa juga untuk memperbaiki beberapa path (alamat berkas) yang berubah pada saat melakukan impor di berkas index.js dan ContactApp.js.

    // index.js
import React from 'react';
import { createRoot } from 'react-dom/client';
import ContactApp from './components/ContactApp';
 
// styling
import './styles/style.css';
 
const root = createRoot(document.getElementById('root'));
root.render(<ContactApp />);


    // ContactApp.js
import React from 'react';
import ContactList from './ContactList';
import { getData } from '../utils/data';
 
function ContactApp() {
 const contacts = getData();
 
 return (
   <div className="contact-app">
     <h1>Daftar Kontak</h1>
     <ContactList contacts={contacts} />
   </div>
 );
}
 
 
export default ContactApp;

    Simpan seluruh perubahan dan pastikan proyek tetap berjalan dengan baik ya!


Sebelumnya : React UI Component Selanjutnya : Stateful Component