JSX দিয়ে মার্কআপ লেখা

JSX হল JavaScript-এর জন্য একটি সিনট্যাক্স এক্সটেনশন যা আপনাকে জাভাস্ক্রিপ্ট ফাইলের ভিতরে HTML-এর মতো মার্কআপ লিখতে দেয়। যদিও কম্পোনেন্টগুলো লেখার অন্যান্য উপায় রয়েছে, বেশিরভাগ ডেভেলপার JSX এর সংক্ষিপ্ততা পছন্দ করে এবং বেশিরভাগ কোডবেস এটি ব্যবহার করে।

যা যা আপনি শিখবেন

React কেন রেন্ডারিং লজিকের সাথে মার্কআপকে মিশ্রিত করে
JSX কিভাবে HTML থেকে আলাদা
কিভাবে JSX এর সাথে তথ্য প্রদর্শন করবেন

JSX: জাভাস্ক্রিপ্টে মার্কআপ করা

ওয়েব HTML, CSS এবং জাভাস্ক্রিপ্টে তৈরি করা হয়েছে। বহু বছর ধরে, ওয়েব ডেভেলপাররা HTML-এ কন্টেন্ট, CSS-এ ডিজাইন এবং জাভাস্ক্রিপ্টে লজিক রাখে—প্রায়ই আলাদা ফাইলে! পেইজের লজিক জাভাস্ক্রিপ্টে আলাদাভাবে থাকলেও বিষয়বস্তু HTML-এর মধ্যে চিহ্নিত করা হত:

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. — জাভাস্ক্রিপ্ট

কিন্তু ওয়েব যত বেশি ইন্টারেক্টিভ হয়ে ওঠে, কনটেন্ট কী হবে সেটার দায়ভার ক্রমশ লজিকের উপর পড়তে শুরু করল। HTML এর দায়িত্বে ছিল জাভাস্ক্রিপ্ট! এই কারণেই React-এ, রেন্ডারিং লজিক এবং মার্কআপ একই জায়গায় একসাথে থাকে—কম্পোনেন্টে।

React component with HTML and JavaScript from previous examples mixed. Function name is Sidebar which calls the function isLoggedIn, highlighted in yellow. Nested inside the function highlighted in purple is the p tag from before, and a Form tag referencing the component shown in the next diagram. — `Sidebar.js` React component

React component with HTML and JavaScript from previous examples mixed. Function name is Form 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, each with an onClick prop. — `Form.js` React component

একটি বাটনের রেন্ডারিং লজিক এবং মার্কআপ একসাথে রাখা নিশ্চিত করে যে তারা প্রতিটি ইডিটে একে অপরের সাথে সিঙ্কে থাকে। বিপরীতভাবে, বিশদ বিবরণ যা সম্পর্কহীন, যেমন বাটনের মার্কআপ এবং একটি সাইডবারের মার্কআপ, একে অপরের থেকে বিচ্ছিন্ন হয়ে যায়, যার ফলে তাদের যেকোনো একটিকে নিজেরাই পরিবর্তন করা নিরাপদ করে তোলে।

প্রতিটি React কম্পোনেন্ট একটি জাভাস্ক্রিপ্ট ফাংশন যাতে কিছু মার্কআপ থাকতে পারে যা React ব্রাউজারে রেন্ডার করে। React কম্পোনেন্টগুলি সেই মার্কআপটি উপস্থাপন করতে JSX নামক একটি সিনট্যাক্স এক্সটেনশন ব্যবহার করে। JSX দেখতে অনেকটা HTML এর মত, কিন্তু এটি একটু জটিল এবং ডাইন্যামিক তথ্য প্রদর্শন করতে পারে। এটি বোঝার সর্বোত্তম উপায় হল কিছু HTML মার্কআপকে JSX মার্কআপে রূপান্তর করা।

খেয়াল করুন

JSX এবং React দুটি পৃথক জিনিস। এগুলি প্রায়শই একসাথে ব্যবহার করা হয়, তবে আপনি একে অপরের থেকে স্বাধীনভাবে ব্যবহার করতে পারেন । JSX হল একটি সিনট্যাক্স এক্সটেনশন, যখন React হল একটি JavaScript লাইব্রেরি।

HTML কে JSX এ রূপান্তর

ধরুন আপনার কিছু (ভ্যালিড) 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>

এবং আপনি এটি আপনার কম্পোনেন্টে রাখতে চান:

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

আপনি যদি এটিকে কপি এবং পেস্ট করেন তবে এটি কাজ করবে না:

ফর্ক

export default function TodoList() {
  return (
    // This doesn't quite 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 থেকে আরও কিছু নিয়ম রয়েছে! আপনি যদি উপরের error messages পড়ে থাকেন, তাহলে তারা আপনাকে মার্কআপ ঠিক করার জন্য গাইড করবে, অথবা আপনি নীচের নির্দেশিকা অনুসরণ করতে পারেন।

খেয়াল করুন

বেশিরভাগ সময়, React-এর অন-স্ক্রিন error messages আপনাকে সমস্যাটি কোথায় তা খুঁজে পেতে সহায়তা করবে। আপনি আটকে গেলে এগুলো ভালভাবে পড়ে নিতে পারেন!

JSX এর নিয়মাবলী

1. Return a single root element

একটি কম্পোনেন্ট থেকে একাধিক ইলিমেন্ট রিটার্ন করতে,একটি একক অভিভাবক ট্যাগ দিয়ে তাদের 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>

আপনি যদি আপনার মার্কআপে অতিরিক্ত <div> যোগ করতে না চান, তাহলে আপনি এর পরিবর্তে <> এবং </> লিখতে পারেন:

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

এই খালি ট্যাগটিকে ফ্র্যাগমেন্ট বলা হয়। ফ্র্যাগমেন্ট আপনাকে ব্রাউজার HTML ট্রিতে কোনো চিহ্ন না রেখে জিনিসগুলিকে গোষ্ঠীবদ্ধ করতে দেয়।

গভীরভাবে জানুন

কেন একাধিক JSX ট্যাগ মোড়ানো প্রয়োজন?

JSX দেখতে HTML এর মতো, কিন্তু আসলে এটি প্লেইন জাভাস্ক্রিপ্ট অবজেক্টে রূপান্তরিত হয়। আপনি একটি অ্যারের মধ্যে wrap করা ছাড়া একটি ফাংশন থেকে দুটি অবজেক্ট ফেরত দিতে পারবেন না। এটি ব্যাখ্যা করে যে আপনি কেন দুটি JSX ট্যাগকে অন্য ট্যাগ বা একটি ফ্র্যাগমেন্টে মোড়ানো ছাড়াই ফেরত দিতে পারবেন না।

2. সবগুলো ট্যাগ ক্লোজ করুন

JSX-এর জন্য ট্যাগগুলি স্পষ্টভাবে ক্লোজ করতে হবে: <img>-এর মতো নিজে নিজে বন্ধ হওয়া ট্যাগগুলিকে অবশ্যই <img /> হতে হবে, এবং <li>oranges মতো wrap করা ট্যাগগুলিকে <li>oranges</li> হিসাবে লিখতে হবে।

Hedy Lamarr এর ছবি এবং লিস্ট আইটেমগুলি ক্লোজ হলে এমন দেখায়:

<>
  <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. ক্যামেলকেস প্রায় অধিকাংশ জিনিস!

JSX জাভাস্ক্রিপ্টে পরিণত হয় এবং JSX-এ লেখা বৈশিষ্ট্যগুলি জাভাস্ক্রিপ্ট অবজেক্টের কী হয়ে ওঠে। আপনার নিজস্ব কম্পোনেন্টে, আপনি প্রায়শই এই এট্রিবিউটগুলোকে ভেরিয়েবলে রাখবেন। কিন্তু জাভাস্ক্রিপ্টের ভেরিয়েবলের নামের সীমাবদ্ধতা রয়েছে। উদাহরণস্বরূপ, তাদের নামের ড্যাশ থাকতে পারে না বা class-এর মতো সংরক্ষিত শব্দ থাকতে পারে না।

এই কারণেই, React-এ, অনেক HTML এবং SVG অ্যাট্রিবিউট ক্যামেলকেসে লেখা থাকে। উদাহরণস্বরূপ, stroke-width এর পরিবর্তে আপনি strokeWidth ব্যবহার করেন। যেহেতু class একটি সংরক্ষিত শব্দ, তাই React-এ আপনি পরিবর্তে className লিখবেন,সংশ্লিষ্ট DOM প্রপার্টিএর নামানুসারে। ):

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

আপনি DOM কম্পোনেন্ট প্রপসের তালিকায় এই সমস্ত বৈশিষ্ট্যগুলি খুঁজে পেতে পারেন If you get one wrong, don’t worry—React will print a message with a possible correction to the browser console.। আপনি যদি একটিও ভুল বুঝে থাকেন, চিন্তা করবেন না—React ব্রাউজার কনসোলে সম্ভাব্য সংশোধন সহ একটি মেসেজ প্রিন্ট করবে।

সতর্কতা

ঐতিহাসিক কারণে, aria-* এবং data-* অ্যাট্রিবিউটগুলি ড্যাশ সহ HTML এর মতো লেখা হয়।

প্রো-টিপ: JSX কনভার্টার ব্যবহার করুন

বিদ্যমান মার্কআপে এই সমস্ত বৈশিষ্ট্যগুলিকে রূপান্তর করা ক্লান্তিকর হতে পারে! আপনার বিদ্যমান HTML এবং SVG কে JSX-এ অনুবাদ করতে আমরা একটি কনভার্টার ব্যবহার করার পরামর্শ দিই। রূপান্তরকারীগুলি অনুশীলনে খুব দরকারী, তবে কী চলছে তা বোঝার জন্য এটি এখনও জরুরী যেন আপনি স্বাচ্ছন্দ্যে JSX লিখতে পারেন৷

এখানে আপনার চূড়ান্ত ফলাফল:

ফর্ক

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

পুনরালোচনা

এখন আপনি জানেন JSX কেন রয়েছে এবং কীভাবে এটি কম্পনেন্টে ব্যবহার করবেন:

React কম্পোনেন্ট গ্রুপ রেন্ডারিং লজিক মার্কআপের সাথে একসাথে থাকে কারণ তারা সম্পর্কিত।
JSX কিছু পার্থক্য সহ HTML এর অনুরূপ। আপনার প্রয়োজন হলে আপনি একটি কনভার্টার ব্যবহার করতে পারেন।
Error messages প্রায়ই আপনার মার্কআপ ঠিক করার জন্য সঠিক দিক নির্দেশ করবে.

নিজেকে কিছু চ্যালেঞ্জ করে দেখুন

Challenge 1 of 1:
Convert some HTML to JSX

এই HTML একটি কম্পোনেন্টে ব্যবহার করা হয়েছে, কিন্তু এটি সঠিক JSX নয়। ঠিক করুন:

ফর্ক

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

এটা নিজের হাতে করবেন নাকি কনভার্টার ব্যবহার করবেন সেটা আপনার ব্যাপার!

পূর্ববর্তী পেইজImporting and Exporting Components পরবর্তী পেইজJavaScript in JSX with Curly Braces

JSX দিয়ে মার্কআপ লেখা

যা যা আপনি শিখবেন

JSX: জাভাস্ক্রিপ্টে মার্কআপ করা

খেয়াল করুন

HTML কে JSX এ রূপান্তর

খেয়াল করুন

JSX এর নিয়মাবলী

1. Return a single root element

গভীরভাবে জানুন

কেন একাধিক JSX ট্যাগ মোড়ানো প্রয়োজন?

2. সবগুলো ট্যাগ ক্লোজ করুন

3. ক্যামেলকেস প্রায় অধিকাংশ জিনিস!

সতর্কতা

প্রো-টিপ: JSX কনভার্টার ব্যবহার করুন

পুনরালোচনা

নিজেকে কিছু চ্যালেঞ্জ করে দেখুন

Challenge 1 of 1: Convert some HTML to JSX

Challenge 1 of 1:
Convert some HTML to JSX