Tutorial React JS Bagian 1: Kenalan dan Persiapan Awal - Samotuho Ndruru

 

React JS adalah salah satu library JavaScript paling populer buat bikin antarmuka pengguna (UI) yang interaktif. Cocok banget buat kamu yang mau belajar bikin web modern!

Apa Itu React JS?

React adalah library JavaScript open-source yang dikembangkan oleh Facebook untuk membangun UI secara komponen.

Artinya? Kamu bisa bikin UI yang terstruktur, reusable (dipakai ulang), dan lebih mudah dikelola.

Persiapan Awal Sebelum Ngoding React

Sebelum masuk ke coding, pastikan kamu sudah siap secara tools:

1. Install Node.js

React butuh Node.js untuk jalanin tools dan package-nya.

Download: https://nodejs.org

Pilih versi LTS (yang stabil), install kayak biasa.

2. Cek Node & NPM

Buka terminal (Command Prompt / PowerShell / Terminal), lalu cek:

node -v

npm -v

Kalau keluar versi, berarti sukses.

Step by Step: Membuat Project React Pertama

React sudah punya CLI (command line interface) yang gampang dipakai.

1. Buat Project Baru

Buka terminal dan ketik:

npx create-react-app react-pemula

Tunggu sampai selesai. Ini akan membuat folder react-pemula lengkap dengan struktur React.

2. Masuk ke Folder Project

cd react-pemula

3. Jalankan Project

npm start

Akan otomatis membuka browser di http://localhost:3000 dengan tampilan awal React.

 Struktur Folder Project

• public/index.html: HTML utama
• src/index.js: Pintu masuk React
• src/App.js: Komponen utama (App)

Membuat Komponen Pertama di React

Komponen adalah dasar dari React. Yuk kita ubah App.js jadi lebih sederhana.

1. src/App.js:

import React from 'react';

function App() {
  return (
    <div>
      <h1>Halo, Dunia!</h1>
      <p>Selamat datang di tutorial React JS Pemula</p>
    </div>
  );
}

export default App;

2. src/index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Setiap kali kamu ubah App.js, React akan otomatis reload di browser.

Penjelasan Singkat

• function App() {} = komponen fungsional
• return (...) = isi tampilan komponen
• JSX = sintaks mirip HTML, tapi ditulis di dalam JavaScript

Contoh JSX:

<h1>Hello</h1>

Tapi kamu nggak bisa nulis class="...", harus pakai className="..." karena React pakai JavaScript murni.

Tugas Buat Kamu

Coba edit isi App.js jadi seperti ini:

function App() {
  const nama = "Sam";

  return (
    <div>
      <h1>Hai, {nama}!</h1>
      <p>Ini adalah komponen pertamamu di React.</p>
    </div>
  );
}

Ganti nilai variabel nama "Sam" menjadi nama kamu.

React bisa menyisipkan variabel langsung ke tampilan pakai {}. Keren, kan?

Styling Sederhana

Coba tambahkan styling dengan CSS:

didalam folder src, buat file baru dengan nama App.css

src/App.css:

h1 {
  color: royalblue;
  font-family: sans-serif;
}
p {
  font-size: 18px;
}

Lalu import ke App.js:

import './App.css';

Penutup Bagian 1

Di bagian pertama ini, kamu sudah belajar:

✅ Apa itu React

✅ Cara install & buat project

✅ Struktur folder React

✅ Membuat komponen pertama

✅ Menggunakan JSX dan styling sederhana

Apa Selanjutnya?

Di Bagian 2, kita akan bahas:

• Props (mengirim data ke komponen)
• Komponen lain selain App
• State dan event handling
• Membuat daftar (looping) di React

Related Posts