Memahami React dalam ins

Mencari cara cepat untuk memahami asas React? Rasa terharu dengan tutorial yang panjang lebar? Hanya dalam 5 minit, anda akan belajar cukup untuk membaca dan memahami kebanyakan kod React.

Jadual Kandungan

• Apakah React?
• Konsep Teras
• Corak Biasa
• Menyatukan Semuanya
• Itu sahaja!

Apakah React?

React ialah perpustakaan JavaScript untuk membina UI seperti butang atau borang.

Fikirkan membina dengan blok LEGO. Daripada mencipta satu istana besar, anda membina menggunakan kepingan yang lebih kecil dan boleh diguna semula yang bersambung bersama. React membolehkan anda membina antara muka web menggunakan bahagian boleh guna semula yang dipanggil "komponen".

Begini rupa kod React:

// A simple React component
function Greeting() {
  return <h1>Hello!</h1>;
}

Sintaks khas ini dipanggil JSX - ia membolehkan anda menulis kod seperti HTML dalam JavaScript.

React membantu anda:

• Pecahkan UI kompleks kepada bahagian yang boleh diurus
• Kendalikan UI dan data dengan cekap menggunakan sistem DOM Maya
• Kemas kini halaman web secara automatik apabila data anda berubah

Konsep Teras

1. Komponen ?

Komponen adalah seperti blok LEGO dalam React. Ia adalah kepingan UI boleh guna semula yang boleh anda gabungkan.

// A simple component
function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Using it
<Welcome name="Alice" />

2. Alat peraga ?

Props ialah data yang dihantar kepada komponen - seperti parameter fungsi.

// 'name' and 'age' are passed to UserCard() as props
function UserCard({ name, age }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
    </div>
  );
}

<UserCard name="Alice" age={25} />

Nota: Prop adalah baca sahaja.

3. Negeri ?

Negara ialah data yang boleh berubah. Apabila ia berubah, React mengemas kini UI secara automatik.

function LikeButton() {
  // 'likes' is state
  // 'setLikes' is function to update the state
  const [likes, setLikes] = useState(0);

  return (
    <button onClick={() => setLikes(likes + 1)}>
      Likes: {likes}
    </button>
  );
}

Nota: useState(0) menyediakan keadaan dengan nilai awal 0 (lebih lanjut mengenai Cangkuk di bawah).

4. Mata kail ?

Cangkuk ialah fungsi yang membenarkan komponen menggunakan ciri React. Mereka sentiasa bermula dengan "penggunaan".

• useState: untuk mengurus perubahan data (keadaan)
  

  const [count, setCount] = useState(0); // Initialize count with 0
  

  Salin selepas log masuk

• useEffect: untuk menjalankan kod pada masa tertentu (seperti panggilan API)
  

  useEffect(() => {
      fetchData(); // Get data
  }, []);          // Run once when page loads
  

  Salin selepas log masuk

Corak Biasa

Rendering Bersyarat

Tunjukkan kandungan yang berbeza berdasarkan syarat:

function Greeting({ isLoggedIn }) {
  return isLoggedIn
   ? <h1>Welcome!</h1>
   : <h1>Please log in</h1>;
}

Apabila isLoggedIn adalah benar, tunjukkan "Selamat Datang!", jika tidak, tunjukkan "Sila log masuk".

Penggunaan:

<Greeting isLoggedIn={true} />   // "Welcome!"
<Greeting isLoggedIn={false} />  // "Please log in"

Pengendalian Acara

Kendalikan interaksi pengguna seperti klik:

function ToggleButton() {
 // Track button state (ON/OFF)
  const [isOn, setIsOn] = useState(false);

  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
}

Apabila diklik, teks butang bertukar antara "HIDUP" dan "MATI".

Penggunaan:

<ToggleButton />  // Shows: "OFF" by default

Menyatukan Semuanya?

Berikut ialah contoh sebenar menggunakan apa yang kami pelajari:

function LikeButton({ initialLikes = 0 }) {
  const [likes, setLikes] = useState(initialLikes);

  return (
    <button onClick={() => setLikes(likes + 1)}>
      {likes === 0 ? '♡' : '?'} {likes > 0 && likes}
    </button>
  );
}

Komponen LikeButton ini:

• Mendapat suka awal dikira sebagai prop
• Menunjukkan hati kosong (♡) apabila kiraan ialah 0
• Menunjukkan hati merah jambu (?) dengan nombor apabila suka > 0
• Mengemas kini hati dan kiraan apabila diklik

Contoh Penggunaan:

// A simple React component
function Greeting() {
  return <h1>Hello!</h1>;
}

Itu sahaja! ?

Anda kini tahu asas React! Walaupun masih banyak lagi yang perlu dipelajari, anda boleh memahami kebanyakan kod React yang anda lihat.

Bersedia untuk Bermula?

Terdapat beberapa cara untuk mencipta projek React:

• Next.js: Rangka kerja Reaksi Timbunan Penuh, disyorkan untuk kebanyakan projek baharu
• Gatsby: Rangka kerja bertindak balas untuk tapak web yang disokong CMS pantas
• Vite: Alat binaan moden dan pantas, bagus untuk belajar Bertindak balas dan membina aplikasi satu halaman

Butiran ada di sini.

Selamat mengekod✨

Atas ialah kandungan terperinci Memahami React dalam ins. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!