রিয়েক্ট অ্যাপ ডেভেলপমেন্টে সূচনা

by

সিম্পল রিয়েক্ট প্রজেক্ট একাধিক ভাবেই তৈরি করা যায়। রিয়েক্ট অ্যাপ তৈরি করার জন্য কম্পিউটারে Node.js ইন্সটল করা থাকতে হবে। খুব সহজে এখান থেকে Node.js ইন্সটলার ডাউনলোড করে কম্পিউটারে ইন্সটল করে নেওয়া যাবে। যে কোন একটা ফোল্ডার তৈরি করে নিব। এরপর টার্মিনাল বা কমান্ডলাইনের মাধ্যমে ঐ ফোল্ডারে ন্যাভিগেট করব। এরপর লিখবঃ

npm init -y

তাহলে ঐ ডিরেক্টরিতে একটা নোড জেএস প্রজেক্ট ইনিশিয়ালাইজ করে দিবে। যার ভেতর package.json দেখব আমরা।  এই ফাইলে লেখা থাকবে এই প্রজেক্টের নাম, নোড জেএস প্রজেক্টে কি কি ফ্রেমওয়ার্ক ইউজ করব, স্টার্টিং ফাইলের নাম ইত্যাদি। আমরা যদি এই ফাইলটা কোড এডিটরে ওপেন করি, তাহলে কিছুটা এমন দেখব:

{
  "name": "hello-npm",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

রিয়েক্ট যোগ করতে লিখবঃ

npm install react react-dom react-scripts

react-scripts ব্যবহার করে লোকালি রিয়েক্ট প্রজেক্ট রান করতে পারি। কেউ কেউ Vite ব্যবহার করে। রিয়েক্ট স্ক্রিপ্ট ব্যবহার করলে package.json এ script কী এর জন্য নিচের দুইটা ভ্যালু যোগ করতে হবেঃ

    "start": "react-scripts start",
    "build": "react-scripts build"

তাহলে সম্পূর্ণ package.json ফাইল হবে এমনঃ

{
  "name": "hello-npm",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "react-scripts": "^5.0.1"
  },
  "devDependencies": {
    "react-scripts": "^5.0.1"
  }
}

public এবং src নামে দুইটা ফোল্ডার তৈরি করে নিব। কমান্ড লাইন থেকেও করে নিতে পারিঃ

mkdir public src

পাবলিক ফোল্ডারে index.html নামক একটা ফাইল তৈরি করব। তার ভেতর লিখবঃ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello World App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

src এর ভেতর index.js ফাইল তৈরি করে লিখবঃ

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

src এর ভেতর App.js ফাইল তৈরি করে লিখবঃApp

import React from 'react';

function App() {
  return (
    <div style={{ textAlign: 'center', marginTop: '3rem', fontSize: '2rem' }}>
      Hello, World!
    </div>
  );
}

export default App;

এরপর নিচের কমান্ড গুলো রান করবঃ

npm install      # install dependencies
npm start        # run locally

npm start প্রথমবার রান করলে টার্গেট ব্রাউজার যোগ করে বলবে। y প্রেস করে যোগ করে নিব।

এরপর ব্রাউজারে রিয়েক্ট প্রজেক্ট ওপেন হবে।

উপরে সিম্পল Hello, World! অ্যাপ তৈরি করেছি। আমরা যে কোন প্রজেক্টই ব্যবহার করতে পারব।

ভিট (vite) ব্যবহার করে রিয়েক্ট প্রজেক্ট তৈরি

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

ভিট ব্যবহার করে রিয়েক্ট প্রজেক্ট তৈরির জন্য লিখবঃ

npm create vite@latest

আমাদের প্রজেক্টের নাম জিজ্ঞেস করবে। প্রজেক্টের নাম দিয়ে এন্টার প্রেস করব। যদি টার্মিনাল বা কমান্ডলাইনে ন্যাভিগেট করা ফোল্ডারে প্রজেক্ট তৈরি করতে চাই, তাহলে . লিখে এন্টার প্রেস করব।

এরপর ভিট ব্যবহার করে রিয়েক্ট ছাড়াও আরো অনেক ধরণের প্রজেক্ট যেমন Vanilla, Vue, Preac, Angular সহ অন্যান্য ফ্রেমওয়ার্কের জন্য প্রজেক্ট ইনিশিয়ালাইজ করে নেওয়া যায়। আমরা রিয়েক্ট সিলেক্ট করব। এরপর রিয়েক্টে কোন ল্যাঙ্গুয়েজ ব্যবহার করব, তা সিলেক্ট করতে বলবে। JavaScript, JavaScript + SWC, TypeScript, TypeScript + SWC ইত্যাদি থেকে একটা সিলেক্ট করতে বলবে। এখানে SWC মানে হচ্ছে Speedy Web Compiler। যেটা জাভা স্ক্রিপ্ট এবং টাইপ স্ক্রিপ্টের কম্পাইলার। রেগুলার কম্পাইলার থেকে দ্রুত কাজ করে। টাইপ স্ক্রিপ জানলে টাইপ স্ক্রিপ্ট সিলেক্ট করব। আর না হলে JavaScript + SWC সিলেক্ট করে প্রজেক্ট তৈরি করে নিব।

প্রজেক্ট তৈরির পর ডিপেন্ডেন্সি গুলো ইন্সটল করতে হবে। তার জন্য লিখবঃ

npm install

এরপর লোকাল হোস্টে প্রজেক্ট রান করতে লিখবঃ

npm run dev

প্রোডাকশন ফাইল তৈরির জন্য লিখবঃ

npm run build

প্রোডাকশন ফাইল লোকাল হোস্টে দেখতে চাইলে লিখবঃ

npm run preview

এই তো, রিয়েক্ট প্রজেক্ট তৈরি এবং রান করা সম্পর্কে জানলাম।

রিয়েক্টের ব্যাসিক টার্মিনোলজি

কম্পোনেন্টস

রিয়েক্টের পাওয়ার হচ্ছে কম্পোনেন্টস। যে কোন কিছুর জন্য আমরা কম্পোনেন্টস তৈরি করে নিতে পারি। যেমন:

function Welcome() {
  return <h1>Hello, React!</h1>;
}

JSX

রিয়েক্টের ফাইল গুলোর এক্সটেনশন হয় .jsx। যেখানে আমরা HTML কোড জাভাস্ক্রিপ্ট কোডের ভেতর লিখতে পারি। যেমনঃ

const element = &lt;h2>Welcome!&lt;/h2>;

Props

কোন কম্পোনেন্টে ডেটা পাস করার জন্য করার জন্য প্যারামিটার গুলোকে রিয়েক্টে প্রপস বলে। যেমনঃ

function Welcome(props) {
  return &lt;h1>Hello, {props.name}!&lt;/h1>;
}

স্টেট

স্টেট (useState)

ডেটা ম্যানেজ করার জন্য স্টেট ব্যবহার করা হয়। যেমনঃ

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    &lt;div>
      &lt;p>{count}&lt;/p>
      &lt;button onClick={() => setCount(count + 1)}>+&lt;/button>
    &lt;/div>
  );
}

ইভেন্ট

বিভিন্ন ইন্টারেকশন হ্যান্ডেল করার জন্য ইভেন্ট ব্যবহার করা হয়। যেমনঃ

&lt;button onClick={handleClick}>Click Me&lt;/button>

উপরে যা শিখেছি, তা এক সাথে দেখতে পারি নিচের মত করে। App.jsx ফাইল ওপেন করে নিচের মত করে লিখিঃ

import { useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
      &lt;div className="card">
        &lt;button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        &lt;/button>
      &lt;p className="read-the-docs">
        Click on the button to increment the count.
      &lt;/p>
      &lt;/div>
  )
}
export default App

এবার প্রজেক্টের প্রতিটা ফাইল একটু খুলে দেখি। কোথায় কোন ফাইলের রেফারেন্স ব্যবহার করা হয়েছে, সেগুলো বোঝার চেষ্টা করি।

Leave a Comment