Pembangunan kembali besar-besaran: situs web kamu di React

Tulis ulang situs web Level 1 kamu di React. Situs web yang sama, untuk ketiga kalinya – kali ini seperti seorang profesional.

Misi kamu

kamu akan mengambil situs web kamu dari Level 1–2 dan membangunnya kembali di React. Kedengarannya seperti sebuah langkah mundur? Bukan – ini adalah pelatihan terbaik yang pernah ada: kamu sudah mengetahui konten dan desainnya, sehingga kamu dapat fokus sepenuhnya pada teknik baru. Dan pada akhirnya, kamu akan melihat secara hitam dan putih mengapa para profesional menganggapnya bermanfaat.

Rencana pembangunan kembali

Bagi situs web menjadi beberapa komponen. Ambil kertas dan pensil (serius!) dan buat sketsa situs web kamu sebagai kotak: Header, Galeri, Kuis, Footer… Setiap kotak = satu file di src/.
Pindahkan HTML ke dalam komponen. Salin sepotong demi sepotong dari file .html lama kamu ke JSX. Perhatikan perbedaan yang umum: kelas → namakelas, setiap komponen mengembalikan satu elemen pembungkus. Salin gambar kamu ke folder publik/ di proyek Vite – lalu jalur seperti /images/team.jpg berfungsi tidak berubah.
Pindahkan CSS. Salin konten style.css kamu ke src/App.css. Seharusnya berfungsi hampir tidak berubah – CSS tetaplah CSS.
Tarik data ke dalam array. Kartu, hasil, foto galeri – apa pun yang berulang, ubah menjadi array objek + .map(), seperti yang kamu pelajari di pelajaran komponen.

Tulis ulang mantra Level 2 sebagai status. Berikut tabel konversinya:

Tingkat 2 (JavaScript biasa)	Bereaksi
`getElementById` + `teksKonten`	status + `{nilai}` di BEJ
`addEventListener("klik", ...)`	`onKlik={...}`
`classList.toggle` + CSS `.hidden`	status boolean + `{kondisi && (...)}`
penghitung dengan variabel	`useState` dengan nomor

Tunjukkan pada saya: mode gelap dengan cara Bereaksi

Mari kita tulis ulang satu mantra bersama-sama, sehingga kamu dapat melihat konversinya beraksi:

import { useState } from 'react';
import Header from './Header.jsx';
import Gallery from './Gallery.jsx';

function App() {
  const [dark, setDark] = useState(
    localStorage.getItem("mode") === "dark"
  );

  function toggleMode() {
    const newMode = !dark;
    setDark(newMode);
    localStorage.setItem("mode", newMode ? "dark" : "light");
  }

  return (
    <div className={dark ? "dark" : ""}>
      <Header onToggle={toggleMode} dark={dark} />
      <Gallery />
    </div>
  );
}

export default App;

Dan di Header.jsx, tombol menerima fungsi sebagai penyangga:

function Header({ onToggle, dark }) {
  return (
    <header>
      <h1>My website</h1>
      <button onClick={onToggle}>{dark ? "☀️" : "🌙"}</button>
    </header>
  );
}

Satu hal baru yang terakhir: prop dapat menjadi fungsi juga. Aplikasi memiliki negara bagian dan meminjamkan tombol kepada anaknya untuk mengaktifkannya. Ini disebut “status hidup di atas”, dan ini adalah pola yang paling umum di React.

Buat kembali daftar periksa

Situs web dibagi menjadi setidaknya 4 komponen dalam file terpisah
Elemen berulang (kartu, foto…) dihasilkan dari array melalui .map()
Setidaknya dua tempat interaktif berjalan di useState
Mode gelap berfungsi dan diingat (Penyimpanan lokal)
Tidak ada kesalahan di konsol
Tidak ada getElementById di mana pun dalam kode 😉

💡

Terjebak adalah bagian dari permainan. Pelajaran ini adalah maraton, bukan lari cepat – silakan membaginya menjadi beberapa hari. Saat kamu mengalami kebuntuan: konsol (F12), pesan kesalahan dari Vite, dan membandingkan dengan contoh dari pelajaran sebelumnya. Begitulah cara seorang profesional melakukan debug.

✅

Periksa diri kamu: Situs web kamu berjalan di localhost dan terlihat (hampir) sama seperti sebelumnya – namun di dalamnya, situs tersebut terbuat dari komponen, data, dan status. Sekarang coba tambahkan satu kartu ke susunan data dan perhatikan betapa sedikit pekerjaan yang diperlukan. Itulah yang menjadi alasan utama keberadaan React.

Apa yang bisa diambil dari pelajaran ini

Pembangunan kembali: dipecah menjadi beberapa komponen → pindahkan HTML dan CSS → data ke dalam array → mantra ke dalam status.
Prop juga bisa menjadi sebuah fungsi – orang tua meminjamkan tombol kepada anaknya untuk mengontrol keadaannya sendiri.
Hasil yang sama, struktur lebih bersih: lebih sedikit penyalinan, perubahan lebih mudah. Itu adalah kemajuan yang benar-benar dapat kamu lihat.