Reagovat JSX


Co je JSX?

JSX je zkratka pro JavaScript XML.

JSX nám umožňuje psát HTML v Reactu.

JSX usnadňuje psaní a přidávání HTML v Reactu.


Kódování JSX

JSX nám umožňuje psát prvky HTML v JavaScriptu a umísťovat je do DOM bez jakýchkoliv createElement()  a/nebo appendChild()metod.

JSX převádí značky HTML na prvky reakce.

Nemusíte používat JSX, ale JSX usnadňuje psaní aplikací React.

Zde jsou dva příklady. První používá JSX a druhý ne:

Příklad 1

JSX:

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

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

Příklad 2

Bez JSX:

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

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

Jak můžete vidět v prvním příkladu, JSX nám umožňuje psát HTML přímo v kódu JavaScript.

JSX je rozšíření jazyka JavaScript založené na ES6 a je za běhu přeloženo do běžného JavaScriptu.


w3schools CERTIFIED . 2022

Získejte certifikaci!

Dokončete moduly React, proveďte cvičení, udělejte zkoušku a získejte certifikaci w3schools!!

95 $ PŘIHLÁSIT SE

Výrazy v JSX

S JSX můžete psát výrazy do složených závorek { }.

Výraz může být proměnná React nebo vlastnost nebo jakýkoli jiný platný JavaScriptový výraz. JSX provede výraz a vrátí výsledek:

Příklad

Proveďte výraz 5 + 5:

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


Vložení velkého bloku HTML

Chcete-li psát HTML na více řádků, vložte HTML do závorek:

Příklad

Vytvořte seznam se třemi položkami seznamu:

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


Jeden prvek nejvyšší úrovně

Kód HTML musí být zabalen do JEDNÉHO prvku nejvyšší úrovně.

Pokud tedy chcete psát dva odstavce, musíte je vložit do nadřazeného prvku, jako divprvek.

Příklad

Zabalte dva odstavce do jednoho prvku DIV:

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

JSX vyvolá chybu, pokud HTML není správné nebo pokud HTML chybí nadřazený prvek.

Případně můžete použít "fragment" k zalomení více řádků. Tím zabráníte zbytečnému přidávání dalších uzlů do DOM.

Fragment vypadá jako prázdná HTML značka: <></>.

Příklad

Zabalte dva odstavce do fragmentu:

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


Prvky musí být uzavřeny

JSX se řídí pravidly XML, a proto musí být prvky HTML správně uzavřeny.

Příklad

Zavřete prázdné prvky pomocí/>

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

JSX vyvolá chybu, pokud HTML není správně uzavřeno.


Atribut class = className

Atribut classje velmi používaný atribut v HTML, ale protože JSX se vykresluje jako JavaScript a classklíčové slovo je vyhrazené slovo v JavaScriptu, nemůžete jej používat v JSX.

Místo toho použijte atribut className.

JSX to vyřešil použitím classNamemísto toho. Když je JSX vykreslen, převádí className atributy na classatributy.

Příklad

Použijte atribut classNamenamísto classv JSX:

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


Podmínky - příkazy if

React podporuje ifpříkazy, ale ne uvnitř JSX.

Abyste mohli používat podmíněné příkazy v JSX, měli byste if příkazy umístit mimo JSX, nebo můžete místo toho použít ternární výraz:

Možnost 1:

Napište ifpříkazy mimo kód JSX:

Příklad

Napište „Ahoj“, pokud xje menší než 10, jinak „Sbohem“:

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

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

Možnost 2:

Místo toho použijte ternární výrazy:

Příklad

Napište „Ahoj“, pokud xje menší než 10, jinak „Sbohem“:

const x = 5;

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

Všimněte si , že aby bylo možné vložit JavaScriptový výraz do JSX, musí být JavaScript zabalen do složených závorek, {}.


Otestujte se pomocí cvičení

Cvičení:

Vykreslení prvku <p> bez použití JSX.

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

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