Struktur dan Aturan Penulisan JSX yang Benar

•  Pengertian JSX

JSX (JavaScript XML) adalah ekstensi sintaks JavaScript yang memungkinkan kita menulis kode yang mirip HTML di dalam file JavaScript, terutama digunakan dalam React. JSX memudahkan kita membangun antarmuka pengguna (UI) dengan sintaks yang lebih deklaratif dan intuitif.

• Struktur Dasar JSX

berikut contoh sederhana dari struktur JSX

bagian bagian pada JSX Tag Pembuka dan Penutup Seperti <div>....</div> sedangkan Isi atau anak element bisa berupa text, element JSX lainnya atau ekpresi javascript dalam {}

• Aturan JSX yang perlu kita ketahui

1. Harus Punya Satu Root Element

JSX hanya bisa mengembalikan satu elemen utama. Gunakan <div> atau React.Fragment (<> ... </>) jika ingin menulis lebih dari satu elemen:

    

       2. Gunakan ClassName Untuk CSS

Karena class adalah keyword di dalam javascript, maka kita gunakan ClassName di JSX 

// HTML

<div class="kotakForm"></div>

// JSX

<div className="kotakForm"></div>

         3. Atribut Menggunakan camleCase

JSX menggunakan penulisan atribut seperti onClick, htmlFor, tabIndex, bukan lowercase seperti HTML biasa.

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

<label htmlFor="email">Email</label>

         4. Gunakan {} untuk ekpresi JavaScript

Kita bisa menyisipkan JavaScript (bukan statement) dengan {}

const nama = "Andi";

<p>Halo, Saya {nama}</p>

         5. Komentar JSX

Untuk memberikan komentar pada JavaScript kita bisa mengisi seperti berikut :

{/* Ini Komentar dalam JavaScript */}

         6. Tag harus di tutup

Semua element di JSX harus di tutup, termasuk element kosong harus di tutup juga berikut contoh

// Benar

<img src="logo.png" alt="Logo" />

<br />

Contoh Lengkap:

         7. Tabel Ringkasan Aturan JSX

Berikut contoh sederhana yang menampilkan dua variabel nama dan umur

Tambahkan Materi Berikut : 

• Penanganan Atribut dan Event

• Fragment dan Elemen Pembungkus

Menyisipkan JavaScript dalam JSX

Berikut sedikit penjelasan tentang pembelajaran "Menyisipkan JavaScript dalam JSX" yang cocok untuk pemula yang sedang mempelajari React:

JSX adalah ekstensi JavaScript yang digunakan dalam React. Salah satu keunggulan JSX adalah kemampuannya untuk menyisipkan ekspresi JavaScript langsung di dalam markup (tampilan) menggunakan tanda kurung kurawal {}

Apa Itu Ekspresi JavaScript?

Ekpresi adalah bagian dari code JavaScript yang menghasilkan sebuah nilai misalnya

• Nilai langsung "Haloo" atau 123
• Variabel : nama
• Fungsi : getName
• Operasi : 2+2 atau angka * 10

Hanya ekpresi bukan statemen for if atau while

Cara Menyisipkan JavaScript di JSX

Gunakan kurung kurawel {} untuk menyisipkan JavaScript dalam JSX

const nama = "jono";

const elemen = <h1>Heloo , {nama}!</h1>

Contoh Penggunaan JavaScript di JSX

1. Variabel

const nama = "Jono";

return <p>Selamat datang, {nama}</p>;

2. Operasi Matematika

const a = 5, b = 10;
return <p>Hasil: {a + b}</p>; // Output: Hasil: 15
3. Ternary Operator (if sederhana)
const isLoggedIn = true;
return <p>{isLoggedIn ? "Selamat Datang" : "Silakan Login"}</p>;
4. Fungsi
function getWaktu() {
  return new Date().toLocaleTimeString();
}
return <p>Waktu sekarang: {getWaktu()}</p>;
4. Array dan .Map
const buah = ["Apel", "Jeruk", "Mangga"];
return (
  <ul>
    {buah.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

Hal yang Tidak Boleh Dilakukan

Tidak bisa menggunakan pernyataan (statement) seperti :

// x ini tidak boleh

{ if (true) { return "Halo" } }

Gunakan ternary atau ekpresi pendek

// ✅ Gunakan ini:
{true && <p>Halo</p>}

Kesimpulan

JSX hanya menerima ekspresi di dalam {} karena JSX pada akhirnya dikompilasi ke dalam fungsi JavaScript biasa.

Link 1

Link 2

Link 3

Link 4

Link 5

Link 6

Link 7

Sintaks Dasar JSX dan HTML

 Pengertian JSX

JSX (JavaScript XML) merupakan eksistensi sintaks JavaScript yang di pergunakan di react untuk menulis element UI. JSX terlihat seperti HTML, tetapi di tulis didalam file JavaScript dan dikompilasi menjadi JavaScript murni oleh Babel.

HTML adalah bahasa markup standard yang digunakan di browser untuk menyusun halaman web

Contoh :

Mengapa Kita Menggunakan JSX?

> Membuat kode lebih mudah dibaca dan di tulis

> Mendeklarasikan element UI seperti menulis HTML

> Mendukung ekspresi JavaScript di dalam tanda kurung {}

Sintaks Dasar JSX

1. Element JSX

2. JSX Harus Satu Element Root

3. Menyisipkan JavaScript dalam JSX

Gunakan {} untuk memasukan ekpresi JavaScript

Atribut JSX

1. Gunakan className bukan class

2. Gunakan camelCase untuk nama atribut

Perbedaan Penting JSX dan HTML

> HTML : class, for, Atribut lowercase

> JSX     : className, htmlFor, camelCase(onClick, OnChange) 

For VS htmlForm

Contoh Lengkap

Contoh JSX

Contoh HTML 

Instalasi Dan Setup Awal Proyek React

Persiapkan Alat

Sebelum membuat proyek React pastikan alat-alat berikut sudah terpasang

a. Node.js dan NPM

Ract membutuhkan Node.js karna react menggunakan NPM (Node Package Manager) untuk mengelola depedensi 

bisa di download di https://nodejs.org 

Langkah - Langkah Install Bisa di cek di sini

Setelah instalasi, buka terminal dan ketik : 

jika muncul version maka node.js dan npm sudah terinstall

b. Code Editor 

Gunakan Visual Code atau editor yang sesuai dengan ke inginan kita

Visual Code Bisa di download di sini https://code

Membuat Proyek React Dengan Create React App

Cara paling mudah untuk membuat proyek React adalah dengan menggunakan Create React App

Buka terminal CMD, GIT Bash, lalu jalankan perintah :

- npx create-react-app nama-proyek-anda

- npx create-react-app belajar-react

tunggu beberapa menit sampai semua depedensi selesai di unduh

Struktur Folder Proyek

Instalasi Awal Proyek React (Recommended)

Sekarang yang paling direkomendasikan adalah Vite karena cepat dan ringan.

npm create vite@latest my-react-app
cd my-react-app
npm install
npm run dev

Pilih:

• Framework: React
• Variant: JavaScript atau TypeScript

Struktur Folder Standar Proyek React

my-react-app/
├─ node_modules/
├─ public/
│ ├─ favicon.svg
│ └─ index.html
├─ src/
│ ├─ assets/
│ │ ├─ images/
│ │ ├─ icons/
│ │ └─ styles/
│ ├─ components/
│ │ ├─ Button.jsx
│ │ ├─ Navbar.jsx
│ │ └─ Footer.jsx
│ ├─ pages/
│ │ ├─ Home.jsx
│ │ ├─ About.jsx
│ │ └─ Contact.jsx
│ ├─ layouts/
│ │ └─ MainLayout.jsx
│ ├─ routes/
│ │ └─ AppRoutes.jsx
│ ├─ services/
│ │ └─ api.js
│ ├─ hooks/
│ │ └─ useAuth.js
│ ├─ utils/
│ │ └─ formatter.js
│ ├─ App.jsx
│ ├─ main.jsx
│ └─ index.css
├─ .gitignore
├─ package.json
├─ vite.config.js
└─ README.md

Penjelasan Fungsi Folder (Penting!)

public/
Berisi file statis:

• index.html → root HTML

• favicon, gambar publik

src/assets/

Aset pendukung:

• images/ → gambar
• icons/ → icon SVG
• styles/ → CSS / Tailwind config

src/components/

Komponen kecil & reusable:

• Button
• Navbar
• Modal
• Card

Tidak berisi logic halaman

src/pages/

Halaman utama aplikasi:

• Home
• Login
• Dashboard

Biasanya terhubung ke routing

src/layouts/

Template layout:

• Header
• Sidebar
• Footer

Digunakan ulang oleh banyak halaman

src/routes/

Konfigurasi routing:

• React Router
• Protected routes

src/services/

Komunikasi ke backend:

• API
• Axios
• Auth service

src/hooks/

Custom React Hooks:

• useAuth
• useFetch

src/utils/

Helper & fungsi umum:

• Formatter tanggal
• Validator
• Helper string

 

main.jsx

Entry point React

App.jsx

Root component utama

Contoh Setup Routing Sederhana

src/routes/AppRoutes.jsx

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";

export default function AppRoutes() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

Struktur untuk Proyek Besar (Best Practice)

Jika aplikasi makin besar:

 src/

├─ features/
│ ├─ auth/
│ │ ├─ Login.jsx
│ │ ├─ authService.js
│ │ └─ authSlice.js
│ └─ product/
│ ├─ ProductList.jsx
│ └─ productService.js

Buat Project React (Vite)

npm create vite@latest react-tailwind-app
cd react-tailwind-app
npm install

Pilih:

• Framework: React
• Variant: JavaScript (atau TypeScript kalau mau)

 

Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

 

Konfigurasi Tailwind

tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,jsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

Setup CSS Utama

src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
/* custom style */
body {
  @apply bg-gray-50 text-gray-800;
}

 

Struktur Folder Template

src/
├─ assets/
│  └─ images/
├─ components/
│  ├─ Navbar.jsx
│  └─ Button.jsx
├─ layouts/
│  └─ MainLayout.jsx
├─ pages/
│  └─ Home.jsx
├─ App.jsx
├─ main.jsx
└─ index.css

 

Contoh Komponen

src/components/Navbar.jsx
export default function Navbar() {
  return (
    <nav className="bg-white shadow">
      <div className="max-w-7xl mx-auto px-4 py-3 flex justify-between">
        <h1 className="text-xl font-bold text-blue-600">
          React + Tailwind
        </h1>
        <ul className="flex gap-4">
          <li className="hover:text-blue-500 cursor-pointer">Home</li>
          <li className="hover:text-blue-500 cursor-pointer">About</li>
        </ul>
      </div>
    </nav>
  );
}

 

src/components/Button.jsx
export default function Button({ children }) {
  return (
    <button className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
      {children}
    </button>
  );
}

Layout Utama

src/layouts/MainLayout.jsx
import Navbar from "../components/Navbar";
export default function MainLayout({ children }) {
  return (
    <>
      <Navbar />
      <main className="max-w-7xl mx-auto p-6">
        {children}
      </main>
    </>
  );
}

 

Halaman Home

src/pages/Home.jsx
import Button from "../components/Button";
import MainLayout from "../layouts/MainLayout";
export default function Home() {
  return (
    <MainLayout>
      <section className="text-center py-20">
        <h2 className="text-4xl font-bold mb-4">
          React + Tailwind Template
        </h2>
        <p className="text-gray-600 mb-6">
          Template siap pakai untuk project modern
        </p>
        <Button>Mulai Sekarang</Button>
      </section>
    </MainLayout>
  );
}

App Entry

src/App.jsx
import Home from "./pages/Home";
export default function App() {
  return <Home />;
}

src/main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Jalankan Project

npm run dev
Buka browser: http://localhost:5173

 

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;