Writing Markup with JSX

JSX સાથે માર્કઅપ લખવું

JSX એ JavaScript માટેનું syntax extension છે જે તમને JavaScript ફાઇલની અંદર HTML-જેવું માર્કઅપ લખવાની મંજૂરી આપે છે. React components લખવાની અન્ય રીતો પણ છે, પરંતુ મોટાભાગના React developers JSX ની સુવિધાને પસંદ કરે છે, અને મોટાભાગના codebases તેનો ઉપયોગ કરે છે.

તમે શીખશો કે:

React શા માટે markup અને rendering logic ને મિક્સ કરે છે
JSX HTML થી કેવી રીતે અલગ છે
JSX સાથે information કેવી રીતે display કરવી

JSX: JavaScript માં markup મૂકવું

Web લાંબા સમયથી HTML, CSS અને JavaScript પર બનાવવામાં આવ્યું છે. વર્ષો સુધી, web developers content ને HTML માં, design ને CSS માં, અને logic ને JavaScript માં—ઘણીવાર અલગ ફાઇલોમાં રાખતા હતા! Content HTML ની અંદર markup કરવામાં આવતું હતું જ્યારે page નું logic JavaScript માં અલગથી રહેતું હતું:

HTML markup with purple background and a div with two child tags: p and form. — HTML

Three JavaScript handlers with yellow background: onSubmit, onLogin, and onClick. — JavaScript

પરંતુ જેમ જેમ Web વધુ interactive બન્યું, તેમ તેમ logic વધુને વધુ content ને નિયંત્રિત કરવા લાગ્યું. JavaScript HTML ના હવાલે હતું! આ કારણથી React માં, rendering logic અને markup એક જ જગ્યાએ રહે છે—components માં.

React component with HTML and JavaScript from previous examples mixed. Function name is Sidebar which calls the function isLoggedIn, highlighted in yellow, followed by conditional logic also highlighted in yellow. Nested inside a div highlighted in purple are the tags from before, replaced by three React components: NavLinks, ChatList, ContactList. — `Sidebar.js` React component

React component with HTML and JavaScript from previous examples mixed. Function name is Form highlighted in yellow containing two handlers onClick and onSubmit highlighted in yellow. Following the handlers is HTML highlighted in purple. The HTML contains a form element with a nested input element, both highlighted in purple. — `Form.js` React component

Button ના rendering logic અને markup ને એકસાથે રાખવાથી તેઓ દરેક edit પર એકબીજા સાથે sync માં રહે છે. ઉલટાનું, વિગતો જે સંબંધિત નથી, જેમ કે button નું markup અને sidebar નું markup, એકબીજાથી isolated હોય છે, જેનાથી કોઈપણને બદલવું વધુ સુરક્ષિત બને છે.

દરેક React component એક JavaScript function છે જેમાં થોડું markup હોઈ શકે છે જે React browser માં render કરે છે. React components એક syntax extension વાપરે છે જેને JSX કહેવાય છે markup represent કરવા માટે. JSX HTML જેવું દેખાય છે, પરંતુ તે થોડું વધુ strict છે અને dynamic information display કરી શકે છે.

આ સમજવાનો શ્રેષ્ઠ રસ્તો એ છે કે HTML markup ને JSX markup માં convert કરવો:

HTML ને JSX માં convert કરવું

ધારો કે તમારી પાસે આ (સંપૂર્ણ valid) HTML છે:

<h1>Hedy Lamarr's Todos</h1>
<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  class="photo"
>
<ul>
    <li>Invent new traffic lights
    <li>Rehearse a movie scene
    <li>Improve the spectrum technology
</ul>

અને તમે તેને તમારા component માં મૂકવા માંગો છો:

export default function TodoList() {
  return (
    // ???
  )
}

જો તમે તેને copy અને paste કરશો, તો તે કામ કરશે નહીં:

Fork

export default function TodoList() {
  return (
    // This doesn't work!
    <h1>Hedy Lamarr's Todos</h1>
    <img 
      src="https://i.imgur.com/yXOvdOSs.jpg" 
      alt="Hedy Lamarr" 
      class="photo"
    >
    <ul>
      <li>Invent new traffic lights
      <li>Rehearse a movie scene
      <li>Improve the spectrum technology
    </ul>

આ કારણે કે JSX HTML કરતાં વધુ strict છે અને તેના થોડા વધુ નિયમો છે! જો તમે ઉપરના error messages વાંચશો, તો તેઓ તમને markup ને fix કરવા માટે guide કરશે, અથવા તમે નીચેની guide ને follow કરી શકો છો.

Note

મોટાભાગે, React ની on-screen error messages તમને સમસ્યા શોધવામાં મદદ કરશે. જો તમે અટવાઈ જાઓ તો તેને વાંચો!

JSX ના નિયમો

1. Single root element return કરો

Component માંથી multiple elements return કરવા માટે, તેમને single parent tag સાથે wrap કરો.

ઉદાહરણ તરીકે, તમે <div> વાપરી શકો છો:

<div>
  <h1>Hedy Lamarr's Todos</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</div>

જો તમે તમારા markup માં extra <div> ઉમેરવા નથી માંગતા, તો તમે <> અને </> લખી શકો છો:

<>
  <h1>Hedy Lamarr's Todos</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</>

આ empty tag ને Fragment કહેવાય છે. Fragments તમને DOM tree માં કોઈ trace છોડ્યા વિના વસ્તુઓને group કરવાની મંજૂરી આપે છે.

Deep Dive

JSX ને single tag ની જરૂર શા માટે છે?

JSX HTML જેવું લાગે છે, પરંતુ તેની અંદર તે plain JavaScript objects માં transform થાય છે. તમે function માંથી બે objects ને array માં wrap કર્યા વિના return કરી શકતા નથી. આ સમજાવે છે કે તમે બે JSX tags ને પણ બીજા tag અથવા Fragment માં wrap કર્યા વિના return કરી શકતા નથી.

2. બધા tags બંધ કરો

JSX માં બધા tags explicitly બંધ કરવાની જરૂર છે: self-closing tags જેમ કે <img> એ <img /> બનવા જોઈએ, અને wrapping tags જેમ કે <li>oranges એ <li>oranges</li> તરીકે લખવા જોઈએ.

આ રીતે Hedy Lamarr નું image અને list items બંધ દેખાય છે:

<>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
   />
  <ul>
    <li>Invent new traffic lights</li>
    <li>Rehearse a movie scene</li>
    <li>Improve the spectrum technology</li>
  </ul>
</>

3. camelCase લગભગ બધું!

JSX JavaScript માં transform થાય છે અને JSX માં લખાયેલા attributes JavaScript objects ની keys બને છે. તમારા પોતાના components માં, તમે ઘણીવાર આ attributes ને variables માં read કરવા માંગશો. પરંતુ JavaScript માં variable names ની limitations છે. ઉદાહરણ તરીકે, તેઓ dashes સમાવી શકતા નથી અથવા class જેવા reserved words હોઈ શકતા નથી.

આ કારણથી, React માં ઘણા HTML અને SVG attributes camelCase માં લખાય છે. ઉદાહરણ તરીકે, stroke-width ને બદલે તમે strokeWidth વાપરો છો. કારણ કે class reserved word છે, React માં તમે તેના બદલે className લખો છો, corresponding DOM property પરથી નામ આપવામાં આવ્યું છે:

<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  className="photo"
/>

તમે આ બધા attributes DOM component props reference માં શોધી શકો છો. જો તમે કોઈ ખોટું કરો છો, તો ચિંતા કરશો નહીં—React browser console માં સુધારાનું સુઝાવ આપે છે.

Pitfall

Historical reasons માટે, aria-* અને data-* attributes HTML માં હોય તેવા dashes સાથે લખાય છે.

Pro-tip: JSX Converter વાપરો

Existing markup માંના આ બધા attributes ને convert કરવું કંટાળાજનક હોઈ શકે છે! અમે existing HTML અને SVG ને JSX માં translate કરવા માટે converter વાપરવાની ભલામણ કરીએ છીએ. Converters practice માં ખૂબ જ ઉપયોગી છે, પરંતુ તમે JSX પર તમારી જાતે comfortably લખી શકો તે માટે શું થઈ રહ્યું છે તે સમજવું હજુ પણ મહત્વપૂર્ણ છે.

આ તમારું અંતિમ પરિણામ છે:

Fork

export default function TodoList() {
  return (
    <>
      <h1>Hedy Lamarr's Todos</h1>
      <img 
        src="https://i.imgur.com/yXOvdOSs.jpg" 
        alt="Hedy Lamarr" 
        className="photo" 
      />
      <ul>
        <li>Invent new traffic lights</li>
        <li>Rehearse a movie scene</li>
        <li>Improve the spectrum technology</li>
      </ul>
    </>
  );
}

Recap

હવે તમે જાણો છો કે JSX શા માટે અસતિત્વ ધરાવે છે અને components માં તેનો ઉપયોગ કેવી રીતે કરવો:

React components rendering logic ને markup સાથે group કરે છે કારણ કે તેઓ related છે.
JSX HTML જેવું છે, પરંતુ થોડા differences સાથે. જરૂર હોય તો તમે converter વાપરી શકો છો.
Error messages ઘણીવાર તમને markup ને fix કરવાની યોગ્ય દિશા આપશે.

Try out some challenges

Challenge 1 of 1:
HTML ને JSX માં convert કરો

આ HTML એક component માં paste કરવામાં આવ્યું હતું, પરંતુ તે valid JSX નથી. તેને fix કરો:

Fork

export default function Bio() {
  return (
    <div class="intro">
      <h1>Welcome to my website!</h1>
    </div>
    <p class="summary">
      You can find my thoughts here.
      <br><br>
      <b>And <i>pictures</b></i> of scientists!
    </p>
  );
}

તમે તેને manually કરવા માંગો છો કે converter વાપરવા માંગો છો તે તમારા પર નિર્ભર છે!

PreviousImporting and Exporting Components

NextJavaScript in JSX with Curly Braces

Writing Markup with JSX

JSX સાથે માર્કઅપ લખવું

JSX: JavaScript માં markup મૂકવું

HTML ને JSX માં convert કરવું

Note

JSX ના નિયમો

1. Single root element return કરો

Deep Dive

JSX ને single tag ની જરૂર શા માટે છે?

2. બધા tags બંધ કરો

3. camelCase લગભગ બધું!

Pitfall

Pro-tip: JSX Converter વાપરો

Recap

Try out some challenges

Challenge 1 of 1: HTML ને JSX માં convert કરો

Challenge 1 of 1:
HTML ને JSX માં convert કરો