const helloWorld = <h1>Hello, World!</h1>;

function Hello() {  return <h1>Hello, World!</h1>}

function Hello() {  return React.createElement("h1", {}, "Hello, World!")}

// Example 1: Using JSX syntaxfunction Nav() {  return (    <ul>      <li>Home</li>      <li>About</li>      <li>Portfolio</li>      <li>Contact</li>    </ul>  );}

// Example 2: Not using JSX syntaxfunction Nav() {  return (    React.createElement(      "ul",      {},      React.createElement("li", null, "Home"),      React.createElement("li", null, "About"),      React.createElement("li", null, "Portfolio"),      React.createElement("li", null, "Contact")    )  );}

// 1. HTML elementReact.createElement("div", null, "Some content text here")

// 2. React elementReact.createElement(Div, null, "Some content text here")

este nedefinit.

Accesorii în JSX

Când lucrați în React, componentele dvs. redează adesea copiii și trebuie să le transmită date pentru ca aceștia să redea corect. Acestea se numesc recuzită.

Îmi place să mă gândesc la componentele React ca la un grup de prieteni. Și ce fac prietenii? ei dați-vă reciproc recuzită. Din fericire, JSX ne oferă o serie de modalități de a face acest lucru.

// 1. Props defaulted to true<User loggedIn />

// 2. String literals<User name="Jon Johnson" />

// 3. JavaScript expressions<User balance={5 + 5 + 10} />

// 4. Spread attributes<User preferences={...this.state} />

Dar atenție! Nu puteți trece dacă declarațiile sau buclele sunt recuzite, deoarece acestea sunt afirmații, nu expresii.

Copii în JSX

Pe măsură ce creați aplicația, în cele din urmă începeți să aveți componente care redau copii. Și apoi aceste componente trebuie uneori să redea copiii. Și așa mai departe și așa mai departe.

Întrucât JSX este menit să ne faciliteze raționamentul despre structurile de elemente asemănătoare copacilor, toate acestea sunt foarte ușoare. Practic, orice elemente o componentă returnează devin copiii săi.

Există patru moduri de a reda elementele copil folosind JSX:

Siruri de caractere

Acesta este cel mai simplu exemplu de copii JSX. În cazul de mai jos, React creează un <h1> Element HTML cu un singur copil. Cu toate acestea, copilul nu este un alt element HTML, ci doar un simplu șir.

function AlertBanner() {  return (    <h1>Your bill is due in 2 days</h1>  )}

Elemente JSX

Acesta este probabil cazul de utilizare cu care ar fi cei mai familiarizați noii dezvoltatori React. În componenta de mai jos, returnăm un copil HTML ( <header>), care are doi copiis own &Lt; Nav /> and &lt; ProfilePic /> ambele elemente JSX definite personalizat.

function Header(props) {  return (    <header>      <Nav />      <ProfilePic />    </header>  )}

Expresii

Expresiile ne permit să redăm cu ușurință elemente din interfața noastră de utilizare care sunt rezultatul unui calcul JavaScript. Un exemplu simplu în acest sens ar fi adăugarea de bază.

Să presupunem că avem o componentă numită <BillFooter /> care redă informații despre o factură sau o chitanță. Să presupunem că este nevoie de un prop. Called total care reprezintă costul înainte de impozitare și altul prop taxRate, care reprezintă rata de impozitare aplicabilă.

Folosind expresii, putem reda cu ușurință câteva informații utile pentru utilizatorii noștri!

function BillFooter(props) {  return (    <div>      <h5>Tax: {props.total * props.taxRate}</h5>      <h5>Total: {props.total + props.total * props.taxRate}</h5>    </div>  );}

Funcții

Cu funcții, putem crea programatic elemente și structuri, pe care React le va reda apoi pentru noi. Acest lucru facilitează crearea mai multor instanțe ale unei componente sau redarea elementelor UI repetate.

Ca exemplu, să folosim JavaScript .map() funcție pentru a crea o bară de navigare.

// Array of page informationconst pages = [  {    id: 1,    text: "Home",    link: "/"  },  {    id: 2,    text: "Portfolio",    link: "/portfolio"  },  {    id: 3,    text: "Contact",    link: "/contact"  }];// Renders a <ul> with programmatically created <li> childrenfunction Nav() {  return (    <ul>      {pages.map(page => {        return (          <li key={page.id}>            <a href={page.link}>{page.text}</a>          </li>        );      })}    </ul>  );}

Acum, dacă dorim să adăugăm o pagină nouă pe site-ul nostru, tot ce trebuie să facem este să adăugăm un nou obiect la pages array și React se vor ocupa de restul!

Ia act de key recuzită. Funcția noastră returnează o serie de elemente frați, în acest caz <li> s, iar React are nevoie de o modalitate de a ține evidența monturilor, demontărilor sau actualizărilor. Pentru a face acest lucru, se bazează pe acest identificator unic pentru fiecare element.

Folosiți instrumentele!

Sigur, puteți scrie aplicații React fără JSX, dar nu sunt foarte sigur de ce ați dori.

Abilitatea pe care JSX ne-o oferă de a trece prin elemente în JavaScript de parcă ar fi un cetățean de primă clasă, se pretează bine să lucreze cu restul ecosistemului React. Atât de bine, de fapt, este posibil să fi scris-o în fiecare zi și nici măcar să nu o știi.

Linia de fund: folosiți doar JSX. Vei fi fericit că ai făcut-o.