Belajar React #2 — Instalasi React + Dasar JSX, Component, dan Props (Praktikal)

Pada artikel ini saya langsung memadukan dua hal penting dalam belajar React:

Setup project React menggunakan Vite
Belajar konsep fundamental React: JSX, Component, dan Props

Tujuannya sederhana: belajar konsep sambil langsung praktik.

1. Instalasi React Menggunakan Vite

Vite adalah tool modern dan sangat cepat untuk membuat project React. Langkah-langkahnya:

1) Persiapan Awal

Pastikan Node.js sudah terinstal. Periksa dengan perintah:

node -v

Pastikan versi Node 20.19.x atau lebih baru. Jika belum ada atau masih versi lama silakan download Node.js terbaru (LTS) di website resmi: https://nodejs.org Atau pilih versi:

Node 20.19.x atau lebih baru
Atau Node 22.x

2) Membuat Project Baru

Jalankan perintah berikut di terminal:

npm create vite@latest react-belajar --template react

3) Masuk ke folder project & install dependencies

cd react-belajar
npm install

4) Jalankan project

npm run dev

Jika berhasil, Anda akan melihat halaman React default di browser.

2. Memahami JSX (Dengan Contoh Langsung)

JSX adalah cara menulis HTML di dalam JavaScript. React menggunakan JSX untuk membuat UI yang dinamis.

Contoh dasar komponen React menggunakan JSX:

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

export default Hello;

JSX memungkinkan kita mengembalikan struktur UI seperti HTML, tapi dengan kekuatan JavaScript.

3. Membuat Component Pertama Kita

Di React, component adalah potongan UI yang dapat digunakan kembali.

Buat file baru:

src/components/Greeting.jsx

Isi file:

function Greeting() {
  return <p>Selamat datang di perjalanan belajar React saya!</p>;
}

export default Greeting;

Lalu tampilkan di App.jsx:

import Greeting from "./components/Greeting";

function App() {
  return (
    <div>
      <h1>Belajar React</h1>
      <Greeting />
    </div>
  );
}

export default App;

Jika muncul teksnya, berarti komponen pertama Anda berhasil tampil.

4. Mengenal Props (Data yang Dikirim ke Component)

Props adalah cara mengirim data dari satu component ke component lainnya.

Buat component baru:

src/components/UserCard.jsx

Isi file:

function UserCard(props) {
  return (
    <div>
      <h3>Nama: {props.name}</h3>
      <p>Umur: {props.age}</p>
    </div>
  );
}

export default UserCard;

Panggil component ini dengan mengirim props:

import UserCard from "./components/UserCard";

function App() {
  return (
    <div>
      <h1>Contoh Props</h1>
      <UserCard name="Bagus Prasojo" age={28} />
    </div>
  );
}

export default App;

Props membuat UI Anda dinamis dan fleksibel.

5. Kesalahan Umum Pemula (Yang Saya Alami Juga)

Beberapa error yang mungkin muncul:

❌ "Unexpected token <" atau blank page

Biasanya karena JSX tidak diproses, pastikan file berekstensi .jsx.

❌ "Component is not defined"

Biasanya karena lupa melakukan import.

❌ Salah penamaan file (huruf kapital wajib)

React mengharuskan nama component diawali huruf besar: UserCard, bukan usercard.

6. Hasil Belajar Hari Ini

Di artikel ini saya belajar sekaligus mempraktikkan:

Membuat project React dengan Vite
Memahami apa itu JSX
Membuat component sederhana
Menggunakan props untuk mengirim data ke component

Dengan bekal ini, saya sudah siap masuk ke React yang lebih dinamis: State & Event Handling.

Artikel Selanjutnya

Belajar React #3 — State & Event Handling (Mulai Interaktif!)

Sampai ketemu di artikel berikutnya 🙌

Delphi Guru

Cari Blog Ini