React JS adalah pustaka JavaScript yang digunakan untuk membangun antarmuka pengguna (UI) yang interaktif dan dinamis. Dikembangkan oleh Facebook, React menjadi salah satu teknologi frontend paling populer di dunia, digunakan oleh banyak perusahaan besar seperti Instagram, Airbnb, dan Netflix.

Dalam tutorial ini, kita akan membahas React dari dasar hingga tingkat lanjut, termasuk cara menginstalnya, konsep inti, komponen, state, props, hingga pengelolaan state dengan Redux.

Apa Itu React JS?

React adalah pustaka JavaScript untuk membangun antarmuka pengguna berbasis komponen. Dengan React, pengembang dapat membuat UI yang fleksibel, mudah dikelola, dan dapat diperbarui dengan efisien menggunakan Virtual DOM.

Keunggulan React JS

• Virtual DOM: React menggunakan Virtual DOM untuk meningkatkan kinerja aplikasi dengan hanya memperbarui bagian yang berubah pada UI.
• Komponen Reusable: React memungkinkan pembuatan komponen yang dapat digunakan kembali.
• Unidirectional Data Flow: Data di React mengalir dalam satu arah, memudahkan debugging dan pemeliharaan kode.
• Ekosistem Besar: Dengan komunitas yang besar, React memiliki banyak library dan alat bantu.

Persiapan & Instalasi React

Sebelum mulai belajar React, pastikan Anda sudah menginstal Node.js dan npm di komputer Anda.

Instal Node.js dan npm

Anda dapat mengunduh dan menginstal Node.js dari situs resminya:

Download Node.js

Setelah menginstal Node.js, cek versi dengan perintah berikut:

node -v
npm -v

Membuat Proyek React dengan Create React App

Untuk memulai proyek React, gunakan perintah berikut:

npx create-react-app my-app
cd my-app
npm start

Setelah perintah dijalankan, React akan membuat proyek baru dan menjalankan server pengembangan.

Struktur Folder React

Setelah proyek dibuat, struktur foldernya akan seperti ini:

my-app/
  |-- node_modules/
  |-- public/
  |-- src/
      |-- App.js
      |-- index.js
  |-- package.json

• src/: Tempat file utama React, termasuk komponen utama (App.js).
• public/: Berisi file statis seperti index.html.
• package.json: Berisi informasi proyek dan dependensi yang digunakan.

Konsep Dasar React

JSX (JavaScript XML)

JSX adalah ekstensi JavaScript yang memungkinkan kita menulis HTML di dalam JavaScript:

const element = <h1>Hello, React!</h1>;

Komponen di React

React menggunakan konsep komponen, yaitu bagian kecil dari UI yang dapat digunakan kembali. Ada dua jenis komponen utama:

Komponen Fungsional

Komponen ini dibuat dengan fungsi JavaScript:

function Greeting() {
  return <h1>Hello, React!</h1>;
}

Komponen Berbasis Kelas

Komponen ini dibuat dengan kelas JavaScript:

class Greeting extends React.Component {
  render() {
    return <h1>Hello, React!</h1>;
  }
}

State dan Props

State di React

State adalah objek yang menyimpan data dalam komponen:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Tambah</button>
    </div>
  );
}

Props di React

Props (Properties) digunakan untuk mengirim data antar komponen:

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Menggunakan komponen ini:

<Greeting name="John" />

Event Handling di React

React mendukung event handling seperti JavaScript:

function Button() {
  function handleClick() {
    alert('Button diklik!');
  }

  return <button onClick={handleClick}>Klik Saya</button>;
}

Pengelolaan State dengan Redux

Redux adalah pustaka untuk mengelola state global dalam aplikasi React.

Instalasi Redux

npm install redux react-redux

Membuat Store Redux

import { createStore } from 'redux';

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

const store = createStore(counterReducer);
export default store;

Menggunakan Redux dalam Komponen

import { useSelector, useDispatch } from 'react-redux';

function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Tambah</button>
    </div>
  );
}

Kesimpulan

Dalam tutorial ini, kita telah membahas dasar-dasar React, dari instalasi hingga penggunaan Redux. React adalah teknologi yang sangat fleksibel dan cocok untuk membangun aplikasi web modern. Dengan memahami konsep-komponen utama seperti JSX, state, props, dan event handling, Anda dapat mulai membangun aplikasi React dengan lebih percaya diri.

Untuk pembelajaran lebih lanjut, Anda bisa mengeksplorasi Hooks lanjutan, React Router, dan integrasi dengan backend.