de Ryan Harris

Ce naiba este JSX și de ce ar trebui să-l folosiți pentru a vă crea aplicațiile React

Ce naiba este JSX si de ce ar trebui sa l
Sursa imaginii NESA de către Makers

În calitate de dezvoltatori, folosim o varietate de instrumente și pachete open source pentru a ne ușura munca. Unele dintre ele sunt atât de utilizate în întreaga comunitate încât par native din JavaScript. Dar nu sunt și pot schimbați fundamental modul în care scrieți codul zilnic.

Una dintre aceste tehnologii pe care probabil o utilizați deja este JSX – o extensie de sintaxă de tip XML, pentru JavaScript. Creat de echipa de pe Facebook, este destinat să simplifice experiența dezvoltatorului. După cum spune specificația, rațiunea pentru crearea JSX a fost:

„… Să definim o sintaxă concisă și familiară pentru definirea structurilor de arbori cu atribute.” ~ Spec. JSX

Acum, probabil că îți spui: „Hei, Ryan, sună grozav, dar accesează deja codul”, Deci iată primul nostru exemplu.

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

Si asta e!

Fragmentul de cod de mai sus pare familiar, dar v-ați oprit vreodată să vă gândiți la puterea lui? JSX o face astfel încât să putem treceți în jurul structurilor copacilor compuse din elemente HTML sau React de parcă ar fi valori JavaScript standard.

Deși nu trebuie să utilizați JSX atunci când scrieți React (sau folosiți React pentru a încerca JSX), nu se poate nega că este o parte importantă a ecosistemului React, așa că hai să ne scufundăm și să vedem ce se întâmplă sub capotă.

Noțiuni introductive despre JSX

Primul lucru pe care trebuie să-l rețineți atunci când utilizați sintaxa JSX este că React trebuie să fie în domeniul de aplicare. Acest lucru se datorează modului în care este compilat. Luați această componentă de exemplu:

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

În culise, fiecare element redat de Hello componenta este transpusă într-un React.createElement apel.

În acest caz:

function Hello() {  return React.createElement("h1", {}, "Hello, World!")}
1612128307 775 Ce naiba este JSX si de ce ar trebui sa l
Sursa imaginii rawpixel

Același lucru este valabil și pentru elementele imbricate. Cele două exemple de mai jos ar reda în cele din urmă același marcaj.

// 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")    )  );}

React.createElement

Când React creează elemente, apelează această metodă, care ia trei argumente.

  1. Numele elementului
  2. Un obiect care reprezintă recuzita elementului
  3. O serie de copii ai elementului

Un lucru de remarcat aici este că React interpretează elementele minuscule ca elemente HTML și Pascal (de exemplu, ThisIsPascalCase) ca componente personalizate. Din această cauză, următoarele exemple ar fi interpretate diferit.

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

Primul exemplu ar genera un <div> cu string "Some content text aici “ca copil. Cu toate acestea, a doua versiune ar genera o eroare (cu excepția cazului în care, desigur, un comp. personalizatonent &Lt; Div /> a fost în scope) because

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.

1612128307 998 Ce naiba este JSX si de ce ar trebui sa l
Sursa imaginii Kevin Ku

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!

1612128307 85 Ce naiba este JSX si de ce ar trebui sa l
Sursa imaginii Imagini de hambar

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.

#naiba #este #JSX #și #trebui #săl #folosiți #pentru #vă #crea #aplicațiile #React

Ce naiba este JSX și de ce ar trebui să-l folosiți pentru a vă crea aplicațiile React