ReactJS সেটআপ এবং ইনস্টলেশন

ReactJS একটি জনপ্রিয় JavaScript লাইব্রেরি, যা আপনাকে ইন্টারেক্টিভ এবং ডাইনামিক ইউজার ইন্টারফেস (UI) তৈরি করতে সাহায্য করে। ReactJS ইনস্টলেশন প্রক্রিয়া সহজ এবং দ্রুত, তবে সেটআপের জন্য কিছু প্রাথমিক সরঞ্জাম এবং স্টেপ অনুসরণ করতে হয়। এই টিউটোরিয়ালে ReactJS সেটআপ ও ইনস্টলেশনের পদ্ধতি বিস্তারিতভাবে আলোচনা করা হবে।

ReactJS ইনস্টলেশন প্রস্তুতি

ReactJS সেটআপের জন্য প্রথমে কিছু প্রাথমিক সরঞ্জামের প্রয়োজন হয়:

1. Node.js ইনস্টল করা

ReactJS একটি Node.js ভিত্তিক লাইব্রেরি, তাই এটি ব্যবহারের জন্য আপনার সিস্টেমে Node.js ইনস্টল থাকা আবশ্যক। Node.js হল একটি JavaScript রানটাইম এনভায়রনমেন্ট, যা ReactJS ডেভেলপমেন্ট পরিবেশের জন্য প্রয়োজনীয়।

Node.js ইনস্টলেশন প্রক্রিয়া:

• Node.js ডাউনলোড করার জন্য Node.js অফিসিয়াল সাইট এ যান।
• এখানে LTS (Long Term Support) ভার্সনটি ডাউনলোড করুন।
• ইনস্টলেশন শেষ হলে, টার্মিনাল বা কমান্ড প্রম্পটে node -v কমান্ড ব্যবহার করে Node.js এর ভার্সন চেক করুন।

2. npm (Node Package Manager)

Node.js ইনস্টল করার সাথে সাথে npm (Node Package Manager) স্বয়ংক্রিয়ভাবে ইনস্টল হয়ে যাবে। npm ব্যবহার করে আপনি ReactJS এবং অন্যান্য প্রয়োজনীয় লাইব্রেরি ইনস্টল করতে পারবেন।

npm এর ভার্সন চেক করতে:

npm -v

ReactJS ইনস্টলেশন পদ্ধতি

ReactJS সেটআপ করার জন্য দুটি পদ্ধতি আছে। একটি হল create-react-app টুল ব্যবহার করা, যা একটি স্ক্যাফোল্ডিং টুল হিসাবে কাজ করে এবং React অ্যাপ্লিকেশন শুরু করতে সাহায্য করে। আরেকটি পদ্ধতি হল ম্যানুয়ালি React এবং অন্যান্য প্রয়োজনীয় প্যাকেজ ইনস্টল করা।

1. Create React App (সরাসরি শুরু করা)

ReactJS অ্যাপ্লিকেশন তৈরি করতে সবচেয়ে সহজ এবং জনপ্রিয় পদ্ধতি হল create-react-app ব্যবহার করা। এটি একটি প্রস্তুতকৃত কনফিগারেশন প্রদান করে, যা আপনার অ্যাপ্লিকেশন ডেভেলপমেন্ট শুরু করতে সহায়ক।

Create React App ইনস্টলেশন:

• প্রথমে, আপনার প্রজেক্টের ডিরেক্টরি তৈরি করুন:

  mkdir my-react-app
  cd my-react-app
  

• React অ্যাপ তৈরি করুন:

  npx create-react-app .
  

  এখানে npx Node.js প্যাকেজ রান করার জন্য ব্যবহৃত হয়। এই কমান্ডটি create-react-app টুল ব্যবহার করে নতুন একটি React অ্যাপ্লিকেশন তৈরি করবে।

• অ্যাপটি চালু করুন:

  npm start
  

  এটি আপনার React অ্যাপ্লিকেশনটি চালু করবে এবং ডিফল্ট ব্রাউজারে আপনার অ্যাপ্লিকেশনটি প্রদর্শিত হবে।

2. ম্যানুয়ালি React ইনস্টলেশন

আপনি চাইলে ReactJS ম্যানুয়ালি ইনস্টলও করতে পারেন। এ জন্য React এবং ReactDOM প্যাকেজগুলি ইনস্টল করতে হবে।

ম্যানুয়ালি React ইনস্টলেশন:

• প্রথমে, আপনার প্রজেক্টের জন্য একটি ফোল্ডার তৈরি করুন এবং সেখানে যান:

  mkdir my-react-app
  cd my-react-app
  

• npm ইনিশিয়ালাইজ করুন (package.json ফাইল তৈরি হবে):

  npm init -y
  

• React এবং ReactDOM ইনস্টল করুন:

  npm install react react-dom
  

• প্যাকেজ ইনস্টল হয়ে গেলে, আপনার index.html ফাইল তৈরি করুন এবং React এর জন্য একটি DOM ডিভ তৈরি করুন:

  <div id="root"></div>
  

• এখন, একটি index.js ফাইল তৈরি করুন এবং React অ্যাপ্লিকেশন রেন্ডার করুন:

  import React from 'react';
  import ReactDOM from 'react-dom';
  
  const App = () => {
    return <h1>Hello, React!</h1>;
  };
  
  ReactDOM.render(<App />, document.getElementById('root'));
  

• React কোড রান করার জন্য Webpack এবং Babel এর কনফিগারেশন দরকার হবে। এই সেটআপ কিছুটা জটিল, তাই সাধারণত create-react-app ব্যবহারের পরামর্শ দেয়া হয়।

ReactJS অ্যাপ্লিকেশন চালানো

React অ্যাপ ইনস্টল করার পর, আপনি এটি চালানোর জন্য npm start ব্যবহার করতে পারেন। এটি একটি ডিফল্ট ডেভেলপমেন্ট সার্ভার চালু করবে, যা আপনার অ্যাপ্লিকেশনটি ব্রাউজারে রেন্ডার করবে। এই সার্ভারটি ওয়েব পেজে ফাইল পরিবর্তন হলে স্বয়ংক্রিয়ভাবে রিলোড করবে, ফলে ডেভেলপমেন্টের সময় প্রোগ্রামিং আরও সুবিধাজনক হবে।

সারসংক্ষেপ

ReactJS ইনস্টলেশন প্রক্রিয়া খুবই সরল এবং দ্রুত। create-react-app ব্যবহার করে আপনি সহজে এবং দ্রুত একটি React অ্যাপ্লিকেশন তৈরি করতে পারেন, যা ডেভেলপমেন্টের জন্য প্রস্তুত থাকে। তবে, ম্যানুয়ালি React ইনস্টল করেও আপনি নিজের প্রয়োজন অনুসারে কনফিগারেশন করতে পারেন। ReactJS আপনার UI তৈরি প্রক্রিয়াকে দ্রুত, মডুলার এবং পুনঃব্যবহারযোগ্য করে তোলে, যা আধুনিক ওয়েব অ্যাপ্লিকেশনের জন্য উপকারী।

Create React App (CRA) একটি অফিশিয়াল টুল যা ReactJS অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে। এটি React অ্যাপ তৈরি করার জন্য একটি প্রস্তুতকৃত স্ক্যাফোল্ডিং প্রদান করে, যেখানে সমস্ত কনফিগারেশন ও সেটআপ স্বয়ংক্রিয়ভাবে সম্পন্ন হয়। এর মাধ্যমে ডেভেলপাররা দ্রুত একটি নতুন React প্রজেক্ট শুরু করতে পারেন।

Create React App ইনস্টলেশন

1. Node.js ইনস্টল করুন

ReactJS ব্যবহার করার জন্য প্রথমে আপনার সিস্টেমে Node.js ইনস্টল থাকতে হবে, কারণ Create React App Node.js এর উপর ভিত্তি করে কাজ করে। Node.js এবং npm (Node Package Manager) এর সর্বশেষ ভার্সন ইনস্টল করতে Node.js অফিসিয়াল ওয়েবসাইট এ যান।

টার্মিনাল বা কমান্ড প্রম্পটে ইনস্টলেশন নিশ্চিত করতে এই কমান্ডটি ব্যবহার করুন:

node -v
npm -v

2. Create React App ইনস্টল করা

create-react-app একটি global npm প্যাকেজ হিসেবে ইনস্টল করা যেতে পারে, তবে বর্তমানে npx ব্যবহার করে সরাসরি এটি রান করা হয়, তাই আপনাকে আলাদাভাবে ইনস্টল করার প্রয়োজন নেই। npx হল একটি npm প্যাকেজ রানার, যা কোনও প্যাকেজ ইনস্টল না করেই তা চালাতে সাহায্য করে।

নতুন React অ্যাপ তৈরি করা

1. নতুন React প্রজেক্ট তৈরি করুন

নতুন একটি React অ্যাপ তৈরি করতে, আপনার টার্মিনাল বা কমান্ড প্রম্পটে নিম্নলিখিত কমান্ডটি ব্যবহার করুন:

npx create-react-app my-app

এখানে my-app হচ্ছে আপনার অ্যাপের নাম। আপনি যে নামটি চান তা ব্যবহার করতে পারেন। এই কমান্ডটি নতুন একটি React অ্যাপ তৈরি করবে এবং সমস্ত প্রয়োজনীয় ডিপেনডেন্সি ইনস্টল করবে।

2. প্রজেক্ট ডিরেক্টরিতে যান

যেহেতু create-react-app প্রজেক্টের জন্য একটি নতুন ডিরেক্টরি তৈরি করবে, আপনাকে সেই ডিরেক্টরিতে যেতে হবে:

cd my-app

3. React অ্যাপ চালু করা

React অ্যাপ চালু করতে, টার্মিনালে নিচের কমান্ডটি রান করুন:

npm start

এই কমান্ডটি আপনার অ্যাপ্লিকেশনটি লোকাল সার্ভারে চালু করবে। ডিফল্টভাবে এটি http://localhost:3000 এ চলতে থাকবে, এবং ব্রাউজারে আপনার অ্যাপ দেখতে পারবেন।

প্রজেক্টের ফোল্ডার স্ট্রাকচার

Create React App দ্বারা তৈরি করা অ্যাপের মধ্যে কিছু ডিফল্ট ফাইল এবং ডিরেক্টরি থাকে, যা অ্যাপ ডেভেলপমেন্টের জন্য প্রয়োজনীয় কনফিগারেশন এবং ফাংশনালিটি সরবরাহ করে:

• public/index.html: অ্যাপের মূল HTML ফাইল।
• src/index.js: React অ্যাপের এন্ট্রি পয়েন্ট।
• src/App.js: অ্যাপের মূল কম্পোনেন্ট।
• package.json: ডিপেনডেন্সি এবং স্ক্রিপ্ট সম্পর্কিত কনফিগারেশন।
• node_modules/: ইনস্টল করা প্যাকেজগুলির ফোল্ডার।

Create React App এর উপকারিতা

• সহজ সেটআপ: কোন ধরনের কনফিগারেশন ছাড়াই React প্রজেক্ট তৈরি করা যায়।
• স্বয়ংক্রিয় ডিপেনডেন্সি ম্যানেজমেন্ট: সমস্ত প্রয়োজনীয় ডিপেনডেন্সি অটোমেটিকভাবে ইনস্টল হয়।
• নিরাপদ এবং মানসম্মত কোড: Create React App দ্বারা তৈরি হওয়া প্রজেক্টের কোড গঠন স্বয়ংক্রিয়ভাবে সঠিক এবং ভালো মানের হয়।
• ডেভেলপমেন্ট সার্ভার: এটি একটি বিল্ট-ইন ডেভেলপমেন্ট সার্ভার দেয় যা দ্রুত রিফ্রেশ এবং হট রিলোড সক্ষম করে।

এভাবে, Create React App ব্যবহার করে React প্রজেক্ট তৈরি করা অত্যন্ত সহজ এবং ডেভেলপমেন্ট প্রক্রিয়া আরও দ্রুত ও কার্যকরী হয়।

ReactJS ইনস্টল করার জন্য দুটি জনপ্রিয় প্যাকেজ ম্যানেজার ব্যবহার করা হয়: NPM (Node Package Manager) এবং Yarn। আপনি যেকোনো একটিকে ব্যবহার করে ReactJS ইনস্টল করতে পারেন। এখানে দুইটি মেথডের মাধ্যমে ReactJS ইনস্টল করার বিস্তারিত প্রক্রিয়া দেওয়া হলো।

1. NPM এর মাধ্যমে ReactJS ইনস্টলেশন

NPM (Node Package Manager)

NPM হল Node.js এর সাথে ডিফল্টভাবে আসে এবং JavaScript লাইব্রেরি বা ফ্রেমওয়ার্ক ইনস্টল করার জন্য এটি সবচেয়ে বেশি ব্যবহৃত হয়। ReactJS ইনস্টল করতে NPM ব্যবহার করা খুবই সহজ।

ReactJS ইনস্টল করার পদ্ধতি (NPM এর মাধ্যমে):

1. Node.js এবং NPM ইনস্টল করুন: প্রথমে, আপনার সিস্টেমে Node.js এবং NPM ইনস্টল থাকতে হবে। Node.js ডাউনলোড করতে Node.js অফিসিয়াল সাইট এ যান এবং LTS (Long-Term Support) ভার্সনটি ডাউনলোড করুন।

   ইনস্টল হওয়ার পর, টার্মিনালে বা কমান্ড প্রম্পটে NPM এর ভার্সন চেক করতে নিম্নলিখিত কমান্ডটি চালান:

   npm -v
   

2. React অ্যাপ তৈরি করুন: React অ্যাপ তৈরি করতে create-react-app ব্যবহার করা হয়। আপনার পছন্দের নাম দিয়ে একটি React প্রজেক্ট তৈরি করতে এই কমান্ডটি চালান:

   npx create-react-app my-app
   

   এখানে my-app আপনার প্রজেক্টের নাম হবে। npx হল NPM এর একটি টুল, যা প্যাকেজ রান করার জন্য ব্যবহৃত হয় এবং এটি আপনাকে create-react-app টুলটি ইনস্টল না করেই ব্যবহার করতে দেয়।

3. React প্রজেক্টে প্রবেশ করুন: যখন create-react-app কমান্ডটি সফলভাবে রান হয়ে যাবে, তখন আপনার প্রজেক্ট ফোল্ডারে চলে যান:

   cd my-app
   

4. React অ্যাপ চালু করুন: প্রজেক্ট ডিরেক্টরির ভিতরে গিয়ে, React অ্যাপ চালু করতে এই কমান্ডটি চালান:

   npm start
   

   এই কমান্ডটি React অ্যাপটি লোকাল সার্ভারে চালু করবে এবং সাধারণত এটি http://localhost:3000 এ দেখাবে।

2. Yarn এর মাধ্যমে ReactJS ইনস্টলেশন

Yarn

Yarn একটি প্যাকেজ ম্যানেজার যা NPM এর বিকল্প হিসেবে ব্যবহৃত হয় এবং এটি অধিক দ্রুত এবং নির্ভরযোগ্য ডিপেনডেন্সি ম্যানেজমেন্ট প্রদান করে। Yarn দিয়ে ReactJS ইনস্টল করার প্রক্রিয়া NPM এর মতোই সহজ, তবে এটি কিছু অতিরিক্ত সুবিধা প্রদান করে, যেমন ডিপেনডেন্সি ক্যাশিং এবং উন্নত পারফরম্যান্স।

ReactJS ইনস্টল করার পদ্ধতি (Yarn এর মাধ্যমে):

1. Yarn ইনস্টল করুন: প্রথমে, Yarn ইনস্টল করা দরকার। যদি আপনি Yarn ইনস্টল না করে থাকেন, তাহলে Yarn অফিসিয়াল সাইট থেকে এটি ডাউনলোড করতে পারেন, অথবা npm ব্যবহার করে ইনস্টল করতে পারেন:

   npm install --global yarn
   

2. React অ্যাপ তৈরি করুন: Yarn ব্যবহার করে React অ্যাপ তৈরি করতে, create-react-app ইনস্টল করার পরিবর্তে সরাসরি এই কমান্ডটি ব্যবহার করুন:

   yarn create react-app my-app
   

   এখানে my-app হচ্ছে আপনার প্রজেক্টের নাম।

3. React প্রজেক্টে প্রবেশ করুন: প্রজেক্ট ফোল্ডারে চলে যান:

   cd my-app
   

4. React অ্যাপ চালু করুন: Yarn দিয়ে React অ্যাপ চালু করতে, এই কমান্ডটি ব্যবহার করুন:

   yarn start
   

   এটি আপনার React অ্যাপটিকে লোকাল সার্ভারে চালু করবে এবং সাধারণত এটি http://localhost:3000 এ দেখাবে।

NPM এবং Yarn এর মধ্যে পার্থক্য

ReactJS ইনস্টলেশন NPM বা Yarn ব্যবহার করে করা যেতে পারে। দুটি পদ্ধতিই কার্যকর এবং উপকারী, তবে Yarn দ্রুত ডিপেনডেন্সি ম্যানেজমেন্ট এবং ক্যাশিং সুবিধা প্রদান করে। NPM হল ডিফল্ট প্যাকেজ ম্যানেজার, যা Node.js এর সাথে আসে, কিন্তু Yarn আধুনিক ওয়েব ডেভেলপমেন্টে আরও দ্রুত এবং নির্ভরযোগ্য। আপনি যে কোনো পদ্ধতি ব্যবহার করে ReactJS ইনস্টল করতে পারেন এবং আপনার প্রজেক্ট তৈরি শুরু করতে পারেন।

ReactJS প্রজেক্টের ফোল্ডার স্ট্রাকচারটি একটি নির্দিষ্ট কাঠামো অনুসরণ করে, যা কোড মেইন্টেনেন্স এবং ডেভেলপমেন্টের জন্য সুবিধাজনক। Create React App (CRA) দ্বারা তৈরি React প্রজেক্টে একটি ডিফল্ট ফোল্ডার স্ট্রাকচার থাকে, যা আপনাকে React অ্যাপ্লিকেশন ডেভেলপ করতে সহায়ক হয়। নিচে একটি সাধারণ ReactJS প্রজেক্টের ফোল্ডার স্ট্রাকচার এবং এর প্রতিটি ফোল্ডারের গুরুত্ব আলোচনা করা হলো।

ReactJS প্রজেক্টের ফোল্ডার স্ট্রাকচার

my-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── manifest.json
├── src/
│   ├── App.js
│   ├── App.css
│   ├── index.js
│   ├── index.css
│   ├── components/
│   └── assets/
├── package.json
├── package-lock.json
└── README.md

প্রতিটি ফোল্ডারের এবং ফাইলের ব্যাখ্যা

1. node_modules/

এই ফোল্ডারটি সমস্ত ইনস্টল করা NPM প্যাকেজ এবং তাদের ডিপেনডেন্সি ধারণ করে। এটি স্বয়ংক্রিয়ভাবে React অ্যাপ্লিকেশন তৈরির সময় তৈরি হয় এবং ডেভেলপাররা সাধারণত এই ফোল্ডারটি সরাসরি সম্পাদনা করেন না। এটি আপনার React অ্যাপের সমস্ত ডিপেনডেন্সি রাখে।

2. public/

public ফোল্ডারটি অ্যাপ্লিকেশনের সিএসএস, ইমেজ এবং index.html ফাইলের মতো পাবলিক ফাইল ধারণ করে। ReactJS কম্পোনেন্টগুলো এই HTML ফাইলের মধ্যে রেন্ডার হয়।

• index.html: এটি আপনার অ্যাপ্লিকেশনের মূল HTML ফাইল। React অ্যাপ্লিকেশনটি এই ফাইলে রেন্ডার হয়।
• manifest.json: এটি একটি JSON ফাইল যা আপনার অ্যাপের মেটাডেটা ধারণ করে এবং প্রগ্রেসিভ ওয়েব অ্যাপ্লিকেশন (PWA) হিসেবে কনফিগার করা হলে এটি ব্যবহৃত হয়।

3. src/

src ফোল্ডারটি সমস্ত React কোড এবং স্ক্রিপ্ট রাখে। আপনি সাধারণত এই ফোল্ডারেই আপনার সমস্ত কোড লেখেন। এখানে একাধিক ফাইল এবং ফোল্ডার থাকতে পারে, যেমন:

• App.js: এটি React অ্যাপ্লিকেশনের মূল কম্পোনেন্ট, যা অ্যাপের রেন্ডারিং শুরু করে।
• App.css: এই ফাইলটি App.js কম্পোনেন্টের জন্য স্টাইলশীট সরবরাহ করে। React অ্যাপে সাধারণত CSS ফাইলগুলো কম্পোনেন্ট-বেজড স্টাইলিংয়ের জন্য ব্যবহার করা হয়।
• index.js: এটি React অ্যাপ্লিকেশনের এন্ট্রি পয়েন্ট। এই ফাইলে ReactDOM এর মাধ্যমে React অ্যাপ্লিকেশন রেন্ডার করা হয়।
• index.css: এই ফাইলটি সাধারণভাবে অ্যাপের জন্য গ্লোবাল CSS স্টাইল ধারণ করে।
• components/: এখানে আপনার React কম্পোনেন্টগুলো রাখা হয়। প্রতিটি কম্পোনেন্ট একটি নির্দিষ্ট UI অংশ বা ফিচারের জন্য দায়িত্বশীল। যেমন Header.js, Footer.js, Sidebar.js ইত্যাদি।
• assets/: এই ফোল্ডারে আপনার অ্যাপ্লিকেশনের জন্য প্রয়োজনীয় মিডিয়া ফাইল (যেমন ইমেজ, আইকন, ফন্ট) রাখা হয়।

4. package.json

এই ফাইলটি আপনার অ্যাপ্লিকেশনের সকল ডিপেনডেন্সি, স্ক্রিপ্ট এবং কনফিগারেশন ধারণ করে। এটি নোড প্যাকেজ ম্যানেজার (npm) ব্যবহার করে অ্যাপ্লিকেশন রান, ডিপেনডেন্সি ইন্সটল, স্ক্রিপ্ট চলানোর জন্য প্রয়োজনীয় নির্দেশনা প্রদান করে।

• scripts: এখানে ডিফল্টভাবে কিছু স্ক্রিপ্ট থাকে, যেমন start, build, test, eject।
• dependencies: এখানে অ্যাপ্লিকেশনের জন্য ইনস্টল করা সমস্ত NPM প্যাকেজের তালিকা থাকে, যেমন React, ReactDOM, React Scripts ইত্যাদি।

5. package-lock.json

এই ফাইলটি package.json এর সাথে সম্পর্কিত এবং এটি ইনস্টল করা ডিপেনডেন্সিগুলির সঠিক ভার্সন সংরক্ষণ করে। এটি ডিপেনডেন্সির একসাথে রেপ্লিকেশন নিশ্চিত করে, যেন সব ডেভেলপার একই প্যাকেজ ভার্সন ব্যবহার করে।

6. README.md

এই ফাইলটি আপনার প্রজেক্টের বেসিক তথ্য এবং সেটআপ গাইডলাইন ধারণ করে। এটি সাধারণত প্রজেক্টের ডকুমেন্টেশন হিসেবে ব্যবহৃত হয়।

ReactJS প্রজেক্ট স্ট্রাকচারের বিবরণ

• Node Modules: সব প্যাকেজের তথ্য সংরক্ষিত থাকে।
• Public Folder: সার্ভারের জন্য অ্যাপ্লিকেশনের ফাইল এবং ফিক্সড রিসোর্স।
• Source Folder: সমস্ত React কোড এবং কম্পোনেন্টস থাকে, যা আপনার অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়।
• Package JSON: ডিপেনডেন্সি এবং প্রজেক্ট কনফিগারেশন।
• README.md: প্রজেক্ট সম্পর্কে ডকুমেন্টেশন এবং ইনস্ট্রাকশন।

এই স্ট্রাকচারটি React অ্যাপ্লিকেশন তৈরি করার জন্য একটি সুসংগঠিত কাঠামো প্রদান করে, যা কোড মেইন্টেনেন্স এবং স্কেলেবিলিটি উন্নত করে। ReactJS প্রজেক্টে অন্যান্য ফোল্ডার বা ফাইল যোগ করার মাধ্যমে আপনি অ্যাপ্লিকেশনের জটিলতা অনুযায়ী আপনার স্ট্রাকচার কাস্টমাইজ করতে পারেন।

ReactJS দিয়ে প্রথম প্রজেক্ট তৈরি এবং রান করার প্রক্রিয়া খুবই সহজ এবং সরল। এখানে আপনি কিভাবে প্রথম ReactJS প্রজেক্ট তৈরি করবেন এবং সেটি রান করবেন তা ধাপে ধাপে দেখানো হলো।

১. ReactJS প্রজেক্ট তৈরি করা

প্রথমে, React অ্যাপ তৈরি করতে, আপনি create-react-app টুল ব্যবহার করবেন। এটি React অ্যাপ্লিকেশন তৈরি করার জন্য একটি প্রস্তুতকৃত স্ক্যাফোল্ডিং সরবরাহ করে, যেখানে ডিপেনডেন্সি ম্যানেজমেন্ট, Webpack কনফিগারেশন এবং অন্যান্য সেটআপগুলো স্বয়ংক্রিয়ভাবে করা হয়ে থাকে।

স্টেপ ১: Node.js এবং NPM ইনস্টলেশন

ReactJS ব্যবহার করার জন্য Node.js এবং NPM (Node Package Manager) ইনস্টল থাকা প্রয়োজন। Node.js ইনস্টল করতে Node.js অফিসিয়াল সাইট থেকে ডাউনলোড করুন।

ইনস্টলেশনের পরে, টার্মিনালে বা কমান্ড প্রম্পটে নিচের কমান্ড ব্যবহার করে Node.js এবং NPM এর ভার্সন চেক করুন:

node -v
npm -v

স্টেপ ২: Create React App ব্যবহার করে নতুন প্রজেক্ট তৈরি করুন

npx (NPM এর একটি টুল) ব্যবহার করে create-react-app ইনস্টল না করেই React প্রজেক্ট তৈরি করা যায়। নিচের কমান্ডটি ব্যবহার করুন:

npx create-react-app my-app

এখানে, my-app হচ্ছে আপনার প্রজেক্টের নাম। আপনি ইচ্ছা করলে অন্য নামও দিতে পারেন।

এই কমান্ডটি রান করলে ReactJS এর প্রাথমিক কাঠামো তৈরি হয়ে যাবে এবং সমস্ত ডিপেনডেন্সি ইনস্টল হয়ে যাবে।

স্টেপ ৩: প্রজেক্ট ফোল্ডারে প্রবেশ করুন

প্রজেক্ট তৈরি হওয়ার পরে, টার্মিনালে গিয়ে cd কমান্ড দিয়ে আপনার প্রজেক্ট ফোল্ডারে চলে যান:

cd my-app

২. ReactJS প্রজেক্ট রান করা

এখন, React অ্যাপ চালানোর জন্য npm start কমান্ডটি ব্যবহার করতে হবে। এটি আপনার অ্যাপকে লোকাল ডেভেলপমেন্ট সার্ভারে চালু করবে।

স্টেপ ১: React অ্যাপ চালু করুন

npm start

এই কমান্ডটি React অ্যাপটি চালু করবে এবং সাধারণত এটি http://localhost:3000 এ চলে যাবে। আপনার ব্রাউজারে গিয়ে এই লিংকে প্রবেশ করুন এবং আপনার প্রথম React অ্যাপ দেখতে পাবেন।

স্টেপ ২: অ্যাপ রিফ্রেশ করা

আপনি যদি কোডে কোন পরিবর্তন করেন, তবে React অ্যাপটি স্বয়ংক্রিয়ভাবে রিফ্রেশ হবে। এটি React এর হট রিলোড ফিচারের কারণে সম্ভব, যার মাধ্যমে আপনি কোডের পরিবর্তন করতে থাকলেও অ্যাপ আবার লোড করতে হবে না।

৩. ReactJS প্রজেক্ট স্ট্রাকচার

আপনি যখন প্রথম React প্রজেক্ট তৈরি করবেন, তখন একটি ডিফল্ট ফোল্ডার স্ট্রাকচার তৈরি হবে, যার মধ্যে থাকবে কিছু গুরুত্বপূর্ণ ফাইল এবং ডিরেক্টরি:

my-app/
├── node_modules/      # ইনস্টল করা ডিপেনডেন্সি
├── public/            # পাবলিক ফাইল (index.html, images)
│   ├── index.html     # অ্যাপের মূল HTML ফাইল
├── src/               # সোর্স কোড
│   ├── App.js         # অ্যাপের মূল কম্পোনেন্ট
│   ├── index.js       # React অ্যাপের এন্ট্রি পয়েন্ট
├── package.json       # অ্যাপের ডিপেনডেন্সি এবং স্ক্রিপ্ট
└── README.md          # প্রজেক্ট সম্পর্কিত তথ্য

• src/index.js: এখানে React অ্যাপ্লিকেশনটি রেন্ডার হয়। এই ফাইলেই ReactDOM.render() ফাংশন ব্যবহার করে App.js কে রেন্ডার করা হয়।
• src/App.js: এই ফাইলটি আপনার অ্যাপের মূল কম্পোনেন্ট। আপনি এখানে নিজের কম্পোনেন্ট তৈরি করতে পারেন।
• public/index.html: এই ফাইলটি মূল HTML, যেখানে React অ্যাপটি রেন্ডার হবে।

৪. ReactJS প্রজেক্টে পরিবর্তন করা

React অ্যাপ চালানোর পরে, আপনি কোডে পরিবর্তন করতে পারেন। উদাহরণস্বরূপ, src/App.js ফাইলটি খুলে এখানে কিছু পরিবর্তন করতে পারেন। যেমন:

function App() {
  return (
    <div className="App">
      <h1>Hello, React!</h1>
    </div>
  );
}

এটি পরিবর্তন করার পর, আপনার ব্রাউজারে ফ্রিৎভাবে পরিবর্তনগুলো রিফ্রেশ হবে।

সারাংশ

এটি ছিল ReactJS দিয়ে প্রথম প্রজেক্ট তৈরি ও রান করার প্রক্রিয়া। আপনি create-react-app টুল ব্যবহার করে দ্রুত একটি React অ্যাপ তৈরি করতে পারেন, এবং npm start কমান্ড দিয়ে অ্যাপটি লোকাল সার্ভারে চালু করতে পারেন। এই প্রক্রিয়াটি নতুন React ডেভেলপারদের জন্য খুবই সুবিধাজনক, কারণ এটি সমস্ত কনফিগারেশন ও সেটআপ স্বয়ংক্রিয়ভাবে করে দেয়।