Writting Mark Up with JSX

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

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

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

এটি বোঝার সর্বোত্তম উপায় হল- কিছু HTML মার্কআপকে JSX মার্কআপে রূপান্তর করা

JSX and React are two separate things. They’re often used together, but you can use them independently of each other. JSX is a syntax extension, while React is a JavaScript library.

Most of the time, React’s on-screen error messages will help you find where the problem is. Give them a read if you get stuck!

JSX লেখার নিয়ম

1. Return a single root element

অনেকগুলো ইলিমেন্ট রিটার্ন করতে চাইলে অবশ্যই সেই ইলিমেন্টগুলো অবশ্যই একটি প্যারেন্ট ট্যাগের ভিতরে রাখতে হবে। For example, you can use a <div>। তবে আপনি যদি ডম এ অতিরিক্ত <div> ট্যাগ যোগ করতে না চান, তাহলে আপনি এবং লিখতে পারেন, যাকে বলে React Fragment।

2. Close all the tags

JSX এ সকল ট্যাগগুলো অবশ্যই ক্লোজিং এংগেল ব্রাকেট দিয়ে ক্লোজ করতে হবে। যেমন- html <img> এর মতো স্ব-বন্ধ ট্যাগগুলিকে <img />. এবং <li>orange এইভাবে লিখতে হবে <li>orange</li>

3. camelCase all most of the things!

JSX জাভাস্ক্রিপ্ট এ কনভার্ট হয়। তাই জাভাস্ক্রিপ্ট এর রিজার্ভ করা ওয়ার্ড আমরা ব্যবহার করতে পারবো না। তাই class এর পরিবর্তে className এবং stroke-width এর পরিবর্তে strokeWidth। কারণ- জাভাস্ক্রিপ্ট ভেরিয়েবল নেম কখনো হাইফেন হতে পারে না।

Why do multiple JSX tags need to be wrapped?

JSX দেখতে HTML-এর মতো হলেও, ভেতরে ভেতরে এটি plain JavaScript অবজেক্টে রূপান্তরিত হয়। কোনো ফাংশন থেকে দুটি অবজেক্টকে রিটার্ন করা যায় না। তা যদি অ্যারেতে রাফিং করা না হয়। একই কারণে, অন্য কোনো ট্যাগ বা ফ্র্যাগমেন্টে না রাফ করে-- একাধিক JSX ট্যাগও রিটার্ন করা যায় না।