Cara Membuat Aplikasi dengan React: Panduan Lengkap untuk Pemula

August 14, 2025 blog_teknokrat

React adalah pustaka JavaScript yang dikembangkan oleh Facebook untuk membangun antarmuka pengguna (UI) yang dinamis dan responsif. React memungkinkan pengembang untuk membuat aplikasi web yang cepat dan efisien dengan membagi UI menjadi komponen-komponen kecil yang dapat digunakan kembali. Dengan pendekatan deklaratif, React memudahkan pengelolaan status dan pembaruan UI.

Jika kamu tertarik untuk memulai proyek menggunakan React, artikel ini akan memberikan panduan langkah demi langkah untuk membuat aplikasi sederhana dengan React.

baca juga Mahasiswa Teknik Elektro Universitas Teknokrat Indonesia Raih Prestasi di Ajang Lomba Nasional Rimau Robotic Contest dan Exhibition 2025

Apa Itu React?

React adalah pustaka untuk membangun UI yang memungkinkan kamu untuk membuat aplikasi dengan cara yang terstruktur dan efisien. React berfungsi berdasarkan prinsip komponen, yang memungkinkan kamu membangun antarmuka yang kompleks dari komponen-komponen kecil dan mandiri.

React juga menggunakan Virtual DOM, yang membantu meningkatkan performa aplikasi dengan hanya memperbarui bagian-bagian yang berubah, alih-alih merender ulang seluruh halaman.

Langkah-langkah Membuat Aplikasi dengan React

1. Menyiapkan Lingkungan Pengembangan

Untuk memulai, kita akan menggunakan Create React App yang menyediakan pengaturan dasar yang sudah terkonfigurasi untuk aplikasi React. Jika kamu belum menginstal Node.js, pastikan kamu sudah menginstalnya terlebih dahulu.

Instal Node.js: Jika belum menginstal Node.js, kamu bisa mengunduhnya dari nodejs.org.
Buat Proyek React Baru:
Gunakan Create React App untuk membuat aplikasi React baru. Buka terminal atau command prompt dan jalankan perintah berikut: npx create-react-app my-react-app cd my-react-app Setelah itu, folder proyek akan berisi struktur dasar aplikasi React.
Jalankan Aplikasi:
Setelah selesai membuat aplikasi, jalankan aplikasi React dengan perintah berikut: npm start Aplikasi React sekarang akan berjalan di browser pada http://localhost:3000/.

2. Memahami Struktur Proyek React

Setelah aplikasi berhasil dibuat, kamu akan melihat struktur folder berikut:

public/index.html: Halaman HTML utama tempat aplikasi React dirender.
src/index.js: File entry point JavaScript untuk aplikasi, tempat aplikasi React dimulai.
src/App.js: Komponen utama aplikasi React.
src/App.css: File CSS untuk styling aplikasi.

3. Membuat Komponen React

Salah satu konsep utama dalam React adalah komponen. Komponen adalah unit kecil dari antarmuka pengguna yang dapat digunakan kembali dan dikelola secara independen.

Untuk membuat komponen di React, kamu bisa menggunakan dua cara:

Functional Components (komponen fungsional).
Class Components (komponen kelas, meskipun lebih jarang digunakan saat ini karena fungsional lebih disarankan).

Membuat Komponen Fungsional

Di dalam file src/App.js, kamu dapat membuat komponen fungsional sebagai berikut:

// src/App.js
import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Halo, Dunia!</h1>
      <p>Selamat datang di aplikasi React pertama Anda.</p>
    </div>
  );
}

export default App;

Pada contoh di atas, komponen App adalah sebuah fungsi yang mengembalikan JSX (JavaScript XML), yang mirip dengan HTML namun memungkinkan kita untuk menggunakan JavaScript di dalamnya.

Menggunakan Props dalam Komponen

Props (singkatan dari properties) adalah cara untuk mengirimkan data dari komponen induk ke komponen anak.

Misalnya, kita ingin membuat komponen yang menerima data dinamis melalui props:

// src/Welcome.js
import React from 'react';

function Welcome(props) {
  return <h2>Selamat datang, {props.name}!</h2>;
}

export default Welcome;

Kemudian, di dalam App.js, kita bisa memanggil komponen Welcome dan mengirimkan nilai name melalui props:

// src/App.js
import React from 'react';
import Welcome from './Welcome';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Halo, Dunia!</h1>
      <Welcome name="John" />
      <Welcome name="Alice" />
    </div>
  );
}

export default App;

Setiap komponen Welcome akan menerima props name dan menampilkan pesan sambutan yang berbeda.

baca juga Revolusi Teknologi Modern Perpustakaan: Akses Lebih Cepat dan Mudah

4. Mengelola State di React

State adalah data yang dapat berubah selama siklus hidup aplikasi dan memengaruhi bagaimana aplikasi tersebut dirender.

Untuk menambahkan state ke komponen fungsional, kita menggunakan hook useState.

// src/Counter.js
import React, { useState } from 'react';

function Counter() {
  // Mendefinisikan state "count" dan fungsi untuk mengubahnya
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Hitung: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Tambah</button>
      <button onClick={() => setCount(count - 1)}>Kurang</button>
    </div>
  );
}

export default Counter;

Dalam contoh di atas:

useState(0) menginisialisasi state count dengan nilai awal 0.
setCount adalah fungsi yang digunakan untuk memperbarui state.

Kemudian, kita bisa menggunakan komponen Counter di dalam App.js:

// src/App.js
import React from 'react';
import Counter from './Counter';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Halo, Dunia!</h1>
      <Counter />
    </div>
  );
}

export default App;

Sekarang, aplikasi akan menampilkan tombol yang memungkinkan pengguna untuk menambah dan mengurangi angka.

5. Menambahkan Event Handling

Di React, kamu dapat menangani event seperti klik tombol, input teks, dll. Misalnya, kita bisa menambahkan event handler ke tombol:

// src/App.js
import React, { useState } from 'react';

function App() {
  const [name, setName] = useState("");

  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <div className="App">
      <h1>Halo, {name}!</h1>
      <input 
        type="text" 
        placeholder="Masukkan nama Anda" 
        value={name} 
        onChange={handleChange} 
      />
    </div>
  );
}

export default App;

Di sini, kita menangani event onChange pada elemen <input>, yang akan memperbarui state name setiap kali pengguna mengetik.

6. Menggunakan Routing dengan React Router

Untuk aplikasi yang lebih besar, kamu sering kali perlu memiliki beberapa halaman. React Router memungkinkan kamu untuk menavigasi antar halaman di aplikasi React tanpa melakukan pemuatan ulang halaman.

Untuk menggunakannya, pertama-tama kamu perlu menginstal React Router:

npm install react-router-dom

Setelah itu, kamu bisa mengonfigurasi routing di dalam aplikasi:

// src/App.js
import React from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';

function Home() {
  return <h2>Halaman Utama</h2>;
}

function About() {
  return <h2>Tentang Kami</h2>;
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
          </ul>
        </nav>

        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

Dalam contoh di atas:

BrowserRouter digunakan untuk menangani rute di aplikasi.
Route mendefinisikan rute dan komponen yang akan dirender untuk setiap rute.
Link digunakan untuk membuat navigasi antar halaman.

7. Menyelesaikan dan Mempublikasikan Aplikasi

Setelah aplikasi selesai, kamu bisa membangunnya untuk produksi dengan perintah berikut:

npm run build

Perintah ini akan menghasilkan versi aplikasi yang dioptimalkan dan siap dipublikasikan di server.

Kesimpulan

Membuat aplikasi dengan React memungkinkan kamu untuk membangun antarmuka pengguna yang dinamis dan responsif dengan cara yang terstruktur. Dengan menggunakan komponen, state, dan props, kamu bisa mengelola alur data aplikasi secara efisien. React juga memungkinkan kamu untuk menangani routing, event, dan pengelolaan UI lainnya dengan mudah.

Setelah kamu menguasai dasar-dasar React, kamu bisa mengembangkan aplikasi lebih lanjut dengan menambahkan fitur seperti pengelolaan form, validasi, dan interaksi dengan API menggunakan Axios atau Fetch. Selamat mencoba!

Trending Topics