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

• ü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

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="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173199438683667.jpg" class="lazy" 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!