Menukar HTML kepada JSX : JSX dan Peraturan JSX

Kita akan belajar apa itu JSX dan peraturan JSX.

---

JSX ialah sambungan sintaks untuk JavaScript. Anda boleh menulis pemformatan seperti HTML di dalam fail JavaScript.

Ia berdasarkan Web, Html, Css dan JavaScript. pembangun web menulis kandungan halaman secara berasingan sebagai fail Html, reka bentuk sebagai fail Css dan logik sebagai fail JavaScript.

• Perlu tahu : JSX ialah sambungan sintaks, manakala React ialah pustaka JavaScript.

<div>





<pre class="brush:php;toolbar:false">
//CSS

.wrapper {
   display : flex;
}

function myFunction() {
  document.getElementById("wrapper").innerHTML = "Hello world";
}

Tetapi apabila Web telah menjadi lebih interaktif, logik menjadi lebih penting. JavaScript sedang mengurus Html. Oleh itu, dalam React, logik dan pemformatan secara langsung dalam komponen.

Contoh komponen tindak balas :

import React, { useState } from "react";

function App() {
  const [formData, setFormData] = useState({
    username: "",
    password: "",
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData((prevState) => ({ ...prevState, [name]: value }));
  };

  return (
    <form>
      <label>
        Username:
        <input
          type="text"
          name="username"
          value={formData.username}
          onChange={handleChange}
        />
      </label>
      <label>
        Password:
        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
        />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

adalah penting untuk memastikan penanda pemaparan dan logik bersama-sama untuk memastikan teg html disegerakkan antara satu sama lain dengan setiap pengeditan.

Komponen React ialah fungsi JavaScript yang mengandungi penanda yang React rendering dalam penyemak imbas. Komponen bertindak balas gunakan sambungan sintaks yang dipanggil JSX untuk penanda ini. JSX kelihatan seperti Html.

---

Peraturan JSX

1. Kembalikan elemen akar tunggal

Untuk mengembalikan elemen daripada komponen, bungkusnya dengan teg induk tunggal. Anda boleh menggunakan atau serpihan (<>)

Contohnya div

<div>
  <h1>Hedy Lamarr's Todos</h1>
  <img 
    src="https://picsum.photos/200/300" 
    alt="lorempicsum" 
  >
</div>

---

Contohnya <>

<>
   <h1>Hedy Lamarr's Todos</h1>
  <img 
    src="https://picsum.photos/200/300" 
    alt="lorempicsum" 
  />
</>

• Fragmen membolehkan anda mengumpulkan perkara tanpa meninggalkan sebarang kesan dalam pepohon HTML penyemak imbas.

---

2. Tutup semua tag

Dalam JSX, semua teg mesti ditutup. Contohnya, teg penutup sendiri seperti img dalam Html

Contoh :

<img 
    src="https://picsum.photos/200/300" 
    alt="lorempicsum" 
  />

---

3. sarung unta

Dalam React, banyak sifat HTML ditulis dengan camelCase.

Contoh :

 <img 
    src="https://picsum.photos/200/300" 
    alt="lorempicsum" 
    className="photo"
  />

<button onClick={handleClick}>Click Me</button>

---

JavaScript dalam JSX

Dalam JSX, kadangkala anda ingin menambah sedikit JavaScript logik atau merujuk kepada ciri dinamik di dalam penanda ini. Dalam kes ini, anda boleh menggunakan kurungan dalam JSX

• Melalukan atribut rentetan kepada JSX

Apabila anda ingin menghantar atribut rentetan kepada JSX, anda meletakkannya dalam petikan tunggal atau berganda

Contoh :

<div>





<pre class="brush:php;toolbar:false">
//CSS

.wrapper {
   display : flex;
}

Di sini, src dan alt sedang diluluskan sebagai rentetan. tetapi jika anda ingin menentukan teks src atau alt secara dinamik, anda boleh menggunakan nilai daripada javascript menggunakan pendakap kerinting dan bukannya petikan berganda

Contoh :

function myFunction() {
  document.getElementById("wrapper").innerHTML = "Hello world";
}

---

• Menggunakan Pendakap Kerinting

Boleh menggunakan JavaScript dengan kurung kerinting {}. Anda boleh menggunakan fungsi, pembolehubah dan banyak lagi.

Contoh :

import React, { useState } from "react";

function App() {
  const [formData, setFormData] = useState({
    username: "",
    password: "",
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData((prevState) => ({ ...prevState, [name]: value }));
  };

  return (
    <form>
      <label>
        Username:
        <input
          type="text"
          name="username"
          value={formData.username}
          onChange={handleChange}
        />
      </label>
      <label>
        Password:
        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
        />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

---

• Menggunakan Pendakap Kerinting Berganda

React tidak memerlukan anda menggunakan gaya sebaris (Kelas CSS berfungsi dengan baik untuk kebanyakan kes). Tetapi apabila anda memerlukan gaya sebaris, anda boleh menghantar objek kepada atribut gaya. Gunakan pendakap kerinting berganda.

Contoh :

eksport fungsi lalai TodoList() {
  kembali (
    <ul>

• Anda melihat {{ }} dalam JSX, ketahui bahawa ia adalah objek di dalam kerinting JSX.

• Sifat gaya sebaris hendaklah ditulis sebagai camelCase.

---

Anda boleh memindahkan beberapa ungkapan ke dalam satu objek dan menggunakannya dalam JSX anda di dalam pendakap kerinting

orang const = {
  nama: 'Gregorio Y. Zara',
  tema: {
    Warna latar belakang: 'merah',
    warna: 'kuning'
  }
};

eksport fungsi lalai TodoList() {
  kembali (
    <div>




<hr>

<h2>
  
  
  Kesimpulan
</h2>

<p>JSX ialah alat penting yang menjadikan proses pembangunan web lebih berkesan dan praktikal. Dengan JSX, anda boleh menyimpan penanda pemaparan dan logik bersama-sama untuk memastikan Decal html disegerakkan antara satu sama lain dalam setiap pengeditan.</p>


<hr>

<p>Jika anda suka artikel saya, anda boleh membelikan saya kopi :)<br>
<img src="https://img.php.cn/upload/article/000/000/000/173199438683667.jpg" alt="Converting HTML to JSX : JSX and Rules of JSX"></p>




          

            
        

Atas ialah kandungan terperinci Menukar HTML kepada JSX : JSX dan Peraturan JSX. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!