ReactJS - এনভাইরনমেন্ট সেটআপ

এই অধ্যায়ে আমরা আপনাকে দেখাবো React ডেভেলপমেন্টের জন্য কীভাবে একটি এনভাইরোমেন্ট সেটআপ করতে হয়। লক্ষ্য করলে দেখবেন যে, এতে অনেকগুলি ধাপ জড়িত রয়েছে তবে এটি পরবর্তীতে  আপনার ডেভেলপমেন্ট প্রক্রিয়ার গতি বাড়াতে  সহায়তা করবে। আমাদের NodeJS প্রয়োজন হবে, সুতরাং আপনার যদি এটি ইনস্টল না করা থাকে তবে নীচের টেবিল থেকে লিঙ্কে ক্লিক করে এটি ইন্সটল করুন।

NodeJS  সফলভাবে  ইনস্টল করার পরে, আমরা NPM ব্যবহার করে এর উপরে React  সেটআপ  এর কাজটি শুরু করতে পারি। আপনি দুইভাবে ReactJS ইনস্টল করতে পারেনঃ 

• Webpack এবং  Babel ব্যবহার করে। 
• create-react-app কমান্ড ব্যবহার করে।

ওয়েবপ্যাক হল মডিউল বান্ডেলার(module bundler)। এটি নির্ভরশীল মডিউল গ্রহণ করে এবং সেগুলিকে একটি একক (ফাইল) বান্ডেলে সংকলন(compile) করে। অ্যাপ্লিকেশন ডেভেলপমেন্টের সময় কমান্ড লাইন ব্যবহার করে বা webpack.config ফাইল কনফিগার করে আপনি এই বান্ডিলটি ব্যবহার করতে পারেন।

বাবেল একটি জাভাস্ক্রিপ্ট কম্পাইলার(compiler) এবং ট্রান্সপিলার(transpiler)। এটি এক সোর্স কোড হতে অন্য কোডে রূপান্তর করতে ব্যবহৃত হয়। এটি ব্যবহার করে আপনি আপনার কোডে নতুন ES6 বৈশিষ্ট্যগুলি ব্যবহার করতে সক্ষম হবেন,  যেখানে বাবেল এটিকে পুরানো ES5 এ  রূপান্তর করে এবং যা সমস্ত ব্রাউজারে সমর্থন  করে।

ডেস্কটপে mkdir কমান্ড ব্যবহার করে প্রয়োজনীয় সমস্ত ফাইল ইনস্টল করতে reactApp নামে একটি ফোল্ডার তৈরি করুন।

C:\Users\username\Desktop>mkdir reactApp

C:\Users\username\Desktop>cd reactApp

যে কোন মডিউল তৈরি করতে package.json ফাইল তৈরি করা দরকার। সুতরাং, ফোল্ডারটি তৈরি করার পরে, আমাদের একটি package.json ফাইল তৈরি করা দরকার। এটি করার জন্য আপনাকে কমান্ড প্রম্পট থেকে npm init কমান্ডটি চালাতে হবে।

C:\Users\username\Desktop\reactApp>npm init

এই কমান্ডটি মডিউল সম্পর্কে তথ্য জিজ্ঞাসা করে যেমন- প্যাকেজ নাম, বিবরণ, লেখক ইত্যাদি। -y বিকল্পটি ব্যবহার করে আপনি এগুলি এড়িয়ে যেতে পারেন।

C:\Users\username\Desktop\reactApp>npm init -y
C:\reactApp\package.json:

{

   "name": "reactApp",

   "version": "1.0.0",

   "description": "",

   "main": "index.js",

   "scripts": {

      "test": "echo \"Error: no test specified\" && exit 1"

   },

   "keywords": [],

   "author": "",

   "license": "ISC"

}

 

যেহেতু আমাদের মূল কাজ হল ReactJS  এবং এর ডোম প্যাকেজ  ইনস্টল করা। তাই আমরা যথাক্রমে npm এর install react এবং react-dom কমান্ড ব্যবহার করে এগুলো ইনস্টল করবো।  --save অপশন  ব্যবহার করে package.json ফাইলটিতে আমরা ইনস্টল করা প্যাকেজগুলি যুক্ত করতে পারি।

C:\Users\Satt\Desktop\reactApp>npm install react --save
C:\Users\Satt\Desktop\reactApp>npm install react-dom --save
অথবা, আপনি এগুলি  সিঙ্গেল  কমান্ডেই ইনস্টল করতে পারেন -
C:\Users\username\Desktop\reactApp>npm install react react-dom --save
 

ওয়েবপ্যাক ইন্সটল করার জন্য কমান্ড প্রম্পট থেকে যথাক্রমে install webpack, install webpack-dev-server এবং install webpack-cli কমান্ড ব্যবহার করুন-

C:\Users\username\Desktop\reactApp>npm install webpack –save
C:\Users\username\Desktop\reactApp>npm install webpack-dev-server --save
C:\Users\username\Desktop\reactApp>npm install webpack-cli --save
অথবা, আপনি উপরের সবগুলোকে  এক কমান্ডেই ইনস্টল করতে পারেন -
C:\Users\username\Desktop\reactApp>npm install webpack webpack-dev-server webpack-cli --save
 

ব্যাবেল ইনস্টল করুন এবং এর প্লাগইনসমূহ babel-core, babel-loader, babel-preset-env, babel-preset-react এগং html-webpack-plugin ইত্যাদি ইনস্টল করুন-

C:\Users\username\Desktop\reactApp>npm install babel-core --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-loader --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-env --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-react --save-dev
C:\Users\username\Desktop\reactApp>npm install html-webpack-plugin --save-dev
অথবা, আপনি উপরের সবগুলোকে  এক কমান্ডেই ইনস্টল করতে পারেন -
C:\Users\username\Desktop\reactApp>npm install babel-core babel-loader babel-preset-env 
   babel-preset-react html-webpack-plugin --save-dev
 

ইনস্টলেশন সম্পন্ন করতে আমাদের কিছু ফাইল তৈরি করতে হবে। যেমন index.html, App.js, main.js, webpack.config.js এবং .babelrc । আপনি এই ফাইলগুলি ম্যানুয়ালি বা কমান্ড প্রম্পট ব্যবহার করে তৈরি করতে পারেন ।

C:\Users\username\Desktop\reactApp>type nul > index.html
C:\Users\username\Desktop\reactApp>type nul > App.js
C:\Users\username\Desktop\reactApp>type nul > main.js
C:\Users\username\Desktop\reactApp>type nul > webpack.config.js
C:\Users\username\Desktop\reactApp>type nul > .babelrc
 

webpack-config.js ফাইল ওপেন করুন এবং নিম্নের কোড যুক্ত করুন। আমরা ওয়েবপ্যাক এর এন্ট্রি পয়েন্ট main.js এ স্থাপন করেছি। আউটপুট পাথ এমন এক স্থানকে বুঝায়  যেখানে বান্ডিল অ্যাপটি পরিবেশন করা হবে। আমরা 8001 পোর্ট যুক্ত করে  ডেভলপমেন্ট সার্ভারটিও সেট করেছি। আপনি  আপনার ইচ্ছামত  পোর্ট চয়ন করতে পারেন।

webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   entry: './main.js',
   output: {
      path: path.join(__dirname, '/bundle'),
      filename: 'index_bundle.js'
   },
   devServer: {
      inline: true,
      port: 8001
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html'
      })
   ]
}
 

package.json ফাইল  ওপেন করুন  এবং  "scripts" অবজেক্টের ভিতরে "test" :"echo \"Error: no test specified\" && exit 1” মুছে ফেলুন। এই লাইনটি  মুছে ফেলার  কারণ হচ্ছে   আমরা এই টিউটোরিয়ালে কোন পরীক্ষা(test) করব না। এর পরিবর্তে নিম্নের ন্যায় start এবং build কমান্ড যুক্ত করুন।

"start": "webpack-dev-server --mode development --open --hot",

"build": "webpack --mode production"

এটি একটি সাধারণ এইচটিএমএল ফাইল। আমরা div id = "app" কে আমাদের অ্যাপ্লিকেশনের জন্য মূল(root) উপাদান হিসাবে সেট করেছি এবং index_bundle.js স্ক্রিপ্ট যুক্ত করছি যা আমাদের বান্ডিল অ্যাপ্লিকেশন ফাইল।

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = 'index_bundle.js'></script>
   </body>
</html>
 

এটি React এর প্রথম কম্পোনেন্ট। আমরা পরবর্তী অধ্যায়ে সবগুলো  React কম্পোনেন্ট সম্বন্ধে  বিশদ ব্যাখ্যা করব। এই কম্পোনেন্ট  Hello World কে রেন্ডার করে।

App.js  
import React, { Component } from 'react';
class App extends Component{
   render(){
      return(
         <div>
            <h1>Hello World</h1>
         </div>
      );
   }
}
export default App;
 

আমাদের এই কম্পোনেন্টটি ইম্পোর্ট করতে হবে এবং এটি আমাদের মূল অ্যাপ এলিমেন্টে রেন্ডার করতে হবে, যাতে আমরা এটি ব্রাউজারে দেখতে পারি।

main.js

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

ReactDOM.render(<App />, document.getElementById('app'));
 

নোট  - আপনি যখনই কোনকিছু ব্যবহার করতে চাইবেন, আপনাকে প্রথমে এটি import করতে হবে। আপনি যদি অ্যাপটির অন্যান্য অংশগুলিতে উপাদানটি ব্যবহারযোগ্য করে তুলতে চান তবে আপনাকে তৈরির পরে এটি export করতে হবে এবং যে ফাইলে আপনি এটি ব্যবহার করতে চান সেখানে তা import করতে হবে।

Babelrc নামে একটি ফাইল তৈরি করুন এবং এতে নীচের কন্টেন্ট কপি করুন।

{

   "presets":["env", "react"]

}

সেটআপটি সম্পূর্ণ হয়ে গেছে। এখন আমরা নিম্নলিখিত কমান্ডটি চালিয়ে সার্ভারটি রান করতে পারি।

.

C:\Users\username\Desktop\reactApp>npm start

It will show the port we need to open in the browser. In our case, it is http://localhost:8001/. After we open it, we will see the following output. এটি ব্রাউজারে যে port খুলতে হবে তা প্রদর্শন করবে। আমাদের ক্ষেত্রে এটি http://localhost:8001/ । এটি খোলার পরে, আমরা নিম্নলিখিত আউটপুটটি দেখতে পাব।

অবশেষে, বান্ডিল তৈরি করতে আপনার কমান্ড প্রম্পটে নিম্নের ন্যায় build কমান্ড চালাতে হবে -

−

C:\Users\Satt\Desktop\reactApp>npm run build

এটি নীচের চিত্রের মতো বর্তমান ফোল্ডারে বান্ডিল তৈরি করবে।

create-react-app কমান্ডটি ব্যবহার করে

ওয়েবপ্যাক এবং ব্যাবেল ব্যবহার না করে আপনি আরও সহজে create-react-app ইনস্টল করে ReactJS ইনস্টল করতে পারেন।

ধাপ ১ -  create-react-app ইনস্টল

ডেস্কটপের মাধ্যমে ব্রাউজ করুন এবং কমান্ড প্রম্পটটি ব্যবহার করে নীচের মত করে create-react-app ইনস্টল করুন -

C:\Users\Satt>cd C:\Users\Satt\Desktop\

C:\Users\Satt\Desktop>npx create-react-app my-app

এটি ডেস্কটপে my-app নামে একটি ফোল্ডার তৈরি করবে এবং এতে প্রয়োজনীয় সমস্ত ফাইল ইনস্টল করবে।

ধাপ ২ - সমস্ত সোর্স ফাইল মুছে ফেলুন

উৎপন্ন My-app ফোল্ডারে src ফোল্ডারটি ব্রাউজ করুন এবং নীচের  মতো  করে এটি থেকে সমস্ত ফাইল সরিয়ে ফেলুন- 

 −

C:\Users\Satt\Desktop>cd my-app/src

C:\Users\Satt\Desktop\my-app\src>del *

C:\Users\Satt\Desktop\my-app\src\*, Are you sure (Y/N)? y

ধাপ ৩ - ফাইল যোগ করুন

src ফোল্ডারে index.css এবং  index.js নামের ফাইল যুক্ত করুন -

−

C:\Users\Satt\Desktop\my-app\src>type nul > index.css

C:\Users\Satt\Desktop\my-app\src>type nul > index.js

index.js ফাইলে নিম্নের কোড যোগ করুন।

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

ধাপ ৪ - প্রোজেক্ট রান করান

পরিশেষে, start কমান্ড ব্যবহার করে প্রোজেক্টটি রান করান।

npm start