React কম্পোনেন্ট পরিচিতি

যেকোনো ওয়েবসাইটের দিকে তাকান। এটি স্বাধীন ব্লকের সমন্বয়ে গঠিত: হেডার, সাইডবার, ফুটার, কন্টেন্ট। বলা যেতে পারে যে এই ব্লকগুলি হল কম্পোনেন্ট সেই অর্থে, যা React-এ বোঝানো হয়।

যদি একই হেডারের দিকে তাকানো হয়, তবে এতে লোগো সহ ব্লক, কন্টাক্ট ব্লক, মেনু সহ ব্লক ইত্যাদি আলাদা করা যায়। অর্থাৎ কম্পোনেন্টগুলি অন্যান্য উপ-কম্পোনেন্ট নিয়ে গঠিত হতে পারে।

একইভাবে React-এ বিষয়টি রয়েছে - ওয়েবসাইটটি কম্পোনেন্টের সমন্বয়ে গঠিত হয়, যা পরিবর্তে অন্যান্য কম্পোনেন্ট ধারণ করতে পারে।

React-এ প্রতিটি কম্পোনেন্ট একটি আলাদা মডিউল হিসাবে কাজ করে। সাধারণত ডেভেলপমেন্ট শুরু হয় মূল কম্পোনেন্ট App দিয়ে, যা এর ভিতরে বাকিগুলো ধারণ করে।

আসুন নতুন কম্পোনেন্ট তৈরি করার অনুশীলন করি।

উদাহরণ স্বরূপ ধরা যাক আমাদের একটি কম্পোনেন্ট দরকার যা পণ্যের তথ্য দেখায়। এর জন্য আমাদের কাজের ফোল্ডারে Product.js ফাইল তৈরি করতে হবে এবং নিচের কোডটি এতে যোগ করতে হবে:

jsximport React from 'react';

function Product() {
  return <p>
    product
  </p>;
}

export default Product;

আপনি যেমন দেখছেন, এখন আমাদের কম্পোনেন্টটি টেক্সট সহ একটি প্যারাগ্রাফ রিটার্ন করছে। পরবর্তী পাঠে আমরা এই কোডটি আপডেট করব যাতে এটি পণ্যের তথ্য ফেরত দেয়। কিন্তু এখন শুরুতে শুধু কিছু প্রাথমিক টেক্সট সহ প্যারাগ্রাফ রেখে দেব।

আসুন এখন আমাদের তৈরি কম্পোনেন্টটি App কম্পোনেন্টে দেখাই। ধরা যাক এখন আমাদের App-এর নিম্নলিখিত কোড রয়েছে:

jsximport React from 'react';

function App() {
  return <div>
    text
  </div>;
}

export default App;

শুরুতে আমাদের তৈরি করা পণ্যের কম্পোনেন্টটি ইম্পোর্ট করতে হবে:

jsximport React from 'react';
import Product from './Product'; // পণ্য ইম্পোর্ট করছি

function App() {
  return <div>
    text
  </div>;
}

export default App;

এইরকম ইম্পোর্ট করার পরে App কম্পোনেন্টের ভিতরে Product কম্পোনেন্ট ব্যবহার করা যাবে।