React এ কিভাবে jsx ব্যবহার করে Markup তৈরী করা যায়

javaScript file এ html এর মত করে markup তৈরী করতে jsx ব্যবহার করা হয়। jsx হলো syntax extension. যদিও component তৈরী করার জন্য আরো বিভিন্ন পদ্ধতি আছে, কিন্তু অধিকাংশ developer ‘jsx’ prefer করে এবং অধিকাংশ codebase এটা ব্যবহার করে।

সূচিপত্রঃ  React এ কিভাবে jsx ব্যবহার করে Markup তৈরী করা যায়

• ১. React এ logic এবং markup একসাথে কেন ব্যবহার হয়
• ২. Html ও jsx এর পার্থক্য
• ৩. jsx দিয়ে কিভাবে data শো করানো হয়

React এ logic(javaScript) এবং markup(Html) একসাথে ব্যবহারঃ

আরো পড়ুনঃ How To Create React Component

আমরা জানি, Html, Css & javaScript দিয়ে web গঠিত। web developer রা Html দিয়ে content structure, ’css’ দিয়ে design এবং javaScript দিয়ে logical কাজ করে। এক্ষেত্রে Html, css এবং javaScript ফাইলগুলো আলাদা আলাদা থাকে।

যেহেতু web এ interactivity বাড়ছে এবং logic এর উপর ভিত্তি করে ’content’ show/hide হচ্ছে, তাই React একই file এ rendaring logic ও markup একসাথে রেখেছে। যেমনঃ 

function Sidebar(){

if(isLoggedIn)

{

<h3>Welcome</h3>

}else{

<Form/>

}

}

Form(){

onClick(){...}

onSubmit(){...}

<form onSubmit>

<input onClick/>

<input onClick/>

</form>

}

React এর প্রত্যেকটা component হলো javaScript এর ফাংশন, যার মধ্যে কিছু markup থাকে এবং react সেগুলো browser এ রেন্ডার করে। react component ’jsx’ syntax ব্যবহার করে jsx markup কে represent করে। jsx, Html এর মতই, তবে এতে কিছু rules রয়েছে।

Converting Html to jsx

এটা হলো একটি valid Html

<h1>Heading</h1>

<p>Paragraph</p>

React component দেখতে এরকম 

export default function Test(){

return(

code goes here....

)

}

এখন আপনি যদি Html markup টা কপি করে এই component এর মধ্যে paste করেন, এটা কিন্তু কাজ করবেনা। 

App.jsx:

export default function Test(){

return(

<h1>Heading</h1>

<p>Paragraph</p>

)

}

Component এর মধ্যে এই valid Html code কাজ করেনি, কারণ এটা component এর মধ্যে লেখা হয়েছে, যে কারণে এটাকে jsx বলে। আর jsx এর কিছু rules রয়েছে। rules মেনে লিখলে কাজ করবে।

আরো পড়ুনঃ Tailwind and React Install

Jsx Rules

1. Return a single root element

Component থেকে multiple element return করতে হলে এটাকে একটা single parent tag দিয়ে wrap করতে হবে। এক্ষেত্রে <div></div> অথবা<>,</>(fragement) ব্যবহার করতে পারেন। <div></div> ব্যবহার করলে DOM tree তে  trace তৈরী হয়, আর fragement(<></>) এটা দিলে Html browser tree trace তৈরী করেনা।

App.jsx

<div></div> দিয়ে এভাবে হবে

export default function Test(){

return(

<div>

<h1>Heading</h1>

<p>Para</p>

</div>

)

}

App.jsx: <></> Fragement 

export default function Test(){

return(

<>

<h1>Heading</h1>

</>

)

}

2. Close all the tags:

Html এ আপনি tag এর closing না করলেও browser এ কাজ করে, কিন্তু jsx এ অবশ্যই tag close করতে হবে। যেমনঃ

<ul>

<li>List One</li>

</ul>

<img src=" " alt=" "/>

3. camelCase এর ব্যবহারঃ

jsx এ reserve word ব্যবহার করা যায় না এবং Html ও svg attribute camelCase এ লিখতে হয়। যেমনঃ  strok-width কে এভাবে (-) দিয়ে লেখা যাবে না, লিখতে হবে (strokWidth), "class" reserved word হওয়ায় "className" লিখতে হবে।