How to Create React Component Bangla

আজকের এই সিরিজে আমরা শিখব React এর Component কি, Component কিভাবে তৈরী করতে হয়, কিভাবে Application এ component কাজ করে।

সূচিপত্রঃ How to Create React Component Bangla

• Component কি?
• Application এ Component কিভাবে role play করে
• কিভাবে Component লিখবেন

Component কি?

Component হলো react এর core concept এবং UI building blocks

আমরা HTML দিয়ে Markup এভাবে তৈরী করি, যেমনঃ 

<article>

<h1>react component</h1>

<img src=""/>

<p>Paragraph text</p>

</article>

উপরের HTML দিয়ে তৈরী এরকম structure আমরা react component দিয়েও তৈরী করতে পারি। 

Component এ আমরা css এবং javascript কে একসাথে combine করতে পারি। Component গুলো এবং UI element reuse করতে পারি। 

কিভাবে Component কাজ করে or Defining a componentঃ 

Component হলো javascript এর function, তবে javascript function name ছোট হাতের letter দিয়ে শুরু হয়, কিন্তু যখন react এর component হয় তখন function এর নামের প্রথম অক্ষর বড় হাতের দিয়ে শুরু হয়। যেমনঃ 

function test(){}[এটা হলো normal function]

function Test(){}[এটা হলো Component]

এখন সরাসরি একটি component code লিখছিঃ

export default function Test(){

return (

<img src=" ">

)

}

এখানে দেখুন শুরুতে export default লেখা হয়েছে, কারণ হলো আমরা এই component অন্য পেজে ব্যবহার করব। যখন অন্য পেজে ব্যবহার করব, তখন import করব। আর function এর নামের প্রথম অক্ষর বড় হাতের দিলে react বুজে নিবে এটা তার component.

return এর মধ্যে যে code গুলো লেখা হয়, এগুলোকে jsx syntax বলে। return এর ভিতরের কোডগুলো UI তে output হিসেবে আমরা দেখতে পাই।

How to write component

export default function News(){

return (

<>

<h1>Banglaedesh vs indea</h1>

<img src=" "/>

<p>Details text will be here</p>

</>

)

}

এটা হলো একটা component, এই component এর নাম News, এটার output হবে একটি নিউজ। যেমনঃ একটি শিরোনাম, একটি ছবি এবং নিউজের বিস্তারিত। এই component যেহেতু export করা হয়েছে, তাই এটি অন্য কোন পেজে  import করে ব্যবহার করা যাবে। 

একটা পেজের মধ্যে অনেকগুলো component থাকতে পারে। আবার component গুলো আলাদা file এ থাকতে পারে। এক component এর মধ্যে একাধিক component ব্যবহার করা যায়। যেমনঃ ধরুন, এটি একটি পেজ, এই পেজে তিনটি component একসাথে লিখব। component file এর নামের প্রথম অক্ষর বড় হাতের দিবেন এবং ডট jsx extension হবে। এখন News নামে একটি component তৈরী করব এবং সেটি App.jsx file এ import করে output এ data show করব।

News.jsx: এই component file এ তিনটি component রাখব, তিনটির মধ্যে একটি component কে অবশ্যই export default করতে হবে। যেমনঃ 

export default function News(){

return (

<>

<h1>This is News component</h1>

<Heading/>

<Para/>

</>

)

}

function Heading(){

return <h1>Bangladesh vs Australia match</h1>

}

function Para(){

return <p>Paragraph text will be here</p>

}

এখানে খেয়াল করুন, এখানে ৩টি component রয়েছে, আমরা একটিকে export default করেছি। খেয়াল রাখবেন component এর ভিতরে return এর মধ্যে যা লিখবেন সেগুলো UI তে show করবে। প্রথম component দেখেন return এর ভিতরে একাধিক লাইন থাকায় সেখানে[<></>] fragment ব্যবহার করা হয়েছে। এখানে fragment না দিয়ে আপনি <div></div> ব্যবহার করতে পারেন। কিন্তু ২য় এবং ৩য় component দেখেন, সেখানে মাত্র ১টি লাইন হওয়ায় সরাসরি ঐ লাইনটি return করা হয়েছে। 

আরো পড়ুনঃ Tailwindcss and react install

এখন News.jsx file টি App.jsx file এ import করে browser এ data show করতে হবে। আপনি যত component তৈরী করেন সেগুলো কোন না কোনভাবে App.jsx এ import করে data show করতে হবে। 

App.jsx file দেখতে এরকম হবেঃ App.jsx file এ default যে কোড আছে সেগুলো delete করে দিন। এরপর code গুলো এমন হবেঃ

import News from "./News";

function App(){

return (

<>

<News/>

.... you can use other code

</>

)

}

export default App;

বিঃদ্রঃ return এর ভিতরের কোডগুলোকে jsx বলে। এক component কে যখন অন্য component এ ব্যবহার করবেন তখন অবশ্যই component tag কে close করতে হবে। যেমনঃ <News/> এভাবে  ''/'' দিয়ে শেষ করতে হবে। যদি <News> এভাবে লিখেন তাহলে error হবে।