Reaguj JSX

Co to jest JSX?

JSX oznacza JavaScript XML.

JSX pozwala nam pisać HTML w React.

JSX ułatwia pisanie i dodawanie HTML w React.

Kodowanie JSX

JSX pozwala nam pisać elementy HTML w JavaScript i umieszczać je w DOM bez żadnych createElement()  i/lub appendChild()metod.

JSX konwertuje tagi HTML na elementy React.

Oto dwa przykłady. Pierwszy używa JSX, a drugi nie:

const myelement = <h1>I Love JSX!</h1>;

ReactDOM.render(myelement, document.getElementById('root'));

const myelement = React.createElement('h1', {}, 'I do not use JSX!');

ReactDOM.render(myelement, document.getElementById('root'));

Jak widać w pierwszym przykładzie, JSX pozwala nam pisać HTML bezpośrednio w kodzie JavaScript.

JSX to rozszerzenie języka JavaScript oparte na ES6 i jest tłumaczone na zwykły JavaScript w czasie wykonywania.

Wyrażenia w JSX

Dzięki JSX możesz pisać wyrażenia wewnątrz nawiasów klamrowych { }.

Wyrażenie może być zmienną React, właściwością lub dowolnym innym poprawnym wyrażeniem JavaScript. JSX wykona wyrażenie i zwróci wynik:

const myelement = <h1>React is {5 + 5} times better with JSX</h1>;

Wstawianie dużego bloku HTML

Aby napisać kod HTML w wielu wierszach, umieść kod HTML w nawiasach:

const myelement = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);

Jeden element najwyższego poziomu

Kod HTML musi być opakowany w JEDEN element najwyższego poziomu.

Więc jeśli lubisz napisać dwa akapity, musisz umieścić je wewnątrz elementu nadrzędnego, tak jak divelement.

const myelement = (
  <div>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </div>
);

Alternatywnie możesz użyć „fragmentu”, aby zawinąć wiele linii. Zapobiegnie to niepotrzebnemu dodawaniu dodatkowych węzłów do DOM.

Fragment wygląda jak pusty znacznik HTML: <></>.

const myelement = (
  <>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </>
);

Elementy muszą być zamknięte

JSX przestrzega reguł XML, dlatego elementy HTML muszą być poprawnie zamknięte.

const myelement = <input type="text" />;

Klasa atrybutu = nazwaKlasy

Atrybut jest classczęsto używanym atrybutem w HTML, ale ponieważ JSX jest renderowany jako JavaScript, a classsłowo kluczowe jest słowem zastrzeżonym w JavaScript, nie można go używać w JSX.

JSX rozwiązał to, używając classNamezamiast tego. Kiedy JSX jest renderowany, tłumaczy className atrybuty na classatrybuty.

const myelement = <h1 className="myclass">Hello World</h1>;

Warunki - oświadczenia if

React obsługuje ifinstrukcje, ale nie wewnątrz JSX.

Aby móc używać instrukcji warunkowych w JSX, powinieneś umieścić if instrukcje poza JSX lub możesz zamiast tego użyć wyrażenia trójskładnikowego:

Opcja 1:

Napisz ifoświadczenia poza kodem JSX:

const x = 5;
let text = "Goodbye";
if (x < 10) {
  text = "Hello";
}

const myelement = <h1>{text}</h1>;

Opcja 2:

Zamiast tego użyj wyrażeń trójskładnikowych:

const x = 5;

const myelement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;

const paragraph = React.createElement(, {}, 'This is a paragraph without using JSX!');

ReactDOM.render(paragraph, document.getElementById('root'));