Reageer JSX

Wat is JSX?

JSX staan ​​vir JavaScript XML.

JSX stel ons in staat om HTML in React te skryf.

JSX maak dit makliker om HTML in React te skryf en by te voeg.

Kodering JSX

JSX stel ons in staat om HTML-elemente in JavaScript te skryf en dit in die DOM te plaas sonder enige createElement()  en/of appendChild()metodes.

JSX omskep HTML-etikette in reageer-elemente.

Hier is twee voorbeelde. Die eerste gebruik JSX en die tweede 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'));

Soos u in die eerste voorbeeld kan sien, stel JSX ons in staat om HTML direk binne die JavaScript-kode te skryf.

JSX is 'n uitbreiding van die JavaScript-taal wat op ES6 gebaseer is, en word tydens looptyd in gewone JavaScript vertaal.

Uitdrukkings in JSX

Met JSX kan jy uitdrukkings binne krullerige hakies skryf { }.

Die uitdrukking kan 'n React-veranderlike, of -eienskap, of enige ander geldige JavaScript-uitdrukking wees. JSX sal die uitdrukking uitvoer en die resultaat terugstuur:

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

Voeg 'n groot blok HTML in

Om HTML op veelvuldige reëls te skryf, plaas die HTML binne hakies:

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

Een Topvlak Element

Die HTML-kode moet in EEN boonste vlak element toegedraai word.

So as jy daarvan hou om twee paragrawe te skryf, moet jy dit binne 'n ouerelement plaas, soos 'n divelement.

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

Alternatiewelik kan jy 'n "fragment" gebruik om veelvuldige reëls te draai. Dit sal verhoed dat onnodig ekstra nodusse by die DOM gevoeg word.

'n Fragment lyk soos 'n leë HTML-merker: <></>.

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

Elemente moet gesluit wees

JSX volg XML-reëls, en daarom moet HTML-elemente behoorlik gesluit wees.

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

Attribuut klas = klasNaam

Die classkenmerk is 'n veelgebruikte kenmerk in HTML, maar aangesien JSX as JavaScript weergegee word, en die classsleutelwoord 'n gereserveerde woord in JavaScript is, word jy nie toegelaat om dit in JSX te gebruik nie.

JSX het dit opgelos deur in classNameplaas daarvan te gebruik. Wanneer JSX gelewer word, vertaal dit className eienskappe in classeienskappe.

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

Voorwaardes - indien stellings

React ondersteun ifstellings, maar nie binne JSX nie.

Om voorwaardelike stellings in JSX te kan gebruik, moet jy die if stellings buite die JSX plaas, of jy kan eerder 'n drieledige uitdrukking gebruik:

Opsie 1:

Skryf ifstellings buite die JSX-kode:

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

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

Opsie 2:

Gebruik eerder drieledige uitdrukkings:

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