Konvertieren von HTML in JSX: JSX und Regeln von JSX

Wir werden lernen, was JSX ist und die Regeln von JSX.

---

JSX ist eine Syntaxerweiterung für JavaScript. Sie können HTML-ähnliche Formatierungen in eine JavaScript-Datei schreiben.

Es basiert auf Web, Html, CSS und JavaScript. Webentwickler haben den Inhalt der Seite separat als HTML-Datei, die Designs als CSS-Datei und die Logik als JavaScript-Datei geschrieben.

• Müssen Sie wissen: JSX ist eine Syntaxerweiterung, während React eine JavaScript-Bibliothek ist.

<div>





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

.wrapper {
   display : flex;
}

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

Aber je interaktiver das Web geworden ist, desto wichtiger ist die Logik geworden. JavaScript verwaltete Html. Daher leben in React Logik und Formatierung in Komponenten zusammen.

Beispiel für eine Reaktionskomponente :

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>
  );
}

Es ist wichtig, das Rendering-Markup und die Logik zusammenzuhalten, um ein HTML-Tag bei jeder Bearbeitung synchron zu halten.

React-Komponenten sind eine JavaScript-Funktion, die das Markup enthält, das React im Browser rendert. React-Komponenten verwenden für dieses Markup eine Syntaxerweiterung namens JSX. JSX sieht aus wie HTML.

---

Die Regeln von JSX

1. Gibt ein einzelnes Wurzelelement zurück

Um Elemente von einer Komponente zurückzugeben, umschließen Sie sie mit einem einzelnen übergeordneten Tag. Sie können ein oder ein Fragment (<>) verwenden.

Zum Beispiel div

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

---

Zum Beispiel <>

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

• Mit Fragmenten können Sie Dinge gruppieren, ohne Spuren im HTML-Baum des Browsers zu hinterlassen.

---

2. Schließen Sie alle Tags

In JSX müssen alle Tags geschlossen sein. Zum Beispiel selbstschließende Tags wie img in Html

Beispiel :

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

---

3. camelCase

In React werden viele HTML-Eigenschaften mit camelCase geschrieben.

Beispiel :

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

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

---

JavaScript in JSX

In JSX möchten Sie manchmal ein wenig JavaScript-Logik hinzufügen oder auf eine dynamische Funktion innerhalb dieses Markups verweisen. In diesem Fall können Sie Klammern in JSX

verwenden

• Übergabe des String-Attributs an JSX

Wenn Sie ein String-Attribut an JSX übergeben möchten, setzen Sie es in einfache oder doppelte Anführungszeichen

Beispiel :

<div>





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

.wrapper {
   display : flex;
}

Hier werden src und alt als Strings übergeben. Wenn Sie den Quell- oder Alt-Text jedoch dynamisch angeben möchten, können Sie einen Wert aus Javascript mit geschweiften Klammern anstelle von doppelten Anführungszeichen

verwenden

Beispiel :

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

---

• Verwendung von geschweiften Klammern

Es ist möglich, JavaScript mit geschweiften Klammern {} zu verwenden. Sie können Funktionen, Variablen und mehr verwenden.

Beispiel :

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>
  );
}

---

• Verwendung von Double Curlies-Zahnspangen

React erfordert keine Verwendung von Inline-Stilen (CSS-Klassen funktionieren in den meisten Fällen hervorragend). Wenn Sie jedoch einen Inline-Stil benötigen, können Sie ein Objekt an das Stilattribut übergeben. Verwenden Sie doppelte geschweifte Klammern.

Beispiel :

Standardfunktion TodoList() exportieren {
  zurückkehren (
    <ul>

• Sie sehen {{ }} in JSX, wissen Sie, dass es sich um ein Objekt innerhalb der JSX-Curlies handelt.

• Inline-Stileigenschaften sollten als camelCase geschrieben werden.

---

Sie können mehrere Ausdrücke in ein Objekt verschieben und sie in Ihrem JSX in geschweiften Klammern verwenden

const person = {
  Name: „Gregorio Y. Zara“,
  Thema: {
    Hintergrundfarbe: 'rot',
    Farbe: 'gelb'
  }
};

Standardfunktion TodoList() exportieren {
  zurückkehren (
    <div>




<hr>

<h2>
  
  
  Abschluss
</h2>

<p>JSX ist ein wichtiges Tool, das Webentwicklungsprozesse effektiver und praktischer macht. Mit JSX können Sie das Render-Markup und die Logik zusammenhalten, um ein HTML-Decal bei jeder Bearbeitung miteinander zu synchronisieren.</p>


<hr>

<p>Wenn dir meine Artikel gefallen, kannst du mir gerne einen Kaffee spendieren :)<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>




          

            
        

Das obige ist der detaillierte Inhalt vonKonvertieren von HTML in JSX: JSX und Regeln von JSX. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!