JSX (JavaScript XML): Memudahkan Pembangunan UI dalam React-tutorial js-php.cn

JSX (JavaScript XML): Memudahkan Pembangunan UI dalam React

Barbara Streisand

Lepaskan： 2025-01-03 17:23:45

asal

727 orang telah melayarinya

JSX (JavaScript XML): Simplifying UI Development in React

JSX (JavaScript XML): Ciri Utama React

JSX (JavaScript XML) ialah sambungan sintaks untuk JavaScript yang membenarkan pembangun menulis kod seperti HTML terus dalam fail JavaScript. Ia merupakan salah satu ciri teras React, mempertingkatkan pengalaman pembangunan dengan membolehkan cara yang jelas dan ringkas untuk menerangkan struktur antara muka pengguna (UI).

Ini semua yang anda perlu tahu tentang JSX:

1. Apakah JSX?

JSX membolehkan anda menulis teg seperti XML yang mewakili elemen HTML atau komponen React dalam JavaScript. Walaupun JSX kelihatan seperti HTML, ia tidak—di bawah hud, JSX disusun menjadi JavaScript standard menggunakan alat seperti Babel.

Contoh JSX:

  const Greeting = () => {
    return <h1>Hello, World!</h1>;
  };

Salin selepas log masuk

JavaScript Terkumpul:

  const Greeting = () => {
    return React.createElement('h1', null, 'Hello, World!');
  };

Salin selepas log masuk

2. Ciri Utama JSX

a. Membenamkan Ungkapan

Anda boleh membenamkan ungkapan JavaScript dalam JSX dengan membungkusnya dalam pendakap kerinting {}.

Contoh:

  const name = "Alice";
  const Greeting = () => <h1>Hello, {name}!</h1>;

Salin selepas log masuk

b. Atribut

JSX menyokong atribut yang serupa dengan HTML tetapi dengan penamaan camelCase untuk sifat.

Contoh:

  const Button = () => <button className="btn" onClick={() => alert('Clicked!')}>Click Me</button>;

Salin selepas log masuk

c. Elemen Bersarang

Anda boleh menyusun elemen di dalam satu sama lain untuk mencipta struktur UI yang lengkap.

Contoh:

  const App = () => (
    <div>
      <h1>Welcome</h1>
      <p>This is a nested JSX structure.</p>
    </div>
  );

Salin selepas log masuk

d. Rendering Bersyarat

Gunakan logik JavaScript untuk memaparkan elemen secara bersyarat.

Contoh:

  const isLoggedIn = true;
  const App = () => (
    <div>
      {isLoggedIn ? <h1>Welcome Back!</h1> : <h1>Please Log In</h1>}
    </div>
  );

Salin selepas log masuk

3. Mengapa Menggunakan JSX?

a. Sintaks Perisytiharan

JSX menyediakan cara deklaratif untuk mentakrifkan UI, menjadikan kod lebih mudah dibaca dan lebih dekat dengan reka bentuk UI sebenar.

b. Penyepaduan dengan JavaScript

Memandangkan JSX hanyalah gula sintaktik untuk fungsi JavaScript, ia membenarkan penyepaduan logik, keadaan dan prop yang lancar dalam definisi UI anda.

c. Pengalaman Pembangun Dipertingkat

JSX menjadikan kod UI lebih mudah untuk ditulis, difahami dan nyahpepijat berbanding dengan panggilan React.createElement() tradisional.

4. Peraturan dan Amalan Terbaik JSX

a. Mesti Mengembalikan Elemen Induk Tunggal

JSX mesti mengembalikan satu elemen akar. Gunakan

atau serpihan React (<>...) untuk mengumpulkan berbilang elemen.

Contoh:

  const Greeting = () => {
    return <h1>Hello, World!</h1>;
  };

Salin selepas log masuk

b. Tag Penutup Diri

Untuk elemen tanpa kanak-kanak, gunakan tag penutup sendiri.

Contoh:

  const Greeting = () => {
    return React.createElement('h1', null, 'Hello, World!');
  };

Salin selepas log masuk

c. Elakkan Penggayaan Sebaris (Apabila Boleh)

Walaupun JSX menyokong penggayaan sebaris melalui atribut gaya, gunakan perpustakaan CSS-dalam-JS atau helaian gaya luaran untuk kebolehselenggaraan yang lebih baik.

Contoh Penggayaan Sebaris:

  const name = "Alice";
  const Greeting = () => <h1>Hello, {name}!</h1>;

Salin selepas log masuk

b. Melarikan Diri dengan Benar

JSX secara automatik melepaskan input berbahaya untuk menghalang serangan XSS. Contohnya:

{userInput}
akan melarikan diri tag dalam userInput.

6. Bagaimana JSX Sesuai Dengan Reaksi

JSX bukan keperluan untuk React tetapi digunakan secara meluas kerana:

Ia memudahkan proses mentakrifkan komponen dan UI.
Ia berintegrasi dengan lancar dengan logik pemaparan React.

Anda boleh membina komponen React tanpa JSX, tetapi kod tersebut menjadi verbose dan lebih sukar untuk diurus:

Tanpa JSX:

  const Button = () => <button className="btn" onClick={() => alert('Clicked!')}>Click Me</button>;

Salin selepas log masuk

7. Peralatan dan Sokongan

Untuk menggunakan JSX, anda memerlukan alat binaan seperti Babel untuk mentranspile kod JSX ke dalam JavaScript. Kebanyakan persediaan React, termasuk Create React App, mengendalikan perkara ini secara automatik.

8. Kesimpulan

JSX merapatkan jurang antara HTML dan JavaScript, menawarkan cara deklaratif, boleh dibaca dan berkuasa untuk menentukan UI dalam React. Walaupun tidak wajib, ia adalah ruji dalam pembangunan React moden, membolehkan pembangun membina antara muka pengguna yang kompleks dengan plat dandang yang kurang dan lebih jelas.

Atas ialah kandungan terperinci JSX (JavaScript XML): Memudahkan Pembangunan UI dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!