BlogMusarif

Introduction to React

Muhammad Syaifullah Al Arief's photo
Muhammad Syaifullah Al Arief
·

14 min read

React adalah sebuah perpustakaan JavaScript yang kuat dan populer untuk membangun antarmuka pengguna (UI) yang dinamis dan interaktif dalam aplikasi web. Dikembangkan oleh Facebook, React telah menjadi salah satu alat utama dalam pengembangan aplikasi web modern. Dalam blog ini, kita akan mempelajari apa itu React, mengapa itu penting, dan bagaimana kita bisa memulai penggunaannya.

Apa Itu React ?

React adalah sebuah perpustakaan JavaScript yang kuat untuk membangun antarmuka pengguna (UI) dalam aplikasi web. Dikembangkan oleh tim engineer Facebook, React dirilis secara open-source pada tahun 2013 dan sejak itu telah menjadi salah satu alat utama dalam pengembangan aplikasi web modern.

React menggunakan konsep komponen untuk memecah antarmuka pengguna menjadi bagian-bagian yang terpisah, yang membuatnya lebih mudah dikelola, dipelihara, dan diuji. Salah satu fitur kunci dari React adalah penggunaan Virtual DOM, yang memungkinkan React untuk membuat perubahan pada tampilan dengan efisien, meningkatkan performa aplikasi secara keseluruhan.

Sejarah React

Pada awalnya, tim pengembangan Facebook merasa kesulitan dalam mengelola dan memperbarui antarmuka pengguna yang kompleks dalam aplikasi web mereka. Mereka mencari solusi untuk masalah ini, yang kemudian mengarah pada pengembangan sebuah perpustakaan yang memungkinkan pembangunan antarmuka pengguna yang lebih efisien dan mudah di-maintain.

Pengembangan Awal React:

  • 2011: Seorang insinyur Facebook bernama Jordan Walke mulai mengembangkan prototipe awal dari "FaxJS" yang kemudian dikenal sebagai React.

  • 2012: Tim Facebook mulai menggunakan prototipe React secara internal untuk menguji dan memperbaiki kinerjanya. Mereka menemukan bahwa React membuat pengembangan antarmuka pengguna menjadi lebih cepat dan lebih mudah di-maintain, terutama dalam aplikasi web yang kompleks dan dinamis.

Rilis Pertama:

  • Mei 2013: React dirilis secara publik sebagai proyek open-source. Dirilis dengan nama "React.js", ini menandai titik awal bagi React sebagai sebuah perpustakaan yang dapat diakses oleh pengembang di seluruh dunia. React awalnya difokuskan untuk digunakan dalam membangun antarmuka pengguna di aplikasi web, menyediakan cara yang lebih efisien untuk memanipulasi tampilan dan merespons perubahan data.

Pertumbuhan dan Penerimaan:

  • 2014-2015: React mulai mendapatkan popularitas yang signifikan di komunitas pengembangan web. Banyak perusahaan besar seperti Instagram, Airbnb, dan Netflix mulai mengadopsi React dalam pengembangan aplikasi mereka.

    React juga memperkenalkan tentang "React Native" pada tahun 2015, yang memungkinkan pengembang untuk menggunakan React untuk membangun aplikasi mobile untuk platform iOS dan Android.

Inovasi dan Pembaruan:

  • 2016: Rilis React versi 15 memperkenalkan konsep "Fiber", sebuah rekonseptualisasi dari bagaimana React bekerja di bawah kap. Fiber memberikan performa yang lebih baik dan memungkinkan pengembangan fitur-fitur baru yang lebih canggih. Sejak itu, React terus berkembang dengan rilis versi baru, pembaruan fitur, dan peningkatan kinerja. Komunitas pengembang yang semakin besar dan aktif terus berkontribusi pada perkembangan React.

React telah menjadi salah satu perpustakaan JavaScript yang paling populer dan banyak digunakan di dunia, digunakan oleh ribuan perusahaan di berbagai industri untuk membangun aplikasi web dan mobile yang kuat, dinamis, dan responsif

Melalui pengembangan yang terus-menerus, inovasi, dan penerimaan yang luas di kalangan komunitas pengembang, React telah membawa dampak besar dalam pengembangan web modern dan terus menjadi salah satu alat utama dalam ekosistem pengembangan perangkat lunak.

Mengapa Menggunakan React?

Dalam pengembangan aplikasi web modern, pemilihan alat yang tepat untuk membangun antarmuka pengguna (UI) menjadi sangat penting. Salah satu pilihan yang sangat populer di kalangan pengembang adalah React. Mengapa kita harus memilih React dan apa keunggulan yang ditawarkannya? untuk mengetahuinya kita berikut beberapa fitur react yang membuat react populer.

Fitur-fitur Utama React

React adalah salah satu perpustakaan JavaScript yang paling populer untuk membangun antarmuka pengguna (UI) dalam aplikasi web modern. React memiliki sejumlah fitur yang menjadikannya pilihan yang menarik bagi pengembang. beberapa fitur utama React yang membuatnya menarik adalah :

  1. Virtual DOM

    React menggunakan konsep Virtual DOM, yang merupakan representasi virtual dari DOM aktual dalam memori. Saat ada perubahan pada data aplikasi, React membangun kembali Virtual DOM, membandingkannya dengan DOM aktual, dan hanya memperbarui komponen yang benar-benar berubah. Ini menghasilkan proses re-render yang lebih cepat dan efisien, membuat aplikasi React lebih responsif.

  2. Component-Based

    React membagi antarmuka pengguna menjadi komponen-komponen yang terpisah dan reusable. Setiap komponen memiliki tugasnya sendiri dan dapat digunakan kembali di seluruh aplikasi. Pendekatan berbasis komponen ini membuat kode lebih terorganisir, mudah dimengerti, dan mudah di-maintain, terutama dalam aplikasi yang kompleks.

  3. JSX (JavaScript XML)

    JSX adalah ekstensi JavaScript yang memungkinkan kita menulis markup HTML langsung di dalam kode JavaScript. Ini memungkinkan pembangunan antarmuka pengguna yang deklaratif dan intuitif, di mana kita dapat menggabungkan logika JavaScript dan struktur HTML secara bersamaan. JSX membuat kode lebih ekspresif dan membantu dalam pembacaan serta pemeliharaan kode.

  4. One-Way Data Flow

    React menerapkan pola aliran data satu arah, yang berarti data mengalir dari komponen induk ke komponen anak. Ini membuat kode lebih mudah diprediksi dan debug, karena perubahan pada data hanya terjadi dari satu arah. Hal ini juga mencegah masalah lintasan data yang kompleks dan sulit dipelihara.

  5. Komunitas yang Luas

    React memiliki komunitas pengembang yang besar dan aktif, dengan ribuan kontributor dan sumber daya pembelajaran yang tersedia secara daring. Ini membuat mudah untuk mempelajari React, mendapatkan bantuan, dan berbagi pengetahuan dengan sesama pengembang. Komunitas yang luas juga berarti ada banyak plugin, library, dan alat bantu yang tersedia untuk meningkatkan pengalaman pengembangan dengan React.

Apa itu virtual DOM ?

Dalam pengembangan aplikasi web modern, performa merupakan salah satu faktor kunci yang perlu dipertimbangkan. Salah satu konsep yang penting dalam meningkatkan performa aplikasi web adalah penggunaan virtual DOM. kita akan belajar apa itu konsep virtual DOM, bagaimana React mengimplementasikannya, dan bagaimana hal ini dapat meningkatkan performa aplikasi web.

source img: wikipedia

DOM adalah representasi struktur dokumen HTML/XML dalam bentuk pohon yang dapat dimanipulasi menggunakan JavaScript. Setiap kali terjadi perubahan pada elemen di dalam DOM, browser harus melakukan re-rendering atau pembaruan untuk memperbarui tampilan halaman.

Virtual DOM adalah konsep yang diciptakan untuk meningkatkan efisiensi dalam proses re-rendering ini. Virtual DOM adalah representasi virtual dari DOM yang disimpan dalam memori. Saat terjadi perubahan pada aplikasi, React membuat salinan baru dari virtual DOM, membandingkannya dengan DOM yang ada, dan hanya melakukan pembaruan pada bagian yang berubah. Ini mengurangi jumlah pembaruan yang diperlukan oleh browser, sehingga meningkatkan performa aplikasi secara keseluruhan.

Bagaimana React Menggunakan Virtual DOM?

React menggunakan virtual DOM sebagai bagian dari proses re-rendering komponen. Ketika ada perubahan pada state atau props komponen, React membuat salinan baru dari virtual DOM dan membandingkannya dengan versi sebelumnya. React kemudian menentukan perubahan yang terjadi dan hanya melakukan pembaruan pada bagian yang diperlukan dalam DOM aktual. Hal ini memungkinkan React untuk melakukan re-rendering secara efisien tanpa harus memperbarui seluruh halaman.

Manfaat Meningkatkan Performa Aplikasi dengan React dan Virtual DOM

  1. Pembaruan Efisien: Dengan menggunakan virtual DOM, React hanya melakukan pembaruan pada bagian yang berubah dalam DOM aktual, mengurangi beban kerja pada browser dan meningkatkan efisiensi.

  2. Peningkatan Responsif: Karena re-rendering hanya terjadi pada bagian yang berubah, aplikasi React cenderung lebih responsif terhadap interaksi pengguna, seperti klik tombol atau input pengguna.

  3. Pengalaman Pengguna yang Lebih Baik: Dengan meningkatkan performa aplikasi, pengguna akan merasakan pengalaman pengguna yang lebih baik, dengan waktu muat yang lebih cepat dan respons yang lebih cepat dari aplikasi.

Dengan menggunakan konsep virtual DOM, React berhasil meningkatkan performa aplikasi web secara signifikan. Ini merupakan salah satu dari banyak alasan mengapa React menjadi pilihan populer dalam pengembangan aplikasi web modern.

Komponen dalam React

Dalam pengembangan aplikasi web modern, konsep komponen telah menjadi landasan utama dalam membangun antarmuka pengguna yang dinamis dan interaktif. Dalam konteks pengembangan web, komponen adalah bagian-bagian kecil yang dapat digunakan kembali yang membentuk struktur dasar dari sebuah aplikasi.

React, sebagai salah satu perpustakaan JavaScript yang paling populer, memperkenalkan konsep komponen ke dalam pengembangan web dengan cara yang revolusioner. Dalam blog ini, kita akan belajar konsep komponen dalam React, perbedaan antara class component dan functional component, dan mengapa komponen merupakan bagian inti dari pengembangan dengan React.

Apa Itu Komponen?

Komponen adalah blok bangunan dasar dari sebuah aplikasi React. Secara sederhana, komponen dapat dianggap sebagai bagian-bagian kecil dari antarmuka pengguna (UI) yang dapat digunakan secara berulang. Contohnya, kita bisa memiliki komponen untuk header, sidebar, konten, footer, dan lain-lain.

Jenis-jenis Komponen di React

Dalam pengembangan aplikasi web dengan React, komponen adalah bagian inti yang memungkinkan kita untuk membangun antarmuka pengguna yang dinamis dan modular. Dalam React, terdapat dua jenis utama komponen yang digunakan: class component dan functional component. Selanjutnya, kita akan belajar tentang masing-masing jenis komponen:

Class Component

Class component adalah salah satu jenis komponen di React yang dituliskan dalam bentuk class JavaScript. Sebelum adanya functional component, class component adalah satu-satunya cara untuk membuat komponen di React. Class component memiliki beberapa fitur khusus, seperti kemampuan untuk menyimpan dan mengelola state serta menggunakan lifecycle methods.

Karakteristik:

  • Didefinisikan sebagai class JavaScript yang mengextends dari class React.Component.

  • Memiliki sebuah method render() yang mengembalikan elemen React.

  • Dapat menyimpan state menggunakan this.state dan mengupdate state menggunakan this.setState().

  • Memiliki akses ke lifecycle methods seperti componentDidMount, componentDidUpdate, dan componentWillUnmount.

Contoh kode class component:

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>Counter: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

export default Counter;

Functional Component

Functional component adalah jenis komponen di React yang dituliskan dalam bentuk fungsi (function) JavaScript. Functional component diperkenalkan sebagai alternatif yang lebih sederhana dan ringkas untuk membuat komponen di React. .

Karakteristik:

  • Didefinisikan sebagai sebuah fungsi JavaScript yang mengembalikan elemen React.

  • Lebih sederhana, ringkas, dan mudah dipahami dibandingkan dengan class component.

Contoh kode functional component:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Counter: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

export default Counter;

Banyak pengembang React yang beralih dari penggunaan class component ke functional component karena beberapa alasan berikut:

  1. Sintaks yang Lebih Ringkas: Functional component menggunakan sintaks arrow function yang lebih sederhana dan ringkas dibandingkan dengan class component. Hal ini membuat kode menjadi lebih mudah dibaca dan ditulis.

  2. Penyederhanaan Kode: Dengan penggunaan functional component, kita tidak perlu lagi mendefinisikan constructor atau menggunakan metode seperti render(), componentDidMount(), componentDidUpdate(), dsb. Semua logika terkait rendering diletakkan dalam body fungsi, membuat kode menjadi lebih mudah dimengerti dan dikelola.

  3. Performa yang Lebih Baik: Functional component cenderung memiliki performa yang lebih baik karena mereka adalah fungsi murni yang tidak memiliki konsep "this" seperti pada class component. Ini mengurangi overhead yang terkait dengan pembuatan instance class dan memungkinkan React untuk melakukan beberapa optimasi internal.

  4. Hooks: Functional component mendukung penggunaan hooks seperti useState, useEffect, useContext, dsb. Hooks memungkinkan kita untuk menggunakan fitur-fitur seperti state dan efek samping dalam functional component tanpa perlu mengubahnya menjadi class component. Hal ini memudahkan pengembangan dan memungkinkan penulisan kode yang lebih bersih dan terorganisir.

  5. Perkembangan React yang Pesat: React terus berkembang, dan ada peningkatan signifikan pada dukungan untuk functional component dan hooks dalam versi-versi terbaru. Seiring dengan itu, semakin banyak pengembang dan sumber daya yang tersedia untuk mendukung penggunaan functional component dalam pengembangan aplikasi React.

Mengapa komponen penting di React ?

Komponen merupakan bagian inti dari pengembangan dengan React karena beberapa alasan utama:

  1. Reusable: Komponen memungkinkan kita untuk membagi UI menjadi bagian-bagian kecil yang independen dan dapat digunakan kembali. Kita dapat membuat komponen yang mewakili bagian-bagian UI tertentu, seperti tombol, formulir, kartu, dll., dan menggunakannya di berbagai bagian aplikasi tanpa perlu menulis ulang kode yang sama.

  2. Modular: Dengan menggunakan komponen, kita dapat membagi aplikasi menjadi modul-modul yang terpisah, yang membuat pengembangan menjadi lebih terorganisir dan mudah dikelola. Setiap komponen bertanggung jawab atas satu tugas tertentu, sehingga memudahkan untuk memahami dan memelihara kode.

  3. Abstraksi: Komponen memungkinkan kita untuk memikirkan UI secara abstrak, terlepas dari detail implementasi. Kita dapat membuat komponen yang memiliki antarmuka yang jelas dan menggunakan prop untuk menentukan perilaku dan tampilan komponen tersebut. Hal ini memungkinkan pemisahan antara logika bisnis dan tampilan UI.

  4. Reusable Logics: Selain tampilan, komponen juga dapat mengandung logika dan fungsionalitas yang dapat digunakan kembali. Dengan menggunakan komponen fungsional, kita dapat mengisolasi dan menggunakan logika tertentu tanpa perlu mengulangi kode yang sama di banyak tempat.

  5. Kemudahan Pengujian: Karena komponen bersifat terisolasi dan memiliki antarmuka yang jelas, pengujian komponen menjadi lebih mudah. Kita dapat menguji setiap komponen secara terpisah, tanpa perlu memperhatikan detail implementasi komponen lain dalam aplikasi.

Dengan menggunakan komponen sebagai fondasi pengembangan dengan React, kita dapat membangun aplikasi yang modular, terstruktur, dan mudah dikelola. Komponen memungkinkan kita untuk memecah kompleksitas menjadi bagian-bagian yang lebih kecil dan mempercepat proses pengembangan serta memelihara aplikasi dalam jangka panjang.

Ekosistem React

Ekosistem React merupakan kumpulan alat, pustaka, dan sumber daya yang berkembang di sekitar perpustakaan JavaScript populer, React. Seiring dengan popularitas React yang terus meningkat dalam pengembangan aplikasi web modern, ekosistemnya juga berkembang pesat untuk memenuhi kebutuhan pengembang dan memberikan solusi untuk berbagai tantangan pengembangan.

Macam-macam Ekosistem di React

  1. Redux

    • Redux adalah pustaka manajemen state yang populer dalam ekosistem React.

    • Redux membantu dalam mengelola state aplikasi yang kompleks dengan menyimpannya dalam satu store global yang dapat diakses dari mana saja dalam aplikasi.

    • Redux memiliki konsep dasar seperti actions, reducers, dan store yang membantu dalam mengorganisir logika state aplikasi.

  2. Zustand

    • Zustand adalah pustaka manajemen state sederhana dan ringan yang dibuat khusus untuk penggunaan dalam aplikasi React.

    • Zustand menyediakan cara yang intuitif dan langsung untuk mengelola state aplikasi tanpa kompleksitas yang ditawarkan oleh Redux.

    • Dengan Zustand, pengembang dapat dengan mudah membuat dan mengelola state global dalam aplikasi React tanpa perlu memikirkan boilerplate code atau konfigurasi yang rumit.

  3. React Router

    • React Router adalah pustaka routing yang digunakan dalam aplikasi React untuk menangani navigasi antar halaman.

    • Dengan React Router, pengembang dapat menentukan rute-rute aplikasi dan mengubah tampilan berdasarkan URL yang dinavigasikan pengguna.

    • React Router mendukung konsep seperti Route, Link, Redirect, dan lainnya untuk mengatur navigasi aplikasi dengan mudah.

  4. Axios

    • Axios adalah pustaka HTTP client yang digunakan untuk berkomunikasi dengan server dalam aplikasi React.

    • Axios menyediakan cara yang mudah dan kuat untuk melakukan permintaan HTTP, seperti GET, POST, PUT, dan DELETE.

    • Dibandingkan dengan pilihan lainnya seperti Fetch API, Axios lebih mudah digunakan dan memiliki fitur tambahan seperti menangani respons error dengan lebih baik.

  5. Styled-components

    • Styled-components adalah pustaka styling CSS-in-JS yang populer dalam ekosistem React.

    • Dengan Styled-components, pengembang dapat menulis gaya CSS menggunakan sintaksis JavaScript yang mudah diintegrasikan dengan komponen React.

    • Ini memungkinkan pembuatan komponen yang terisolasi dengan gaya mereka sendiri, meningkatkan modularitas dan pemeliharaan kode.

  6. Jest dan Enzyme

    • Jest dan Enzyme adalah kerangka pengujian yang populer dalam pengembangan aplikasi React.

    • Jest adalah kerangka pengujian yang kuat yang dikembangkan oleh Facebook, sedangkan Enzyme adalah pustaka pengujian yang dibuat oleh Airbnb.

    • Bersama-sama, Jest dan Enzyme memberikan alat yang lengkap untuk menulis dan menjalankan pengujian unit, integrasi, dan snapshot dalam aplikasi React.

Ekosistem React adalah kumpulan alat yang kuat dan bermanfaat yang membantu pengembang dalam membangun aplikasi web yang lebih canggih dan lebih efisien. Dengan memahami berbagai komponen dalam ekosistem React dan cara menggunakannya, pengembang dapat meningkatkan produktivitas mereka dan membangun aplikasi yang lebih baik.

Membuat Aplikasi React Pertama

Vite adalah alat bundling dan pengembangan yang cepat untuk proyek JavaScript modern. Berikut adalah langkah-langkah untuk mempersiapkan lingkungan pengembangan untuk proyek React menggunakan Vite:

  1. Instal Node.js

    Pastikan Node.js sudah terinstal di komputer Anda. Anda dapat mengunduh dan menginstalnya dari situs web resmi Node.js: https://nodejs.org

  2. Menentukan folder: tentukan tempat projek akan dibuat pada komputer kalian

  3. Membuat Proyek React: Masuk ke terminal dan buat proyek React baru dengan Vite menggunakan perintah (my-react-app dapat diganti dengan nama projek kalian) :

     npm create vite@latest my-react-app -- --template react

  4. Masuk ke Direktori Proyek: Setelah proyek dibuat, pada terminal masuk ke direktori proyek yang baru saja dibuat:

     cd .\my-react-app\

  5. install package yang dibutuhkan dengan perintah :

     npm install

  6. Kemudian masuk ke teks editor kalian, untuk yang menggunakan visual studio code dapat menggunakan perintah ini untuk membuka folder:

     code .

    maka akan muncul tampilan seperti berikut:

    Selanjutnya edit vite.config.js untuk mengatur port yang akan digunakan

    Selajutnya ubah app.jsx untuk membuat tampilan pertama Hello World

    selanjutnya pada terminal jalankan perintah :

     npm run dev

    kemudian pada bukan url http://localhost:3000/ , maka akan muncul tampilan seperti berikut:

Kesimpulan

Dalam blog ini, kita telah menjelajahi konsep dasar dan pentingnya React dalam pengembangan aplikasi web modern. Mulai dari pengenalan singkat tentang apa itu React hingga langkah-langkah untuk mempersiapkan lingkungan pengembangan dan membuat aplikasi React pertama, kita telah mencakup banyak aspek penting dalam belajar React.

  1. Pentingnya React: React telah menjadi salah satu alat utama dalam pengembangan aplikasi web modern, terutama karena kemampuannya untuk membangun antarmuka pengguna (UI) yang dinamis, interaktif, dan mudah dikelola.

  2. Fitur Utama React: Kita telah mempelajari fitur-fitur utama React, termasuk komponen, virtual DOM, dan ekosistem yang kuat, yang semuanya berkontribusi pada pengalaman pengembangan yang efisien dan responsif.

  3. Komponen dan Virtual DOM: Konsep komponen adalah inti dari pengembangan dengan React, memungkinkan kita untuk membagi UI menjadi bagian-bagian yang lebih kecil dan reusable. Penggunaan virtual DOM membantu meningkatkan performa aplikasi dengan meminimalkan jumlah pembaruan DOM yang diperlukan.

  4. Persiapan Lingkungan Pengembangan: Memahami langkah-langkah untuk mempersiapkan lingkungan pengembangan yang optimal adalah langkah awal yang penting dalam memulai pengembangan dengan React. Create React App adalah salah satu alat yang sering digunakan untuk mempermudah proses ini.

  5. Langkah-langkah Awal: Kita juga telah mencakup langkah-langkah awal dalam membuat aplikasi React pertama, mulai dari instalasi hingga menampilkan "Hello, World!", yang memberikan landasan yang kuat bagi pembaca untuk melanjutkan perjalanan pengembangan mereka dengan React.

Dengan belajar memahami konsep-konsep dasar yang telah dibahas dalam blog ini, diharapkan siap untuk menjelajahi lebih jauh dalam dunia pengembangan aplikasi web dengan menggunakan React. Selanjutnya, kita dapat melangkah ke topik-topik lanjutan seperti state management, routing, dan integrasi dengan backend.

ReactJavaScriptNode.jsintroduction