Reageren JSX

Wat is JSX?

JSX staat voor JavaScript-XML.

Met JSX kunnen we HTML schrijven in React.

JSX maakt het makkelijker om HTML te schrijven en toe te voegen in React.

JSX coderen

JSX stelt ons in staat om HTML-elementen in JavaScript te schrijven en deze in het DOM te plaatsen zonder createElement()  en/of appendChild()methoden.

JSX zet HTML-tags om in react-elementen.

Hier zijn twee voorbeelden. De eerste gebruikt JSX en de tweede niet:

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

Zoals u in het eerste voorbeeld kunt zien, stelt JSX ons in staat HTML rechtstreeks in de JavaScript-code te schrijven.

JSX is een uitbreiding van de JavaScript-taal op basis van ES6 en wordt tijdens runtime vertaald naar normaal JavaScript.

Expressies in JSX

Met JSX kun je uitdrukkingen tussen accolades schrijven { }.

De expressie kan een React-variabele of -eigenschap zijn, of een andere geldige JavaScript-expressie. JSX voert de expressie uit en retourneert het resultaat:

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

Een groot blok HTML invoegen

Om HTML op meerdere regels te schrijven, plaatst u de HTML tussen haakjes:

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

Eén element op het hoogste niveau

De HTML-code moet worden verpakt in EEN element op het hoogste niveau.

Dus als je twee alinea's wilt schrijven , moet je ze in een bovenliggend element plaatsen, zoals een divelement.

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

Als alternatief kunt u een "fragment" gebruiken om meerdere regels in te pakken. Dit voorkomt dat onnodig extra nodes aan de DOM worden toegevoegd.

Een fragment ziet eruit als een lege HTML-tag: <></>.

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

Elementen moeten worden gesloten

JSX volgt XML-regels en daarom moeten HTML-elementen correct worden gesloten.

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

Attribuut klasse = className

Het classattribuut is een veelgebruikt attribuut in HTML, maar aangezien JSX wordt weergegeven als JavaScript en het classtrefwoord een gereserveerd woord is in JavaScript, mag u het niet gebruiken in JSX.

JSX loste dit op door in classNameplaats daarvan te gebruiken. Wanneer JSX wordt weergegeven, worden className attributen omgezet in classattributen.

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

Voorwaarden - if-statements

React ondersteunt ifstatements, maar niet binnen JSX.

Om voorwaardelijke instructies in JSX te kunnen gebruiken, moet u de if instructies buiten de JSX plaatsen, of u kunt in plaats daarvan een ternaire expressie gebruiken:

Optie 1:

Schrijf ifstatements buiten de JSX-code:

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

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

Optie 2:

Gebruik in plaats daarvan ternaire uitdrukkingen:

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