Pengenalan React dan JSX

React adalah library JavaScript yang di gunakan untuk membangun antarmuka pengguna (UI) terutama untuk aplikasi web yang interaktif dan dinamis. React dikembangkan oleh Facebook dan pertama kali di rilis pada tahun 2013

Ciri Khas Dan Keunggulan React

1. Komponen (Component Based)

• Aplikasi dibangun dari komponen kecil dan independen yang dapat digunakan kembali
• Contoh <Navbar /> <Footer /> <ProductCard />

2. Virtual DOM

• React menggunakan virtual Dom untuk mempercepat kinerja dengan meminimalkan manipulasi DOM langsung

3. Deklaratif

• Kamu hanya perlu mendeskripsikan apa yang ingin kita tampilkan dan react akan menangani sisanya

Contoh jsx : <h1>Hello {user.name}! <h1 />

4. JSX (JavaScript XML)

• React menggunakan JSX yaitu sintak yang mirip dengan HTML yang di tulis didalam JavaScript, agar kode UI lebih mudah dibaca dan ditulis

5. Unidirectional Data Flow

• Data Mengalir satu arah dari parent ke child membuat logika aplikasi lebih mudah dipahami dan di-debug

Contoh Sederhana :

Mengapa Kita Harus Menggunakan React

1. Komponen Yang Dapat Digunakan Kembali

React berbasis komponen artinya kita bisa membuat satu komponen misal tombol, navbar, atau produk lalu menggunkan berulang kali di seluruh aplikasi, ini menghemat waktu dan membuat kode menjadi lebih rapih.

2. Performa Tinggi Dengan Virtual DOM

React menggunakan virtual DOM yaitu refresentasi ringan dari DOM asli, saat ada perubahan react hanya memperbaharui bagian yang berubah saja bukan seluruh halaman, ini membuat aplikasi lebih ringan dan lebih responsif.

3. Penulisan Kode Lebih Mudah Dengan JSX

React menggunakan JSX gabungan antara JavaScript dan HTML-like syntax. ini memudahkan develover membuat tampilan tanpa perlu memisahkan logika dan UI terlalu jauh.

Contoh :

4. Data Flow Yang Jelas (One-Way Data Binding

React menggunakan alur data satu arah (dari parent ke child). Ini membuat alur logika data lebih mudah dipahami dan debug jadi lebih gampang

5. Ekosistem Besar dan Komunitas Aktif

React punya ekosistem tools dan pustaka pendukung yang luas: React Router (navigasi), Redux / Zustand (state management), Axios / Fetch (API request), Next.js (framework React untuk SSR & SEO)

6. Cocok Untuk Sekala Kecil Maupun Besar

Mulai dari blog pribadi hingga dashboard admin yang kompleks, React bisa digunakan karena skalabilitasnya tinggi.

Berikut Link untuk Instalasi dan Setup Awal Proyek React

Directlink 1

Directlink 2

Directlink 3

Directlink 4

Directlink 5

Directlink 6

Cara Buat Template Dasar Dengan ( Tailwind CSS atau Routing ) JSX

 Berikut ini template dasar React + Tailwind CSS + Routing (React Roter DOM) menggunakan vite

Dalam pengembangan aplikasi React, template dasar sangat penting agar:

• Struktur proyek rapi
• Kode mudah dikembangkan
• Tampilan konsisten
• Routing halaman jelas

Pada materi ini kita akan membahas dua pendekatan utama:

• Template dasar menggunakan Tailwind CSS
• Template dasar menggunakan Routing (React Router) dengan JSX

1. Buat Project baru dengan vite

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

2. Masuk ke folder dalam project

cd my_app

3. Install dependency 

npm install

4. Install Tailwind CSS dan inisialisasi

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

5. Install React Router DOM

npm install react-router-dom

6. Konfiguration Tailwind di tailwind.config.js

Template Dasar Menggunakan Tailwind CSS (JSX)

Persiapan Project React

Buat project React:

npx create-react-app my-template

cd my-template

npm start

Install Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Konfigurasi tailwind.config.js:

content: ["./src/**/*.{js,jsx}"],

theme: {

  extend: {},

},

plugins: [],

Tambahkan di src/index.css :

@tailwind base;

@tailwind components;

@tailwind utilities;

Struktur Folder Dasar

Contoh Template Navbar (Tailwind + JSX)

components/Navbar.jsx

function Navbar() {

  return (

    <nav className="bg-blue-600 text-white px-6 py-4 flex justify-between">

      <h1 className="font-bold text-lg">MyApp</h1>

      <ul className="flex gap-4">

        <li className="hover:underline cursor-pointer">Home</li>

        <li className="hover:underline cursor-pointer">About</li>

      </ul>

    </nav>

  );

}

export default Navbar;

Halaman Home

pages/Home.jsx

function Home() {

  return (

    <div className="p-10 text-center">

      <h2 className="text-3xl font-bold mb-4">Hello World!</h2>

      <button className="bg-green-500 text-white px-6 py-2 rounded">

        Klik Saya

      </button>

    </div>

  );

}

export default Home;

Menggabungkan Template

App.jsx

import Navbar from "./components/Navbar";

import Home from "./pages/Home";

function App() {

  return (

    <>

      <Navbar />

      <Home />

    </>

  );

}

export default App;

Hasil: Template satu halaman dengan layout rapi & modern.

Template Dasar Menggunakan Routing (JSX)

Install React Router

npm install react-router-dom

Struktur Folder Routing

Contoh Routing di App.jsx

import { BrowserRouter, Routes, Route } from "react-router-dom";

import Home from "./pages/Home";

import About from "./pages/About";

import Navbar from "./components/Navbar";

function App() {

  return (

    <BrowserRouter>

      <Navbar />

      <Routes>

        <Route path="/" element={<Home />} />

        <Route path="/about" element={<About />} />

      </Routes>

    </BrowserRouter>

  );

}

export default App;

Navbar dengan Link Routing

import { Link } from "react-router-dom";

function Navbar() {

  return (

    <nav className="bg-gray-800 text-white px-6 py-4 flex gap-4">

      <Link to="/" className="hover:underline">Home</Link>

      <Link to="/about" className="hover:underline">About</Link>

    </nav>

  );

}

export default Navbar;