Terakhir diperbarui: 20 Februari 2024

Pengenalan ReactJS

Pada codelabs ini, Anda akan belajar dan praktik tentang framework ReactJS. Mulai dari pengenalan ReactJS, fitur-fitur yang ada, sampai cara membuat project pertama dalam ReactJS.

Pengetahun yang Anda harus miliki

Sebelum memulai codelab ini, sebaiknya Anda memiliki pengetahuan dasar tentang:

Apa yang Anda akan pelajari

Apa yang Anda perlu persiapkan

Pengenalan ReactJS Framework

React adalah sebuah library JavaScript yang dikembangkan dan dikelola oleh Facebook dan Instagram untuk menampilkan data dan membuat komponen-komponen User Interface. Menurut layanan analitik Libscore, saat ini React digunakan oleh Netflix, Imgur, Bleacher Report, Feedly, Airbnb, SeatGeek, HelloSign, Walmart, dan lain-lain (Wikipedia).

Konsep

Atomic Design Methodology

(ADM)

Dalam konsep ADM, komponen dapat diumpakan sebagai atom. Kita menggabunkan atom-atom menjadi molekul, molekul menjadi organisme, organisme menjadi template, template menjadi halaman-halaman. React sangat cocok diaplikasikan ke dalam konsep pengembangan ADM karena dalam React kita memulai dari mengembangkan komponen-komponen yang kita gabungkan untuk membentuk sebuah halaman.

Keterangan lebih lanjut mengenai ADM dapat dibaca di tautan ini.

Beberapa fitur-fitur yang dimiliki React adalah sebagai berikut:

  1. Deklaratif

React membuat proses pembuatan antarmuka pengguna interaktif menjadi lebih mudah. Buat tampilan sederhana untuk setiap state di aplikasi Anda, dan React akan secara efisien memperbarui dan me-render hanya komponen yang diperlukan ketika data Anda berubah.

Tampilan yang deklaratif membuat jalannya kode Anda menjadi lebih terprediksi dan lebih mudah untuk di-debug.

  1. Berbasis Komponen

Bangun komponen-komponen terenkapsulasi yang mengatur state-nya sendiri, kemudian gabungkan mereka untuk membentuk antarmuka pengguna yang lebih kompleks.

Karena logika pada komponen React ditulis langsung menggunakan JavaScript (bukan menggunakan templat), Anda dapat dengan mudah mengoper data melalui aplikasi Anda dan menempatkan state agar tetap berada di luar DOM.

  1. Belajar sekali, tulis di mana saja

Kami tidak berasumsi mengenai teknologi yang Anda gunakan di dalam stak Anda, jadi Anda dapat mengembangkan fitur baru menggunakan React tanpa menulis ulang kode yang sudah ada.

React juga dapat digunakan untuk me-render di server menggunakan Node dan membangun aplikasi mobile menggunakan React Native.

Memulai Proyek Baru dengan React

Jika Anda ingin membuat aplikasi baru atau situs web baru dengan menggunakan React, kami merekomendasikan Anda untuk memilih salah satu dari framework berbasis React yang populer di komunitas. framework menyediakan fitur-fitur yang sebagian besar aplikasi dan situs web butuhkan, termasuk routing, pengambilan data, dan pembuatan halaman HTML.

Next.js

Next.js adalah full-stack framework React. framework ini serbaguna dan memudahkan Anda untuk membuat aplikasi React dalam berbagai ukuran—mulai dari halaman blog statis hingga aplikasi dinamis yang kompleks.

Jika Anda baru menggunakan Next.js, baca panduan Next.js.

Next.js dikelola oleh Vercel. Anda dapat memasang aplikasi Next.js ke semua ekosistem berbasis Node.js atau serverless hosting atau pada server Anda sendiri. Aplikasi statis Next.js dapat dipasang pada layanan hosting statis apa pun.

Untuk membuat proyek Next.js, jalankan di terminal Anda seperti berikut:

npx create-next-app

Remix

Remix adalah full-stack framework React yang menggunakan teknologi nested routing. framework ini membantu Anda untuk dapat memecah aplikasi Anda ke dalam bagian - bagian bersarang yang dapat memuat data secara paralel dan melakukan refresh sebagai bentuk respon dari aksi yang dilakukan oleh pengguna.

Jika Anda baru menggunakan Remix, lihat panduan membuat blog dengan Remix (pendek) dan panduan membuat aplikasi dengan Remix (panjang).

Remix dikelola oleh Shopify. Saat Anda membuat proyek Remix, Anda perlu untuk memilih target pemasangan Anda. Anda dapat memasang aplikasi Remix ke semua hosting Node.js atau serverless dengan menggunanakan atau menuliskan sebuah adaptor.

Untuk membuat proyek Remix, jalankan perintah ini di terminal Anda seperti berikut:

npx create-remix

Gatsby

Gatsby adalah framework React untuk situs web berbasis sistem manajemen konten cepat. Ekosistem plugin yang dimiliki serta lapisan data GraphQL dari Gatsby dapat memudahkan Anda dalam melakukan integrasi konten, API, dan layanan ke dalam satu situs web.

Jika Anda baru menggunakan Gatsby, lihat panduan Gatsby.

Gatsby dikelola oleh Netlify. Anda dapat memasang situs statis Gatsby ke hosting statis apa pun. Jika Anda memilih untuk menggunakan fitur server-only, Anda perlu memastikan jika penyedia layanan hosting mendukung hal tersebut untuk Gatsby.

Untuk membuat proyek Gatsby baru, jalankan perintah berikut di terminal:

npx create-gatsby

Expo (untuk aplikasi native)

Expo adalah framework React yang membantu Anda untuk dapat membuat aplikasi universal untuk Android, iOS, dan web dengan menggunakan tampilan antarmuka pengguna yang asli bawaan dari platform tersebut (native). Framework ini menyediakan kit pengembangan perangkat lunak (SDK) untuk React Native yang membuat komponen native dapat digunakan dengan mudah. Jika Anda baru menggunakan Expo, lihat panduan Expo.

Expo dikelola oleh Expo (perusahaan). Anda dapat Membuat aplikasi menggunakan Expo secara gratis, dan Anda dapat mengirimkan aplikasi Anda ke Google Play Store dan Apple App Store tanpa syarat tertentu. Sebagai tambahan, Expo juga menyediakan pilihan layanan komputasi awan (cloud) berbayar.

Untuk membuat proyek Expo baru, jalankan perintah berikut di terminal:

npx create-expo-app

Pertanyaan selanjutnya ...

Apakah bisa menggunakan React tanpa menggunakan framework?

Anda dapat menggunakan React tanpa menggunakan framework—begitupun Anda dapat menggunakan React untuk sebagian dari halaman proyek Anda. Namun, jika Anda ingin membuat aplikasi atau situs baru sepenuhnya menggunakan React, kami merekomendasikan Anda untuk menggunakan framework.

Berikut alasannya.

Meskipun Anda tidak membutuhkan fungsi routing maupun pengambilan data di awal pembuatan proyek, suatu waktu Anda perlu menambahkan beberapa library baru untuk proyek tersebut. Semakin bertambahnya ukuran bundel JavaScript karena bertambahnya fitur baru, Anda perlu memikirkan bagaimana cara untuk memecah kode untuk setiap route secara individu. Dengan semakin kompleksnya kebutuhan pengambilan data, Anda mungkin akan menghadapi situasi semakin banyaknya permintaan jaringan antara server dan klien yang akan membuat aplikasi Anda terasa sangat lambat. Semakin banyak pengguna Anda dengan kondisi jaringan yang buruk dan perangkat dengan spesifikasi rendah serta fitur terbatas, Anda mungkin perlu untuk dapat membuat HTML dari komponen aplikasi Anda untuk bisa menampilkan konten aplikasi secara cepat—baik di server, atau saat waktu build. Mengubah susunan sistem untuk menjalankan kode di server atau saat waktu build sangatlah rumit.

Masalah ini tidak hanya terjadi di React. Itulah mengapa Svelte memiliki SvelteKit, Vue memiliki Nuxt, dan lain sebagainya. Untuk menyelesaikan masalah ini, Anda perlu untuk mengintegrasikan bundler Anda dengan router Anda dan dengan library pengambilan data Anda. Membuat pengaturan awal dapat bekerja bukanlah hal yang sulit, namun terdapat banyak seluk-beluk yang terlibat dalam pembuatan suatu aplikasi yang dapat memuat dengan cepat meskipun terus berkembang dari waktu ke waktu. Anda mungkin ingin mengirimkan kode aplikasi dalam jumlah seminimal mungkin namun dapat melakukannya dalam sekali jalan antara klien dan server pulang pergi, yang juga secara paralel dengan data apa pun yang dibutuhkan untuk halaman tersebut. Anda mungkin ingin membuat halaman menjadi interaktif bahkan sebelum kode JavaScript dijalankan, untuk dapat mendukung peningkatan progresif. Anda mungkin ingin membuat sebuah folder dengan semua berkas HTML statis untuk halaman marketing Anda yang dapat dipasang dimanapun dan dapat bekerja meskipun tanpa JavaScript. Membangun aplikasi dengan kemampuan seperti ini membutuhkan kerja keras dari Anda untuk mewujudkannya.

Secara umum, framework React dapat menyelesaikan masalah yang disebutkan sebelumnya, tanpa perlu usaha tambahan dari Anda. React membantu Anda untuk dapat mulai membuat proyek dengan sangat ringkas dan kemudian mengembangkan aplikasi Anda sesuai kebutuhan Anda. Setiap framework React memiliki komunitas yang aktif, sehingga Anda akan dengan mudah untuk menemukan jawaban atas pertanyaan serta informasi terkait peningkatan peralatan Anda. Framework juga membantu Anda dalam menstrukturkan kode, membantu Anda dan orang lain untuk memahami konteks dan keterampilan di antara berbagai proyek. Sebaliknya dengan menggunakan pengaturan sendiri, Anda akan mudah terjebak pada versi dependensi yang sudah tidak didukung, dan pada akhirnya Anda akan membuat framework Anda sendiri tanpa komunitas dan rencana peningkataan untuk membantu framework tersebut terus berkembang (mungkin framework tersebut pun mirip seperti yang pernah mereka buat di masa lalu, dengan desain yang lebih asal-asalan).

Setelah dari codelab atau pertemuan pertama, Anda telah menyiapkan lingkungan pengembangan. Kali ini, Anda akan mencoba untuk mulai membuat project pertama. Selesaikan langkah-langkah praktikum berikut ini menggunakan editor Visual Studio Code (VS Code) atau code editor lain kesukaan Anda. Jawablah di laporan praktikum Anda pada setiap soal yang ada di beberapa langkah praktikum ini.

Langkah 1: Buat Folder Baru

Buatlah folder baru bernama belajar-react lalu di dalam folder tersebut, jalankan terminal dengan mengetikkan perintah berikut:

npx create-next-app

Langkah 2: Buat project baru

Buatlah project baru bernama hello-world seperti pada gambar berikut ini:

Tunggu proses instalasi dan pembuatan project baru react Anda hingga selesai.

Langkah 3: Buka dengan VS Code

Setelah selesai proses langkah sebelumnya, ketik per baris di terminal seperti berikut untuk masuk ke folder project dan dibuka dengan VS Code.

cd hello-world

(enter)

code .

(enter)

Maka VS Code akan membuka project react Anda yang telah dibuat bernama hello-world.

Perhatikan struktur file dan folder project react yang telah kita buat ini. Terlihat bahwa inisial Git dalam project ini sudah termasuk, sehingga Anda cukup membuat repository di akun GitHub lalu mengonekkan dengan project ini. Silakan cari tau bagaimana setup link repository ke project ini.

Langkah 4: Run

Sekarang kita coba running project pertama kita dengan menjalankan perintah berikut di terminal VS Code.

npm run dev

Tunggu proses kompilasi hingga selesai. Lalu Anda dapat membuka alamat localhost di browser: http://localhost:3000/

Jika di browser telah tampil seperti gambar berikut ini, Selamat!
  1. Buatlah repository di akun GitHub Anda dengan nama #02-react-hello-world kemudian kumpulkan link tersebut ke dosen pengampu sesuai media yang disepakati.
  2. Hapus isi file README.md yang ada di project hello-world tersebut, kemudian isi dengan jawaban praktikum mulai dari soal 1 hingga 3.
  3. Jangan lupa push project dan jawaban Anda melalui VS Code dengan pesan commit "Week 02: belajar react"
  4. Cobalah buat project react lainnya dengan menggunakan framework Remix dan Gatsby. Ini tidak perlu di push, cukup screenshot dan jelaskan perbedaannya diantara ketiga framework tersebut (termasuk Next.js) di file README nomor 1.

Aplikasi React dibuat dari komponen. Komponen adalah bagian dari UI (user interface, antarmuka pengguna) yang memiliki logika dan tampilan tersendiri. Sebuah komponen dapat berukuran sekecil tombol, atau sebesar seluruh halaman.

Komponen React adalah fungsi JavaScript yang mengembalikan markup:

function MyButton() {
  return (
    <button>Saya adalah tombol</button>
  );
}

Sekarang setelah Anda mendeklarasikan MyButton, Anda dapat menyarangkannya ke dalam komponen lain:

export default function MyApp() {
  return (
    <div>
      <h1>Selamat datang di aplikasi saya</h1>
      <MyButton />
    </div>
  );
}

Perhatikan bahwa komponen MyButton dimulai dengan huruf kapital. Dengan cara itulah Anda mengetahui bahwa itu adalah sebuah komponen React. Nama komponen React harus selalu dimulai dengan huruf kapital, sedangkan tag HTML harus menggunakan huruf kecil.

Kata kunci export default menentukan komponen utama di dalam berkas (file). Jika Anda tidak terbiasa dengan beberapa bagian dari sintaksis JavaScript, MDN dan javascript.info memiliki referensi yang bagus.

Sintaksis markup yang Anda lihat di atas disebut dengan JSX. JSX ini opsional, tetapi sebagian besar proyek React menggunakan JSX untuk kenyamanannya. Semua alat yang kami rekomendasikan untuk pengembangan lokal mendukung JSX secara langsung.

JSX lebih ketat daripada HTML. Anda harus menutup tag seperti <br />. Komponen Anda juga tidak boleh mengembalikan beberapa tag JSX. Anda harus membungkusnya menjadi induk bersama (shared parent), seperti <div>...</div> atau sebuah pembungkus kosong <>...</>:

function AboutPage() {
  return (
    <>
      <h1>Tentang</h1>
      <p>Halo.<br />Apa kabar?</p>
    </>
  );
}

Jika Anda memiliki banyak HTML untuk dipindahkan (port) ke JSX, Anda dapat menggunakan konverter online.

Menampilkan data dengan JSX

JSX memungkinkan Anda memasukkan markup ke dalam JavaScript. Kurung kurawal (curly braces) memungkinkan Anda "kembali" (escape back) ke dalam JavaScript sehingga Anda dapat menanamkan (embed) beberapa variabel dari kode Anda dan menampilkannya kepada pengguna. Sebagai contoh, ini akan menampilkan user.name:

return (
  <h1>
    {user.name}
  </h1>
);

Anda juga dapat "kembali ke JavaScript" dari atribut JSX, tetapi Anda harus menggunakan tanda kurung kurawal daripada tanda kutip (quotes). Sebagai contoh, className="avatar" mengoper string "avatar" sebagai kelas CSS (CSS class), tetapi src={user.imageUrl} membaca nilai variabel JavaScript user.imageUrl, dan kemudian mengoper nilai tersebut sebagai atribut src:

return (
  <img
    className="avatar"
    src={user.imageUrl}
  />
);

Anda dapat menaruh ekspresi yang lebih kompleks (complex expressions) di dalam kurung kurawal JSX juga, contohnya, penggabungan string (string concatenation):

Kode JSX image

const user = {
  name: 'Fulanah bin Fulan',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Foto ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}

Hasilnya:

Pada contoh di atas, style={{}} bukanlah sintaksis khusus, melainkan objek {} biasa di dalam kurung kurawal JSX. Anda dapat menggunakan atribut style ketika styles Anda bergantung pada variabel JavaScript.

Selamat, Anda telah berhasil menyelesaikan codelab ini. Beberapa konsep ReactJS yang lain akan dipelajari pada pertemuan berikutnya.

Apa selanjutnya?

Silakan cek beberapa sumber belajar lainnya...

Referensi