Apa Itu React? Panduan Mudah untuk Bukan Pembangun

React ialah pustaka JavaScript untuk membina antara muka pengguna — bahagian app yang dilihat dan diklik oleh orang. Anda membina skrin daripada bahagian boleh guna semula yang dipanggil komponen, seperti butang, kad produk atau keseluruhan halaman, dan React memastikan skrin sentiasa selari dengan data anda: apabila data berubah, React mengemas kini bahagian halaman yang bergantung padanya. Ia dicipta di Facebook (kini Meta), bersifat sumber terbuka, dan merupakan antara cara yang paling meluas untuk membina app web.

Mengapa ia penting apabila membina dengan AI

Jika anda membina app web dengan alat AI, besar kemungkinan ia ditulis dalam React. Ramai pembina app AI menggunakan React secara lalai, kerana ia popular, didokumenkan dengan baik, dan terdapat jumlah kod React yang besar untuk model AI pelajari.

Anda tidak perlu menulis React untuk membina dengan AI. Tetapi mengetahui sedikit membantu anda:

• Menerangkan perubahan dengan tepat. “Tukar komponen ProductCard supaya harga dicetak tebal” lebih jelas daripada “jadikan harga menonjol di suatu tempat”.
• Memahami ralat. Mesej seperti “Cannot read properties of undefined” atau “Too many re-renders” lebih mudah difahami.
• Membuat pilihan yang munasabah. App React biasa dipaparkan dalam pelayar, yang memberi kesan kepada keterlihatan carian dan kelajuan pemuatan pertama. Mengetahuinya membantu anda memutuskan bila perlu meminta persediaan yang berbeza.
• Bekerja dengan pembangun kemudian. React ialah kemahiran yang biasa, jadi seorang pembangun biasanya boleh mengambil alih kod asas React dengan mudah.

Analogi harian

Bayangkan LEGO. Daripada memahat keseluruhan model daripada satu blok, anda membinanya daripada bata piawai. Beberapa bata membentuk roda; empat roda dan beberapa bahagian lain membentuk kereta. Jika anda mahu setiap kereta mempunyai roda merah, anda menukar reka bentuk roda sekali sahaja.

Komponen React ialah bata-bata itu. Komponen Button digunakan dalam ProductCard, yang digunakan dalam ProductGrid, yang merupakan sebahagian daripada ShopPage. Tukar Button sekali, dan setiap butang dalam app berubah.

Separuh lagi analogi ini: bayangkan model LEGO itu membina semula dirinya setiap kali anda menukar arahan. Itulah helah React yang satu lagi — anda menerangkan bagaimana skrin patut kelihatan untuk data semasa, dan React menentukan apa yang perlu ditukar pada halaman.

Idea utama

Komponen

Komponen ialah fungsi JavaScript yang memulangkan sekeping antara muka. Dokumentasi React menerangkan komponen sebagai sebahagian UI yang mempunyai logik dan rupanya sendiri. Nama komponen bermula dengan huruf besar.

JSX

Komponen biasanya ditulis dalam JSX, yang kelihatan seperti HTML yang dicampur dengan JavaScript:

function Greeting() {
  return <h1>Selamat kembali!</h1>;
}

JSX adalah pilihan, tetapi dokumentasi React menyatakan bahawa kebanyakan projek menggunakannya. Ia ditukar kepada JavaScript biasa sebelum dijalankan dalam pelayar.

Props

Props ialah input yang anda hantar ke dalam komponen, seperti tetapan pada bahagian boleh guna semula:

<ProductCard name="Lavender Candle" price={24} />

ProductCard yang sama boleh memaparkan mana-mana produk.

State

State ialah maklumat yang diingati oleh komponen dan boleh berubah semasa app berjalan — sama ada menu terbuka, apa yang ditaip dalam kotak carian, berapa banyak item dalam bakul. Apabila state berubah, React memaparkan semula komponen supaya skrin sepadan.

Hooks

Hooks ialah fungsi yang namanya bermula dengan use, seperti useState (mengingati nilai) dan useEffect (menjalankan kod selepas render, contohnya untuk mengambil data). Anda akan melihatnya di mana-mana dalam kod React yang dijana AI.

Contoh kerja: pembilang bakul

Katakan kedai dalam talian anda mempunyai butang “Tambah ke bakul” dan ikon bakul yang memaparkan bilangan item. Dalam React ia kelihatan kira-kira begini:

import { useState } from "react";

function Shop() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Lavender Candle"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Bakul ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Tambah ke bakul</button>
    </div>
  );
}

Apa yang berlaku apabila pembeli mengklik “Tambah ke bakul”:

1. onClick pada butang memanggil onAdd, yang memanggil setCartCount.
2. React mengemas kini state cartCount daripada 0 kepada 1.
3. React memaparkan semula Shop, menghantar count={1} ke dalam CartIcon.
4. Halaman kini memaparkan “Bakul (1)”. Tiada sesiapa menulis kod yang berkata “cari teks bakul dan tukarkannya” — skrin mengikut data.

Perhatikan juga hadnya. Kiraan ini tinggal dalam memori pelayar. Muat semula halaman dan ia kembali kepada 0. Untuk menyimpan bakul, anda perlu menyimpannya di tempat yang kekal — kuki, storan pelayar, atau pangkalan data melalui backend anda. React mengendalikan skrin; ia tidak menyimpan data anda.

Di mana React sesuai dalam app web

App “Vite + React” dipaparkan dalam pelayar (single-page app). App Next.js boleh memaparkan halaman di pelayan dahulu, yang membantu enjin carian dan kelajuan pemuatan pertama.

Istilah biasa dijelaskan

Kesilapan dan salah faham yang biasa

• “React ialah bahasa pengaturcaraan.” Ia ialah pustaka yang ditulis dan digunakan dari JavaScript (atau TypeScript).
• “React menyimpan data saya.” State tinggal dalam pelayar dan hilang apabila dimuat semula. Data kekal memerlukan backend dan pangkalan data.
• Meletakkan rahsia dalam kod React. Semua yang ada dalam app React dihantar ke pelayar pelawat. Kunci API di situ bersifat awam. Simpan di pelayan.
• “App React tidak boleh berada dalam kedudukan carian.” Pemaparan hanya di pihak klien kurang baik untuk carian, tetapi prarender atau render pelayan menyelesaikan kebanyakan masalah itu.
• Komponen gergasi. Satu komponen 1,000 baris sukar untuk manusia dan AI ubah dengan selamat. Minta yang lebih kecil.
• Menganggap app web React ialah app telefon. Ia berjalan dalam pelayar, termasuk pada telefon, tetapi bukan app App Store.

Apa yang patut diminta daripada pembina AI anda

• “Pecahkan halaman ini kepada komponen kecil yang dinamakan, dan beritahu saya setiap komponen berada dalam fail yang mana.”
• “Jadikan komponen ProductCard boleh guna semula, dengan name, price dan image sebagai props.”
• “Simpan bakul dalam pangkalan data supaya ia kekal selepas muat semula.”
• “Simpan semua kunci API di pelayan; kod React sepatutnya memanggil API kami sendiri.”
• “Tambah keadaan memuatkan dan ralat untuk data yang datang dari pelayan.”
• “Jika keterlihatan carian penting untuk halaman ini, prarenderkannya atau gunakan persediaan render pelayan.”
• “Terangkan dalam bahasa mudah maksud ralat ini dan dari komponen mana ia datang.”

Untuk gambaran yang lebih besar, lihat frontend vs backend, dan untuk menyemak kod yang ditulis AI, lihat cara menyemak kod yang dijana AI.

React dalam Mythex

Kecuali anda meminta sesuatu yang lain, Mythex memulakan projek baharu dengan Vite + React + TypeScript + Tailwind, dengan pratonton langsung berjalan semasa anda bersembang. Anda boleh menamakan persediaan lain dalam prompt pertama anda — contohnya “Gunakan Next.js” atau “halaman arah statik HTML biasa” — dan Mythex memilihnya daripada apa yang anda tulis; tiada skrin tetapan untuknya. Halaman dokumentasi tentang cara teknologi dipilih menerangkan pilihan tersebut. Editor kod adalah baca sahaja pada pelan Percuma; pada Pro anda boleh mengedit kod React terus dan mengeksport projek untuk terus bekerja di tempat lain.

Soalan lazim