• Home
  • Learn
    • Offline Courses
    • Online Courses
    • Web Development
    • Mobile App Development
    • Software Engineering
    • Graphic Design
    • Soft Skills
  • Blog
  • Events
  • About Us
  • Contact
KlassroomKlassroom
  • Home
  • Learn
    • Offline Courses
    • Online Courses
    • Web Development
    • Mobile App Development
    • Software Engineering
    • Graphic Design
    • Soft Skills
  • Blog
  • Events
  • About Us
  • Contact
    • RegisterLogin

ওয়েব ডেভেলপমেন্ট

  • Home
  • Blog
  • ওয়েব ডেভেলপমেন্ট
  • রিঅ্যাক্ট ব্যাসিকসঃ জেএসএক্স(JSX) পরিচিতি

রিঅ্যাক্ট ব্যাসিকসঃ জেএসএক্স(JSX) পরিচিতি

  • Posted by zonayedpca
  • Categories ওয়েব ডেভেলপমেন্ট, জাভাস্ক্রিপ্ট, ফ্রন্টএন্ড ডেভেলপমেন্ট
  • Date August 8, 2018
  • Comments 0 comment

রিঅ্যাক্ট নিয়ে কাজ শুরু করার আগে একটা গুরুত্বপূর্ণ কিন্তু অপশনাল টপিক নিয়ে আজকে আলোচনা করবো। অপশনাল মানে এই না যে আপনি এটা স্কিপ করতে পারবেন। বরং আমার পরের লেখা সবগুলোই এটার উপর ডিপেন্ডেড। তাই এটা আপনার জন্যেও গুরুত্বপূর্ণ। আমরা আজকে জেএসএক্স (JSX) সিনট্যাক্স নিয়ে আলোচনা করবো।

রিঅ্যাক্ট এর প্রোজেক্ট এ আপনি এই টাইপ এর কোড অহরহ দেখবেনঃ

XHTML
1
<h1>Hello World!</h1>

এটাকেই আসলে জেএসএক্স বলে। জেএসএক্স সিনট্যাক্স দেখতে অনেকটা এইচটিএমএল ( HTML) এর মতো। কিন্তু এটা এইচটিএমএলও না আবার জাভস্ক্রিপ্ট এর স্ট্রিংও না। বরং এটা জাভাস্ক্রিপ্ট এরই সিনট্যাক্স এক্সটেনশন। এটাকে অ্যাড করা হয়েছে ডেভেলপারদের সুবিধার জন্যে।

আমরা ব্যাবেল এর অনলাইন কম্পাইলার ইউজ করে জেএসএক্স কে ভিতর থেকে দেখবো। প্রথমে এই লিঙ্কে গিয়ে আমরা উপরের জেএসএক্স কোডটা বাম দিকে পেস্ট করবো। এবার ডানদিকে লক্ষ্য করুন, এটা হচ্ছে আসলে জেএসএক্স এর পূর্ণ ভার্শনঃ

দেখুন একটা নরমাল এইচটিএমএল কোড এর মতো দেখতে কোড কতো কমপ্লেক্স দেখা যাচ্ছে। আপনি এই কমপ্লেক্স ভার্শনও ইউজ করতে পারবেন আপনার রিঅ্যাক্ট অ্যাপ এ। কিন্তু এতো সাজানো গোছানো সিনট্যাক্স থাকতে এতো কমপ্লেক্স সিনট্যাক্স কে ইউজ করবে বলেন? আর তাই জেএসএক্স ইউজ করাটাই বুদ্ধিমানের কাজ।

এখন জেএসএক্স এর মেইন কাজ হচ্ছে রিঅ্যাক্ট এর ইলিমেন্ট তৈরি করা যেটা আমরা পরের পর্বে ইউজ করা শুরু করবো। তাছাড়া জেএসএক্স এইচটিএমএলের মতো হলেও এটার বেশ ভলো কিছু ফাংশানালিটি আছে। যেমন আমরা চাইলে জেএসএক্স এর ভিতরে জাভাস্ক্রিপ্ট এর ভ্যারিয়েবলও ইন্সার্ট করতে পারিঃ

JavaScript
1
2
3
4
5
6
import React from "react";
import ReactDOM from "react-dom";
 
const variable = "Zonayed Ahmed";
 
ReactDOM.render(<h1>My Name is <strong class="markup--strong markup--pre-strong">{variable}</strong></h1>,document.getElementById("root"));

এখনি আপনাকে জানতে হবে না এই কোড কিভাবে কাজ করছে, শুধু এটুকু জানুন এভাবে জেএসএক্স এ ভ্যারিয়েবল নিয়েও কাজ করা যায়। একইরকম ভাবে ফাংশনও কল করতে পারবেনঃ

JavaScript
1
2
3
4
5
6
7
8
import React from "react";
import ReactDOM from "react-dom";
 
<strong class="markup--strong markup--pre-strong">const aFunc = () => {
</strong><strong class="markup--strong markup--pre-strong"> return "Zonayed Ahmed";
</strong><strong class="markup--strong markup--pre-strong">};
 
</strong>ReactDOM.render(<h1>My Name is {<strong class="markup--strong markup--pre-strong">aFunc()</strong>}</h1>, document.getElementById("root"));

1
 

আসলে এভাবে যেকোনো জাভাস্ক্রিপ্ট এক্সপ্রেশনকে লিখতে পারবেন জেএসএক্স এর ভিতরেঃ

JavaScript
1
2
3
4
import React from "react";
import ReactDOM from "react-dom";
 
ReactDOM.render(<h1>My Name is {true ? 'Zonayed Ahmed' : 'Ahmed Zonayed'}</h1>, document.getElementById("root"));

জেএসএক্স এ আপনি এইচটিএমএলের মতো করে এভাবে অ্যাট্রিবিউটও নিতে পারবেন। অ্যাট্রিবিউট দিয়ে রিঅ্যাক্ট এ অন্যরকমের কাজ করা হয় যেগুলো আমরা আস্তে আস্তে দেখবো। তবে এপনি এভাবে অ্যাট্রিবিউটও নিতে পারবেনঃ

XHTML
1
<h1 anyName="anyvalue">Hello World!</h1>

এখন জেএসএক্স কে একটা ভ্যারিয়েবলের ভিতরেও ঢুকিয়ে রাখতে পারবেন এবং পরবর্তিতে আপনি যেখানে ইচ্ছা এই ভ্যারিয়েবলকে কল করে জেএসএক্সটাকে কাজে লাগাতে পারবেনঃ

JavaScript
1
const jsxVar = <h1>Hello World!</h1>;

একটা জেএসএক্স ভিতরে আরো অনেকগুলো জেএসএক্স চাইল্ড ইলিমেন্টও থাকতে পারবেঃ

JavaScript
1
<h1> Hello World! How are <span>you?</span> <span>My age is 21 years old!</span> </h1>

এটা ঠিক এইচটিএমএল এর মতোই। শেষের ট্যাগ এ আপনার ক্লোজিং ব্র‍্যাকেট দিতে হবে।

সেইমভাবে আপনি মাত্র একটা জেএসএক্স ইলিমেন্টকেই ভ্যারিয়েবল এ স্টোর করতে পারবেন। এখন সেই ইলিমেন্ট এর ভিতরে যত ইচ্ছা চাইল্ড থাকতে পারবে। কিন্তু পুরোটা একটা ইলিমেন্টই হবেঃ

সঠিকঃ

XHTML
1
<div> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> </div>

ভুলঃ

XHTML
1
<h1>Hello CodeSandbox</h1> <div> <h2>Start editing to see some magic happen!</h2> </div>

সেইমভাবে কোনো জেএসএক্স ইলিমেন্ট রিটার্ণ করতে চাইলে মাত্র একটা প্যারেন্ট ইলিমেন্টই রিটার্ণ করতে পারবেন। চাইল্ড যতোই থাকুক সমস্যা নাইঃ

JavaScript
1
2
3
4
5
6
...
return (<div>
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>);
...

জেএসএক্স এইচটিএমএল এর মতো দেখা গেলেও এখানে আরো কিছু ট্রিক্স আছে। যদি আপনার জেএসএক্স এর কোনো চাইল্ড ইলিমেন্ট বা ভিতরে কিছু না থাকে তাহলে সেল্ফ ক্লোজিং ট্যাগ ইউজ করতে হবে। এটা এবার যে ট্যাগই হউক, h1, h6 বা p সব ট্যাগেই সেল্ফ ক্লোজিং ট্যাগ ইউজ করা যাবেঃ

JavaScript
1
2
3
<img src="..." />
<h1 />
<p />

আমরা ব্যাবেলে জেএসএক্স দেখার পর এমনকিছু দেখেছিলামঃ

JavaScript
1
React.createElement( "h1", null, "Hello World!" );

এখানে React.createElement পিছনে একটা অবজেক্ট তৈরি করে ঠিক এভাবেঃ

JavaScript
1
2
3
4
5
6
7
const element = {
  type: 'h1',
  props: {
    className: null,
    children: 'Hello, world!'
  }
};

 

এখান থেকেই পরিষ্কারভাবে দেখা যাচ্ছে এটাও একটা অব্জেক্ট।

আশা করি জেএসএক্স নিয়ে কাজ করার জন্যে এখন আপনি প্রস্তুত। এখানে কিছু না বুঝলেও পরে আবার রিভিও করবেন এখানে এসে তাহলে ধরতে পারবেন কোনটা কি আর কেনোই বা এমনভাবে ইউজ করা হয়েছে।


আমার এই লেখা পূর্বে আমার ব্লগে প্রকাশিত হয়েছে। চাইলে আমার ব্লগ থেকে ঘুরে আসতে পারেন। ব্লগ থেকে সাবস্ক্রাইব করলে আমি নিজে থেকেই আমার নতুন লেখাগুলো আপনার ইমেইলে প্রতি শুক্রবার সকালে পাঠিয়ে দিবো। ভালো থাকবেন। হ্যাপী প্রোগ্রামিং!

Tag:react-bangla, react-js, react-jsx, reactjs

  • Share:
author avatar
zonayedpca
    Passionate Programmer — ❤ JavaScript — Skill is My Weapon, Perfection is My Habit

    Previous post

    রিঅ্যাক্ট ব্যাসিকসঃ প্রোজেক্ট সেটআপ
    August 8, 2018

    Next post

    পিএইচপি(PHP) নিয়ে যত কথা। পর্ব — ৭ [ পিএইচপি String ডেটা-টাইপ]
    August 12, 2018

    You may also like

    php-thumb-3
    পিএইচপি(PHP) নিয়ে যত কথা। পর্ব — ৮ [ পিএইচপি অপারেটর ]
    25 September, 2018
    javascript
    জাভাস্ক্রিপ্টে primitive এবং reference টাইপ ডাটার মাঝে পার্থক্য
    28 August, 2018
    php-thumb-3
    পিএইচপি(PHP) নিয়ে যত কথা। পর্ব — ৭ [ পিএইচপি String ডেটা-টাইপ]
    12 August, 2018

    Leave A Reply Cancel reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    ব্লগ

    • এন্ড্রয়েড (1)
    • ওয়েব ডেভেলপমেন্ট (27)
    • গাল্প (Gulp) (1)
    • জাভাস্ক্রিপ্ট (18)
    • পিএইচপি (8)
    • ফ্রন্টএন্ড ডেভেলপমেন্ট (9)
    • ব্যাকএন্ড ডেভেলপমেন্ট (9)
    • মার্কআপ ল্যাঙ্গুয়েজ (1)
    • মোবাইল অ্যাপ ডেভেলপমেন্ট (1)

    Featured Courses

    Demystifying Linux (লিনাক্স ও শেল স্ক্রিপ্টিং হাতেখড়ি)

    Demystifying Linux (লিনাক্স ও শেল স্ক্রিপ্টিং হাতেখড়ি)

    ৳ 2,500.00
    Learn More

    Copyright © Lets Learn Coding Ltd. 2018

    Login with your site account

    Lost your password?

    Not a member yet? Register now

    Register a new account

    Are you a member? Login now