Saya akan menjelaskan isi materi tersebut dari dasar sampai konsep teknisnya, dengan bahasa sederhana dan contoh supaya lebih mudah dipahami.

1. Apa itu React?

React adalah library JavaScript untuk membuat User Interface (UI) pada aplikasi web dan mobile.

Sederhananya:

React membantu kita membuat tampilan aplikasi yang interaktif dan mudah dikelola.

Contoh UI yang dimaksud:

• tombol
• navbar
• sidebar
• form login
• kartu produk
• daftar artikel
• komentar
• dashboard
• modal
• halaman profil

Misalnya kita punya website toko online:

+----------------------------------+
|          My Online Shop          |
+----------------------------------+
| Home | Products | Cart | Profile |
+----------------------------------+
|                                  |
|   [ Product Card ]               |
|   Laptop                          |
|   $1000                           |
|   [ Add to Cart ]                |
|                                  |
+----------------------------------+

Semua bagian tersebut adalah UI.

React membantu kita membuat UI tersebut dengan cara yang lebih terstruktur.

2. React adalah Library, bukan Framework

Ini adalah salah satu poin paling penting dalam materi.

React disebut sebagai library, bukan framework.

Apa bedanya?

Bayangkan kamu ingin membangun sebuah rumah.

Framework

Framework seperti kamu membeli paket pembangunan rumah lengkap.

Di dalamnya sudah ditentukan:

• struktur rumah
• sistem listrik
• sistem air
• aturan pembangunan
• cara mengatur ruangan
• dan sebagainya

Framework biasanya memberikan solusi untuk banyak aspek aplikasi.

Library

Library lebih seperti kamu membeli alat tertentu.

Misalnya:

“Saya butuh alat untuk membuat UI.”

Kamu menggunakan React.

Kalau kamu membutuhkan:

• routing → gunakan library routing
• HTTP request → gunakan library untuk request
• state management → gunakan library/state solution tertentu
• database → gunakan teknologi database
• authentication → gunakan solusi authentication

Jadi React tidak memaksa kamu menggunakan semuanya.

3. React Fokus pada UI

React memiliki fokus yang cukup jelas:

Membangun dan mengelola tampilan aplikasi.

Misalnya sebuah aplikasi memiliki:

                    APPLICATION
                         |
        +----------------+----------------+
        |                |                |
       UI              Routing          Database
        |                |                |
      React          Router           Backend

React terutama berada di bagian UI.

Contohnya:

function Button() {
  return <button>Click Me</button>;
}

React membantu kita membuat tombol tersebut.

Tetapi React sendiri bukan berarti menangani seluruh kebutuhan aplikasi seperti:

Database
Authentication
Routing
Payment
API
Server

Untuk kebutuhan tersebut, kita bisa menggunakan teknologi lain.

4. Kenapa React bisa fleksibel?

Karena React tidak terlalu banyak memaksakan aturan.

Misalnya kamu sudah punya website:

HTML
CSS
JavaScript

Kemudian kamu ingin bagian tertentu menjadi lebih interaktif.

Misalnya:

[ Like ❤️ ]

Kamu bisa menggunakan React untuk bagian tersebut tanpa harus mengubah seluruh website menjadi aplikasi React.

Atau kamu bisa menggunakan React untuk:

Sebagian halaman

Website
 ├── HTML biasa
 ├── CSS
 ├── React Component ← React
 └── HTML biasa

Satu halaman

Home Page
 └── React

Seluruh aplikasi

Entire Application
 └── React

Itulah salah satu alasan React fleksibel.

5. Kenapa React populer?

Materi tersebut memberikan beberapa alasan.

A. Banyak perusahaan menggunakannya

React digunakan secara luas oleh perusahaan teknologi.

Contohnya:

• Meta
• Netflix
• Amazon
• dan banyak perusahaan lainnya.

Artinya, belajar React memberi kita skill yang relevan dengan industri web development.

6. React dan AI

Materi juga menyinggung AI seperti:

• ChatGPT
• Claude
• Cursor
• dan tools AI lainnya.

AI saat ini sangat bagus dalam membantu menghasilkan kode React.

Misalnya kamu meminta:

“Buatkan React component untuk login form.”

AI bisa membantu membuat:

function LoginForm() {
  return (
    <form>
      <input type="email" />
      <input type="password" />
      <button>Login</button>
    </form>
  );
}

Tetapi ada hal penting:

Jangan hanya mengandalkan AI untuk menghasilkan kode.

Kita tetap perlu memahami:

• mengapa kode tersebut dibuat
• bagaimana React bekerja
• bagaimana memperbaiki error
• bagaimana mengubah kode
• bagaimana menentukan architecture

Jadi AI sebaiknya digunakan sebagai asisten, bukan sebagai pengganti pemahaman.

7. React penting untuk dunia kerja

React memiliki ekosistem yang besar.

Artinya banyak:

• perusahaan menggunakan React
• developer menggunakan React
• library dibuat untuk React
• project open-source menggunakan React
• tutorial React tersedia
• lowongan pekerjaan membutuhkan React

Karena itu React menjadi salah satu skill penting dalam web development.

8. Konsep penting pertama: Component

Ini mungkin adalah konsep paling penting dalam React.

React menggunakan pendekatan:

Component-Based Architecture

Artinya kita membagi UI menjadi bagian-bagian kecil yang disebut component.

Misalnya website:

Website
│
├── Header
├── Sidebar
├── Main Content
│   ├── Article
│   ├── Article
│   └── Article
│
└── Footer

Masing-masing bisa menjadi component.

Contohnya:

function Header() {
  return <header>My Website</header>;
}

function Sidebar() {
  return <aside>Menu</aside>;
}

function Footer() {
  return <footer>Copyright 2026</footer>;
}

Kemudian kita gabungkan:

function App() {
  return (
    <>
      <Header />
      <Sidebar />
      <main>
        Content
      </main>
      <Footer />
    </>
  );
}

Inilah yang dimaksud dengan composition.

Kita membuat bagian-bagian kecil, lalu menyusunnya menjadi aplikasi yang lebih besar.

9. Kenapa Component sangat berguna?

Karena component bisa digunakan kembali.

Misalnya kita membuat:

function Article() {
  return (
    <article>
      <h2>React</h2>
      <p>React is a JavaScript library.</p>
    </article>
  );
}

Kita bisa menggunakannya berkali-kali.

<Article />
<Article />
<Article />

Daripada menulis HTML yang sama berkali-kali.

Lebih menarik lagi, kita bisa memberikan data berbeda.

Misalnya:

<Article
  title="React"
  description="JavaScript library"
/>

<Article
  title="Next.js"
  description="React framework"
/>

<Article
  title="TypeScript"
  description="Typed JavaScript"
/>

Satu component:

Article

bisa menghasilkan:

React Article
Next.js Article
TypeScript Article

berdasarkan data yang diberikan.

Nanti konsep ini akan membawa kita ke props.

10. Konsep penting kedua: Declarative

React juga disebut declarative.

Ini mungkin terdengar sulit, tetapi konsepnya sebenarnya sederhana.

Declarative berarti:

Kita memberitahu React seperti apa UI yang kita inginkan, bukan menjelaskan satu per satu bagaimana React harus mengubah UI tersebut.

Contoh sederhana

Bayangkan kamu pergi ke restoran.

Kamu mengatakan:

“Saya mau burger dengan kentang goreng.”

Kamu tidak perlu mengatakan:

Ambil roti.
Panggang roti.
Ambil daging.
Masak daging.
Potong kentang.
Goreng kentang.
Letakkan daging di roti.
Letakkan kentang di piring.

Kamu cukup mengatakan:

Saya mau burger + kentang.

Restoran yang mengurus proses pembuatannya.

Itulah analogi declarative.

11. Declarative vs Imperative

Supaya lebih jelas:

Imperative

Kita menjelaskan bagaimana melakukan sesuatu.

Misalnya JavaScript DOM:

const button = document.querySelector("button");

button.addEventListener("click", () => {
  document.querySelector("#message").textContent = "Hello";
});

Kita secara eksplisit memberitahu:

1. cari button
2. pasang event
3. cari element message
4. ubah text-nya

Declarative

Dengan React, kita lebih fokus pada:

“Kalau kondisinya seperti ini, tampilkan UI seperti ini.”

Contoh konsep sederhananya:

function App() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? <Dashboard /> : <Login />}
    </div>
  );
}

Kita mengatakan:

Jika user login
    → tampilkan Dashboard

Jika tidak
    → tampilkan Login

React menangani proses update UI-nya.

12. React bisa digunakan di berbagai jenis aplikasi

React tidak terlalu peduli dengan teknologi lain yang kamu gunakan.

Misalnya kamu memiliki backend:

Node.js
Python
Java
PHP
.NET

React tetap bisa digunakan sebagai frontend.

Contohnya:

        React
          |
          | HTTP/API
          ↓
       Backend
          |
          ↓
       Database

React tidak harus menggunakan backend tertentu.

13. React juga bisa digunakan untuk mobile

Materi tersebut menyebut React Native.

React Native memungkinkan developer menggunakan konsep React untuk membangun aplikasi mobile.

Misalnya:

React
 ├── Web → React
 │
 └── Mobile → React Native

Jadi kalau kamu sudah memahami React, kamu akan memiliki dasar yang berguna ketika mempelajari React Native.

Tetapi perlu dipahami:

React dan React Native bukan hal yang sama.

React terutama digunakan untuk UI web, sedangkan React Native digunakan untuk aplikasi mobile native.

14. Apa yang harus dipelajari sebelum React?

Ini juga sangat penting.

Materi menyebut tiga hal utama:

1. HTML

2. CSS

3. Modern JavaScript

Kamu tidak harus menjadi expert.

Tetapi harus memahami dasar-dasarnya.

15. HTML

HTML digunakan untuk menentukan struktur halaman.

Contohnya:

<h1>Hello World</h1>

<p>Welcome to my website.</p>

<button>Click Me</button>

Kamu harus memahami hal-hal seperti:

• element
• attribute
• form
• input
• button
• semantic HTML
• nesting

Karena React menggunakan konsep yang sangat dekat dengan HTML melalui JSX.

16. CSS

CSS digunakan untuk mengatur tampilan.

Contohnya:

button {
  background: blue;
  color: white;
  padding: 10px;
}

Minimal kamu sebaiknya memahami:

• selector
• class
• box model
• margin
• padding
• display
• flexbox
• grid
• responsive design

Karena React tidak menggantikan CSS.

React mengatur UI dan behavior, sedangkan CSS tetap bisa digunakan untuk styling.

17. JavaScript adalah yang paling penting

Karena React adalah library JavaScript, kamu perlu memahami JavaScript.

Terutama JavaScript modern seperti:

Variable

const name = "Vishwas";

Function

function greet() {
  console.log("Hello");
}

Arrow function

const greet = () => {
  console.log("Hello");
};

Array

const users = ["John", "Jane", "Bob"];

Object

const user = {
  name: "John",
  age: 25
};

Array methods

Terutama:

map()
filter()
find()
reduce()

Contohnya:

const users = ["John", "Jane", "Bob"];

const elements = users.map(user => (
  <p>{user}</p>
));

map() nantinya sangat sering digunakan dalam React.

18. Konsep JavaScript yang sangat penting untuk React

Sebelum masuk terlalu jauh ke React, sebaiknya kamu memahami:

JavaScript
│
├── Variables
├── Functions
├── Arrow Functions
├── Objects
├── Arrays
├── Destructuring
├── Spread Operator
├── map()
├── filter()
├── find()
├── Modules
├── import / export
├── Template Literals
├── Promises
├── async / await
└── DOM basics

Tidak perlu menguasainya secara sempurna.

Yang penting kamu tidak merasa asing ketika melihat kode tersebut.

19. Gambaran besar React

Kalau kita sederhanakan seluruh materi tadi:

                  REACT
                    │
                    ↓
             Membuat UI
                    │
                    ↓
              Components
                    │
          ┌─────────┴─────────┐
          ↓                   ↓
     Reusable             Composable
          │                   │
          └─────────┬─────────┘
                    ↓
              Aplikasi besar

Kemudian React menggunakan pendekatan:

Declarative
     ↓
Kita menentukan UI yang diinginkan
     ↓
React menangani update UI

20. Contoh sederhana aplikasi React

Misalnya kita ingin membuat aplikasi counter.

UI:

Counter

   0

[ - ]  [ + ]

Dengan React, kita nantinya bisa membuat component:

function Counter() {
  return (
    <div>
      <h1>Counter</h1>

      <p>0</p>

      <button>-</button>
      <button>+</button>
    </div>
  );
}

Kemudian kita akan belajar bagaimana membuat angka 0 tersebut menjadi data yang bisa berubah.

Misalnya:

0
↓
klik +
↓
1
↓
klik +
↓
2
↓
klik -
↓
1

Untuk melakukan hal seperti ini, nanti kita akan belajar konsep:

• state
• event handling
• rendering
• component
• props
• hooks

Dan dari sinilah React mulai terasa sangat powerful.

21. Hubungan antara konsep-konsep React

Kamu bisa membayangkan perjalanan belajar React seperti ini:

HTML + CSS + JavaScript
            ↓
         JSX
            ↓
       Components
            ↓
          Props
            ↓
          State
            ↓
     Event Handling
            ↓
      Conditional UI
            ↓
       Lists & Keys
            ↓
          Hooks
            ↓
      API / Data Fetching
            ↓
     Routing & Application
            ↓
      Aplikasi React

Jadi jangan khawatir kalau beberapa istilah tersebut belum kamu pahami.

Itulah yang akan dipelajari secara bertahap.

22. Inti materi dalam satu kalimat

Kalau seluruh video tersebut harus dirangkum menjadi satu kalimat:

React adalah library JavaScript yang membantu kita membangun UI dengan cara memecah aplikasi menjadi component-component kecil yang reusable, kemudian menyusunnya menjadi aplikasi yang lebih besar secara declarative dan fleksibel.

23. Analogi paling mudah untuk mengingat React

Bayangkan kamu sedang membuat LEGO.

Tanpa component:

Buat rumah
→ pasang bagian A
→ pasang bagian B
→ pasang bagian C
→ ulangi semuanya
→ buat rumah kedua
→ ulangi lagi

Dengan React:

Buat LEGO Component
       ↓
   ┌─────────┐
   │ Header  │
   └─────────┘

   ┌─────────┐
   │ Button  │
   └─────────┘

   ┌─────────┐
   │  Card   │
   └─────────┘

Kemudian:

          Website
             │
      ┌──────┼──────┐
      ↓      ↓      ↓
    Header  Card   Footer
              │
         ┌────┴────┐
         ↓         ↓
       Image     Button

Kita membuat bagian kecil, lalu menggabungkannya.

Dan bagian yang sama bisa digunakan kembali:

<ProductCard />
<ProductCard />
<ProductCard />
<ProductCard />

Itulah salah satu kekuatan utama React.

🎯 Yang perlu kamu ingat dari materi ini

Hal terpenting: jangan menghafal definisinya saja. Saat belajar React nanti, selalu tanyakan:

“UI saya bisa dipecah menjadi component apa saja?”

“Data apa yang perlu dikirim ke component?”

“Data apa yang bisa berubah?”

“Bagaimana UI seharusnya berubah ketika data berubah?”

Kalau empat pertanyaan tersebut mulai terasa natural, kamu sudah mulai memahami cara berpikir React, bukan sekadar menghafal syntax.