React এর প্রাথমিক গাইড: স্ক্র্যাচ থেকে আপনার প্রথম ইউজার ইন্টারফেস তৈরি করুন

React হল একটি JavaScript লাইব্রেরি যা ইউজার ইন্টারফেস তৈরি করার জন্য ব্যবহৃত হয়। এটি Facebook দ্বারা তৈরি এবং রক্ষণাবেক্ষণ করা হয়, এবং এটি ফ্রন্ট-এন্ড ডেভেলপমেন্টের সবচেয়ে জনপ্রিয় সরঞ্জামগুলির মধ্যে একটি হয়ে উঠেছে। এই গাইডটি আপনাকে স্ক্র্যাচ থেকে শুরু করে React এর মৌলিক ধারণাগুলি ধাপে ধাপে বুঝতে এবং একটি সাধারণ ইউজার ইন্টারফেস তৈরি করতে সহায়তা করবে।

কেন React নির্বাচন করবেন?

React এর নিম্নলিখিত সুবিধা রয়েছে:

• উপাদানভিত্তিক (Component-based): React ইউজার ইন্টারফেসকে স্বতন্ত্র, পুনরায় ব্যবহারযোগ্য উপাদানগুলিতে বিভক্ত করে। এটি কোড রক্ষণাবেক্ষণ এবং বোঝা সহজ করে তোলে।
• ঘোষণামূলক (Declarative): React ঘোষণামূলক প্রোগ্রামিং শৈলী ব্যবহার করে, যার মানে আপনাকে শুধুমাত্র আপনি কী উপস্থাপন করতে চান তা বর্ণনা করতে হবে, React স্বয়ংক্রিয়ভাবে আপডেট এবং রেন্ডারিং পরিচালনা করবে।
• কার্যকরী (Efficient): React ভার্চুয়াল DOM এবং স্মার্ট ডিফার অ্যালগরিদম ব্যবহার করে, যা দক্ষতার সাথে ইউজার ইন্টারফেস আপডেট করতে এবং অপ্রয়োজনীয় রেন্ডারিং কমাতে পারে।
• বিশাল কমিউনিটি সমর্থন (Large community support): React এর একটি বিশাল কমিউনিটি এবং সমৃদ্ধ ইকোসিস্টেম রয়েছে, আপনি টিউটোরিয়াল, লাইব্রেরি এবং সরঞ্জামগুলির একটি বিশাল সংগ্রহ খুঁজে পেতে পারেন যা আপনাকে ডেভেলপ করতে সহায়তা করবে।
• ক্রস-প্ল্যাটফর্ম ক্ষমতা (Cross-platform capability): React Native আপনাকে React ব্যবহার করে নেটিভ মোবাইল অ্যাপ্লিকেশন (iOS এবং Android) তৈরি করতে দেয়।

প্রস্তুতি

শুরু করার আগে, আপনার কম্পিউটারে নিম্নলিখিত সরঞ্জামগুলি ইনস্টল করা আছে কিনা তা নিশ্চিত করুন:

• Node.js: Node.js হল একটি JavaScript রানটাইম এনভায়রনমেন্ট, যা React ডেভেলপমেন্ট সরঞ্জাম চালানোর জন্য ব্যবহৃত হয়। আপনি https://nodejs.org/ থেকে এটি ডাউনলোড এবং ইনস্টল করতে পারেন।
• npm অথবা yarn: npm (Node Package Manager) এবং yarn হল JavaScript প্যাকেজ ম্যানেজার, যা React এর নির্ভরতা ইনস্টল এবং পরিচালনা করতে ব্যবহৃত হয়। Node.js ইনস্টল করার সময় সাধারণত npm ইনস্টল করা হয়। yarn https://yarnpkg.com/ থেকে ইনস্টল করা যেতে পারে।

আপনার প্রথম React অ্যাপ্লিকেশন তৈরি করুন

আমরা দ্রুত একটি React প্রকল্প তৈরি করতে create-react-app ব্যবহার করব।

1. npm ব্যবহার করে তৈরি করুন:

   npx create-react-app my-first-react-app
   cd my-first-react-app
   npm start
   

2. yarn ব্যবহার করে তৈরি করুন:

   yarn create react-app my-first-react-app
   cd my-first-react-app
   yarn start
   

উপরের কমান্ডগুলি চালানোর পরে, create-react-app স্বয়ংক্রিয়ভাবে my-first-react-app নামের একটি ডিরেক্টরি তৈরি করবে এবং সেই ডিরেক্টরিতে একটি React প্রকল্প শুরু করবে। npm start অথবা yarn start কমান্ড একটি ডেভেলপমেন্ট সার্ভার শুরু করবে, আপনি ব্রাউজারে http://localhost:3000 এ আপনার React অ্যাপ্লিকেশনটি দেখতে পারেন।

ডিরেক্টরি গঠন

create-react-app দ্বারা তৈরি প্রকল্পের ডিরেক্টরি গঠনটি নিম্নরূপ:``` my-first-react-app/ ├── node_modules/ # প্রোজেক্টের নির্ভরতা লাইব্রেরি ├── public/ # স্ট্যাটিক রিসোর্স (যেমন HTML ফাইল) │ ├── index.html # অ্যাপ্লিকেশনের প্রবেশ HTML ফাইল │ └── ... ├── src/ # রিঅ্যাক্ট সোর্স কোড │ ├── App.css # App কম্পোনেন্টের CSS স্টাইল │ ├── App.js # App কম্পোনেন্ট │ ├── App.test.js # App কম্পোনেন্টের পরীক্ষার ফাইল │ ├── index.css # গ্লোবাল CSS স্টাইল │ ├── index.js # অ্যাপ্লিকেশনের প্রবেশ JavaScript ফাইল │ ├── logo.svg # রিঅ্যাক্ট লোগো │ └── ... ├── .gitignore # Git উপেক্ষা করার ফাইল ├── package.json # প্রোজেক্টের মেটাডেটা এবং নির্ভরতা ├── README.md # প্রোজেক্টের ডকুমেন্টেশন └── yarn.lock # নির্ভরতা সংস্করণ লকিং ফাইল (যদি yarn ব্যবহার করা হয়)

## রিঅ্যাক্ট কম্পোনেন্ট বোঝা

রিঅ্যাক্ট অ্যাপ্লিকেশন কম্পোনেন্ট দিয়ে গঠিত। কম্পোনেন্ট হল স্বতন্ত্র, পুনরায় ব্যবহারযোগ্য কোড ব্লক, যা ইউজার ইন্টারফেসের নির্দিষ্ট অংশ রেন্ডার করার জন্য ব্যবহৃত হয়।

`src/App.js` ফাইলে, আপনি একটি ডিফল্ট `App` কম্পোনেন্ট দেখতে পারেন:

```javascript
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

কোড ব্যাখ্যা:

• import React from 'react'; React লাইব্রেরি ইম্পোর্ট করে।
• function App() { ... } App নামের একটি ফাংশন কম্পোনেন্ট সংজ্ঞায়িত করে।
• return ( ... ) একটি JSX এক্সপ্রেশন রিটার্ন করে, যা কম্পোনেন্ট রেন্ডার করার বিষয় বর্ণনা করে।
• export default App; App কম্পোনেন্ট এক্সপোর্ট করে, যাতে এটি অন্য ফাইলে ব্যবহার করা যায়।

JSX (JavaScript XML)

JSX হল একটি জাভাস্ক্রিপ্ট সিনট্যাক্স এক্সটেনশন, যা আপনাকে জাভাস্ক্রিপ্ট কোডে HTML-এর মতো কোড লিখতে দেয়। উপরের উদাহরণে, ... হল একটি JSX এক্সপ্রেশন। JSX কোড Babel দ্বারা স্ট্যান্ডার্ড জাভাস্ক্রিপ্ট কোডে রূপান্তরিত হয়, যাতে ব্রাউজার বুঝতে পারে।

App কম্পোনেন্ট পরিবর্তন করা

আসুন App কম্পোনেন্ট পরিবর্তন করে একটি সাধারণ কাউন্টার তৈরি করি।

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
```  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      

# গণনাযন্ত্র

      বর্তমান গণনা: {count}

      +
      -
    
  );
}

export default App;

পরিবর্তন বিষয়ক তথ্যঃ

• import React, { useState } from 'react'; useState হুক ইম্পোর্ট করুন। useState একটি React হুক, যা ফাংশন কম্পোনেন্টে স্টেট যোগ করার জন্য ব্যবহৃত হয়।
• const [count, setCount] = useState(0); useState হুক ব্যবহার করে count নামের একটি স্টেট ভেরিয়েবল তৈরি করুন এবং এটিকে 0 দিয়ে ইনিশিয়ালাইজ করুন। setCount হল count স্টেটের মান আপডেট করার একটি ফাংশন।
• const increment = () => { setCount(count + 1); }; increment নামের একটি ফাংশন তৈরি করুন, যা count স্টেটের মান 1 করে বাড়ায়।
• const decrement = () => { setCount(count - 1); }; decrement নামের একটি ফাংশন তৈরি করুন, যা count স্টেটের মান 1 করে কমায়।
• বর্তমান গণনা: {count} পেজে count স্টেটের মান দেখায়। {count} হল একটি JSX এক্সপ্রেশন, যা JSX কোডে JavaScript ভেরিয়েবল প্রবেশ করাতে ব্যবহৃত হয়।
• + এবং - দুটি বাটন তৈরি করে, যেগুলি যথাক্রমে increment এবং decrement ফাংশনের সাথে যুক্ত। onClick হল একটি ইভেন্ট হ্যান্ডলার, যা বাটন ক্লিক করার সময় নির্দিষ্ট ফাংশনটিকে চালায়।

src/App.js ফাইলটি সেভ করার পরে, ব্রাউজার স্বয়ংক্রিয়ভাবে রিফ্রেশ হবে এবং আপনি একটি সাধারণ গণনাযন্ত্র দেখতে পাবেন। "+" বাটনে ক্লিক করলে গণনা বাড়বে এবং "-" বাটনে ক্লিক করলে গণনা কমবে।

CSS স্টাইল ব্যবহার করা

আপনি CSS ব্যবহার করে আপনার React অ্যাপকে সুন্দর করতে পারেন। create-react-app CSS মডিউল এবং সাধারণ CSS ফাইল সাপোর্ট করে।

CSS মডিউল ব্যবহার করা:

CSS মডিউল আপনাকে প্রতিটি কম্পোনেন্টের জন্য আলাদা CSS স্টাইল তৈরি করতে দেয়, যা স্টাইল কনফ্লিক্ট হওয়া থেকে বাঁচায়। কম্পোনেন্টে CSS মডিউল ব্যবহার করার জন্য, আপনাকে .module.css দিয়ে শেষ হওয়া একটি ফাইল তৈরি করতে হবে।

উদাহরণস্বরূপ, App.module.css নামের একটি ফাইল তৈরি করুন এবং তাতে নিচের CSS স্টাইল যোগ করুনঃ

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

এরপর src/App.js ফাইলে CSS মডিউল ইম্পোর্ট করুনঃ

import React, { useState } from 'react';
import styles from './App.module.css'; // CSS মডিউল ইম্পোর্ট করুন

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* CSS ক্লাস উল্লেখ করার জন্য styles অবজেক্ট ব্যবহার করুন */} 
      

# কাউন্টার

      বর্তমান গণনা: {count}

      +
      -
    
  );
}

export default App;

সাধারণ CSS ফাইল ব্যবহার করে:

আপনি গ্লোবাল স্টাইল সংজ্ঞায়িত করতে সাধারণ CSS ফাইলও ব্যবহার করতে পারেন। src/index.css ফাইলে, আপনি গ্লোবাল স্টাইল সংজ্ঞায়িত করতে পারেন।

উদাহরণস্বরূপ, নিম্নলিখিত CSS স্টাইল যুক্ত করুন:

body {
  font-family: sans-serif;
}

এই স্টাইলটি পুরো অ্যাপ্লিকেশনের body উপাদানে প্রয়োগ করা হবে।

পরবর্তী পদক্ষেপ

অভিনন্দন, আপনি আপনার প্রথম React অ্যাপ্লিকেশন সম্পন্ন করেছেন! এর পরে, আপনি React সম্পর্কে আরও শিখতে পারেন, যেমন:

• উপাদান যোগাযোগ: বিভিন্ন উপাদানের মধ্যে কীভাবে যোগাযোগ করতে হয় তা শিখুন।
• ফর্ম হ্যান্ডলিং: কীভাবে ফর্ম তৈরি এবং পরিচালনা করতে হয় তা শিখুন।
• রাউটিং: React Router ব্যবহার করে কীভাবে মাল্টি-পেজ অ্যাপ্লিকেশন তৈরি করতে হয় তা শিখুন।
• Redux বা Context API: অ্যাপ্লিকেশনটির অবস্থা কীভাবে পরিচালনা করতে হয় তা শিখুন।
• হুকস: React Hooks যেমন useEffect, useContext ইত্যাদি সম্পর্কে গভীরভাবে জানুন।

মনে রাখবেন, React এমন একটি প্রযুক্তি যা ক্রমাগত অনুশীলন এবং শেখার প্রয়োজন। আপনার শেখা আনন্দদায়ক হোক!