DEV Community

Cover image for React js in Bangla
Arifur Rahman
Arifur Rahman

Posted on

React js in Bangla

কেন react useful ? কেন react lagbe ? 

 <div class="container">
      <div>
        <h1 id="display">0</h1>
        <div>
          <button id="button">Increment +</button>
        </div>
      </div>
 </div>


    <script>
      const display = document.getElementById("display");
      const button = document.getElementById("button");
      let counter = 0;

      button.addEventListener("click", function () {
        counter++;
        display.textContent = counter;
      });
    </script>
Enter fullscreen mode Exit fullscreen mode

একটা মাত্র counter এর জন্যে এভাবে টিক আছে । কিন্ত
এটা লার্জার application এর জন্যে applicable না ।

যদি আমাদের aro একটা কাউন্টার এর দরকার হয় । তাহলে আমাদের aro একটা counter ক্রিয়েট করা লাগবে । তারপর id আর class golo change করা লাগবে । তারপর js file এ id আর class গলো change করা লাগবে

 <!-- কেন react useful ? কেন react lagbe ? -->
    <div class="container">
      <div>
        <h1 id="display">0</h1>
        <div>
          <button id="button">Increment +</button>
        </div>
      </div>
    </div>

    <!-- another counter create(if i create with same name it will show error) -->
    <div class="container1">
      <div>
        <h1 id="display1">0</h1>
        <div>
          <button id="button1">Increment +</button>
        </div>
      </div>
    </div>
    <script>
      const display = document.getElementById("display");
      const button = document.getElementById("button");
      let counter = 0;

      button.addEventListener("click", function () {
        counter++;
        display.textContent = counter;
      });

      //   another counter create(if i create with same name it will show error)
      const display1 = document.getElementById("display1");
      const button1 = document.getElementById("button1");
      let counter1 = 0;

      button1.addEventListener("click", function () {
        counter1++;
        display1.textContent = counter1;
      });
    </script>
Enter fullscreen mode Exit fullscreen mode

এটা লার্জার application এর জন্যে applicable না ।সে জন্যে react আসছে

whyNeedReactandProblemSolve এই branch e amrar react js add korbo (uporer counter system ta amra vanilla js diye korecilam ta akon amra korbo react js diye)

how to add react js

add react to a website

with cdn 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="root"></div>
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  <script src="counter.js"></script>

</body>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

counter js file

console.log(React);
console.log(ReactDOM);

const domContainer = document.querySelector('#root');
// render: ƒ render(element, container, callback)
// render() method 2ta parameter recive kore 1.ki print korbe 2. kon jaigai print korbo
ReactDOM.render('hello world', domContainer);
Enter fullscreen mode Exit fullscreen mode

Screenshot 2023-04-24 203323

both are object

React হল htmlগলো generate করবে আর create করবে

Screenshot 2023-04-24 204620

ReactDOM হল আমাদের browser এর dom এ render করবে যেন আমরা ডেকতে পাই

Screenshot 2023-04-24 204824

তাহলে ২ টা আলাদা কেন ? কারণ react সুদমাত্র browser এর জন্যে বানান হয় নাই । react mobile এর জন্য ও বান্নান হয়েছে । তখন আমরা ReactDOM এর পরিবর্তে ReactNative use করব

আমরা always use করব react । ৯০% কাজ করবে react . এবং বাকি কাজ করবে ReactDOM display করার জন্যে

note

ReactDOM.render is no longer supported in React 18

render: ƒ render(element, container, callback)

result

Screenshot 2023-04-24 205214

ReactDOM diye amra sodomatro text render korechi . কিন্তু আমরা চাইলে যে কুন কিছ render করতে পরি । তার জন্যে আমরা use করব React library . react amader kicho useful function diyeche jegolo diye amra react element banate pari

react.createElement()

lets create first react element with react.createElement

console.log(React);
console.log(ReactDOM);

const domContainer = document.querySelector('#root');
const myElemnt = React.createElement("div",null,"hello world3");

ReactDOM.render(myElemnt, domContainer);
Enter fullscreen mode Exit fullscreen mode

React.createElement এর মদ্যমে আমরা আমদের এলিমেন্ট create করলাম. এখানে আমরা React.createElement() এর মদ্যে ৩ টা parameter পাঠাবো । । ১.কি এলিমেন্ট ক্রিয়েট করতে চাচী । আমরা div এলিমেন্ট create করতে চআছি ২.কি datatype পাস করতে হবে ৩.সেই এলিমেন্ট এর ভেতরে কি কন্টেন্ট থাকবে।

এখানে আমরা react এলিমেন্ট create করলাম । html এলিমেন্ট না

last এ আমরা ReactDOM কে বলে দিলাম myElement কে root div এ render কর

ReactDOM.render(myElemnt, domContainer);
Screenshot 2023-04-24 205414

কিভাবে React.createElement() এর মদ্যমে div এর মদ্যে p add korbo 

    <div id="root"></div>
    <div id="root2"></div>
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  <script src="counter.js"></script>
Enter fullscreen mode Exit fullscreen mode

counter.js

console.log(React);
console.log(ReactDOM);

const domContainer = document.querySelector('#root');
const myElemnt = React.createElement("div",null,"hello world3");
ReactDOM.render(myElemnt, domContainer);


// div এর মদ্যে p add করতে চাচী
const domContainer2 = document.querySelector('#root2');
const myElemnt2 = React.createElement("div", null, React.createElement("p",null,"hello world4"));
ReactDOM.render(myElemnt2, domContainer2);
Enter fullscreen mode Exit fullscreen mode

Screenshot 2023-04-24 205604

যদি div এর মদ্যে ২ টা p দিতে চাই 

 <body>
    <div id="root"></div>
    <script
      src="https://unpkg.com/react@18/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="counter.js"></script>
  </body>
Enter fullscreen mode Exit fullscreen mode

counter.js

const domContainer = document.querySelector('#root');
const myElemnt = React.createElement("div", null,[
    React.createElement("p", null, "hello world"),
    React.createElement("p", null, "hello world")
]);
ReactDOM.render(myElemnt, domContainer);
Enter fullscreen mode Exit fullscreen mode

React library টা any react element create kore dei আর
ফাইনালি ReactDOM react element recive করে সেটা কে আমদের browser dom এর জন্যে html element বানিয়ে দেয় মানে browser e render kore dei

ReactDOM এর জায়গায় মোবাইল এর জন্যে আমরা ইউজ করতে পরি ReactNative

এখন question হল react দিয়ে আমরা এভাবে এলিমেন্ট create করে আমাদের লাভ কি ? 

const domContainer = document.querySelector('#root');
const myElemnt = React.createElement("div", null,[
    React.createElement("p", null, "hello world"),
    React.createElement("p", null, "hello world")
]);
ReactDOM.render(myElemnt, domContainer);
Enter fullscreen mode Exit fullscreen mode

এভাবে করলে জিনিসটা আরো কোটিং হয়ে গেল । আমরা যখন html লিখি dom কিন্ত আমাদের এভাবে এইচটিএমএল এলিমেন্ট ক্রিয়েট করে

suppose:

const domContainer = document.querySelector('#root');
let p = document.createElement("p");
p.innerHTML = "hello vanilla js";
domContainer.appendChild(p);
Enter fullscreen mode Exit fullscreen mode

result

Screenshot 2023-04-24 205754

html এ আমরা এভাবে ই লিখী । কারণ এই সীনটেক্স টা মদের জন্যে সহজ


<div id="root">
   <p>hello vannilla js</p>
</div>
Enter fullscreen mode Exit fullscreen mode

আমরা এভাবেই লিখী কিন্ত ব্রাউজার আমাদের এইচটিএমএল এলিমেন্ট parse kore createElement er madoome element create kore

const domContainer = document.querySelector('#root');
   let p = document.createElement("p");
   p.innerHTML = "hello vanilla js";
   domContainer.appendChild(p);
Enter fullscreen mode Exit fullscreen mode

html সদমাত্র আমাদের এই কাজটা কে সহজ করে দেয়
একটা সহজ সীটেক্টটিক সুগার দেয় যাতে আমরা সহজে UI টা বানাতে পরি

react o same ভাবে তার createElement function diye নিজের জন্যে এলিমেন্ট বানিয়ে নেই এবং সব এলিমেন্ট জোড়া লাগিয়ে তার একটা seperate DOM create kore । এটাকে বলে VIRTUAL DOM

আমরা html element বানাই html markup syntex diye . টিক তেমনি react o amader তাদের একটা markup syntex দিয়েছে যেটা দিয়ে আমরা markup syntex element বানাতে পারি । এটাকে JSX - JAVASCRIPT XML বলে । যেটা ডেকতে ৯০% html এর মতো কিন্ত html না ।

JSX use করে আমরা react element banate pari

// ! create react element using jsx
const myElement = (
    <div>
        <h1 id="display">0</h1>
        <div>
            <button>Increment + </button>
        </div>
    </div>

)
Enter fullscreen mode Exit fullscreen mode

first bracket এর ভেতরে রেখে একটা variable এর ভেতরে রাখলে এটা createElement call kore kore একটা react এর এলিমেন্ট ক্রিয়েট করে দিবে

jsx যদি না তাকত তবে আমাদের এভাবে React.createElement() লিকতে হয়তো


React.createElement(
  "div",
  null,
  React.createElement(
    "h1",
    {id : display,
    },
    "0"
  ),
  React.createElement(
    "div",
    null,
    React.createElement(
      "button",
      {
        id : "button",
      }
      "Increment +"
    )

  )
)
Enter fullscreen mode Exit fullscreen mode

কিন্ত কথা হচ্ছে এই কোডেটা জাভাস্ক্রীপ্ট ফাইল এ লিকচি কিন্ত জাভাস্ক্রীপ্ট jxs কোড বুজে না

const myElement = (
    <div>
        <h1 id="display">0</h1>
        <div>
            <button>Increment + </button>
        </div>
    </div>

)
ReactDOM.render(myElement, domContainer);
Enter fullscreen mode Exit fullscreen mode

সেই জন্যে আমাদের use করতে হবে transpiler যেমন-bable ।
babel এই jsx কে vanilla javascript এ transpile করবে

Screenshot 2023-04-24 211737

transpile করার জন্যে আমরা babel ওয়েবসাইট এর সেটাপ এ গিয়ে লিংক টা কপি করে আমাদের index। html ফাইল rakbo

https://babeljs.io/setup/#installation

  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel" src="counter.js"></script>
Enter fullscreen mode Exit fullscreen mode

type="text/babel" টাইপ="টেক্সট/বাবেল" দিব

সদারণত থাকে type="text/js"

counter.js file ta babel diye gore asbe

const myElement = (
    <div class="container">
        <h1 id="display">0</h1>
        <div>
            <button>Increment + </button>
        </div>
    </div>

)
ReactDOM.render(myElement, domContainer);
Enter fullscreen mode Exit fullscreen mode

still why we use react ?

আমাদের এই কাউন্টার এর বাটন এ ক্লিক করলে increment হবে তা কিভাবে করব । এই ফাংশনালিটি গুলো কোথায়
অদ্য করব

const domContainer = document.querySelector('#root');
// ! create react element using jsx
const myElement = (
    <div class="container">
        <h1 id="display">0</h1>
        <div>
            <button>Increment + </button>
        </div>
    </div>

)
ReactDOM.render(myElement, domContainer);
Enter fullscreen mode Exit fullscreen mode

myElement টা কে simply Increment নামে function এর মদ্যে নিয়ে sekan theke return kore debo নেব.
এর পর ReactDOM.render(Increment(), domContainer); এ increment() function ক্ call kore debo

const domContainer = document.querySelector('#root');
// ! create react element using jsx
const Increment = () => {
    return(<div class="container">
        <h1 id="display">0</h1>
        <div>
            <button>Increment + </button>
        </div>
    </div>)
};
ReactDOM.render(Increment(), domContainer);
Enter fullscreen mode Exit fullscreen mode

still kaj korbe
Increment() না লিখে এভাবে লিকতে পারবে । এটা jsx এ call করার সিস্টেম

kaj korche

Screenshot 2023-04-25 001619

button a click korle kivabe increment hobe

```let num = 0;
const display = document.querySelector("#display");
const button = document.querySelector('#button');

button.addEventListener('click', function () {
num++;
display.textContent=num
})




ei code ta increment function er niche bosate hobe.ReactDOM.render(<Increment />, domContainer); এর ও নিচে বসতে হবে

যেমন



```sh
const domContainer = document.querySelector('#root');
// ! create react element using jsx
const Increment = () => {
    return(<div className="container">
        <h1 id="display">0</h1>
        <div>
            <button id="button">Increment + </button>
        </div>
    </div>)
};
ReactDOM.render(<Increment />, domContainer);

let num = 0;
const display = document.querySelector("#display");
const button = document.querySelector('#button');

button.addEventListener('click', function () {
    num++;
    display.textContent=num
})
Enter fullscreen mode Exit fullscreen mode

এখন কাজ করবে । কিন্ত কাজ করলেও system টা ত আগের মতো vanilla js এর মতো রইল । এখন আমাদের dom element দরতে হচ্ছে const display = document.querySelector("#display");
dom এ manually content render করতে হচ্ছে display.textContent=num

এবং counter এক এর বেশি হলে আবার কোড dublicate করতে হচ্ছে

তাহলে react এখানে আমাদের কি বেনিফিট দিচ্ছে। befinte পাচ্ছিনা কারণ আমরা react এর সবগলো এখন ও use করি নাই

most important হল আমরা state কে use করি নাই

তাহলে state কি জিনিস । state হল data যা আমরা আমাদের ui এ ইউজ করি

এখানে একটাই state আছে তা হল num=0 । কারণ এই একটাই data change হচ্ছে । এবং সেটার উপর base করে content এর data change হচ্ছে

আমাদের html element এ আমাদের onekgolo state variable থাকতে পারে । react আমাদের এগোল niye কাজ করতে হেল্প করে ।
react বলছে তুমি যদি আমার way তে কাজ কর তবে তোমাকে dom নিয়ে কোন কাজ করতে হবে না । dom react নিজে manage করে । আমরা যদি সময়মতো state change করে দিয়ে react dom manage করে দিবে

lets see how react work for us

const domContainer = document.querySelector('#root');
// ! create react element using jsx
const Increment = () => {
    const reactState = React.useState();
    return(<div className="container">
        <h1 id="display">0</h1>
        <div>
            <button id="button">Increment + </button>
        </div>
    </div>)
};
ReactDOM.render(<Increment />, domContainer);

// let num = 0;
// const display = document.querySelector("#display");
// const button = document.querySelector('#button');

// button.addEventListener('click', function () {
//     num++;
//     display.textContent=num
// })
Enter fullscreen mode Exit fullscreen mode

আমরা নিচের কোড কমেন্ট করে দেব র increment ফাংশন এর বেতরে একটা variable'নিব reactState নামে ।
তাতে assign করব react এর building মেথড useState React.useState()

এই useState() মেথড টা আমাদের increment ফাংশন এর state manage করে দিবে

useState() এ bydefault একটা value দিয়ে দিতে হয় যেটা আমাদের react state এর default ভ্যালু হিসাবে initially set করে রাখে

এখানে আমাদের state হল num variable টা । so আমরা সেটার ভ্যালু bydefault useState কে দিয়ে দিলাম 0 ।

আমরা চাইলে এখানে useState()এ আমরা যেকোন ভ্যালু দিয়ে দিতে পারব । হতে পারে এটা array , object ,string or null or anything ।

const domContainer = document.querySelector('#root');
// ! create react element using jsx
const Increment = () => {
    const reactState = React.useState(0);
    console.log(reactState);
    return(<div className="container">
        <h1 id="display">0</h1>
        <div>
            <button id="button">Increment + </button>
        </div>
    </div>)
};
ReactDOM.render(<Increment />, domContainer);
Enter fullscreen mode Exit fullscreen mode

const reactState = React.useState(0);

console.log(reactState);

Screenshot 2023-04-25 090531

useState() ফাংশটা আমাদের একটা array return করছে যার দুইটা element আছে

প্রথমটা হল আমাদের state এর value টা ।
দিতীয়টা হল একটা function । এই ফাংশনটর কাজ হল যে parameter আমরা এই ফাংশন
কে দিব সে ওই value টা আমাদের state এ update করে দিবে

এর মানে হল এই function টা আমাদের state এর counter এর value টা আপডেট করে দিতে
help করে

array destructure

array destruring করে আমরা দুইটা জিনিস কে আলাদা করে দুইটা
variable এর মদ্যে নিয়ে নিলাম

const domContainer = document.querySelector('#root');
// ! create react element using jsx
const Increment = () => {
    // const reactState = React.useState(0);
    const [counter,setCounter] = React.useState(0);
    return(<div className="container">
        <h1 id="display">{counter}</h1>
        <div>
            <button id="button">Increment + </button>
        </div>
    </div>)
};
ReactDOM.render(<Increment />, domContainer);
Enter fullscreen mode Exit fullscreen mode

array destruring করে আমরা দুইটা জিনিস কে আলাদা করে দুইটা
variable এর মদ্যে নিয়ে নিলাম

const [counter,setCounter] = React.useState(0);

তাহলে কাউন্টার এর ভেতরে থাকছে initial value 0 আর এবং
secondly setCounter variable টা হল একটা function । যেটা দিয়ে আমরা counter এর value টা change করতে পরি

{counter} interpolation এর modde counter variable টা দিলে আমরা initial value 0 পেয়ে যাব

কিভাবে বাটন এ ক্লিক করলে counter update হবে

Increment +
বা
Click me

javascript এ amra onclick এভাবে লিখি

jsx এ

setCounter(counter + 1) }> Increment +

এভাবে লিখতে হবে কারণ এটা jsx । onClick এর C capital hobe equel = dite hobe
তারপর { } interpolation দিতে হবে
setCounter(counter + 1 ) কল করতে হবে । কিন্ত এভাবে call করে দিলে runtime এ এটা কল হয়ে যাবে ।
so আমরা চাচ্ছি যখন বাটন এ ক্লিক করবে তখনই fire হবে । তার জন্যে ()=> arrow function এর মদ্যে দিতে হবে টা setCounter(counter + 1) এই ফাংশন কে রিটার্ন করবে । যাতে call না হয়ে যায়

setCounter(counter + 1) }> Increment + 

const domContainer = document.querySelector('#root');
// ! create react element using jsx
const Increment = () => {
    // const reactState = React.useState(0);
    const [counter,setCounter] = React.useState(0);
    return(<div className="container">
        <h1 id="display">{counter}</h1>
        <div>
            <button id="button" onClick={()=>setCounter(counter + 1) }> Increment + </button>
        </div>
    </div>)
};
ReactDOM.render(<Increment />, domContainer);
Enter fullscreen mode Exit fullscreen mode

Screenshot 2023-04-25 111308

তাহলে react use করে কি সবিধা টা হল ?

প্রথম সুবিধাটা হল আমাদের কে manually dom এর কোন element দরতে হবে না যেমন -
const display = document.querySelector("#display");
display.textContent=num

এভাবে করতে হল না

let num = 0;
const display = document.querySelector("#display");
const button = document.querySelector('#button');

button.addEventListener('click', function () {
    num++;
    display.textContent=num
})
Enter fullscreen mode Exit fullscreen mode

এটা করা লাগবে না

প্রথম সুবিধাটা হল আমাদের কে manually dom এর কোন element দরতে হবে না আর state আর counter এর
value change হলে manually dom এ render করা লাগলো না । আমাদের old js file এ বারবার manually dom
update করা লাগছে । react এ আমরা ভ্যালু টা change করছি reactdom নিজে নিজে তা dom এ আপডেট করে দিচ্ছে
। মনে reactive সে । এটা হল first benifit

react এর main beauty টা হল - আমরা যদি চাই এই কাউন্টার একটার জায়গায় অনেকগোল লাগবে তাহলে component টা কয়েকবার লিখলে চলবে । যেমন --

ReactDOM.render(
    <div>
    <Increment />
    <Increment />
    <Increment />
    </div>
   ,
    domContainer
   );
Enter fullscreen mode Exit fullscreen mode 
const domContainer = document.querySelector('#root');
// ! create react element using jsx
const Increment = () => {
    // const reactState = React.useState(0);
    const [counter,setCounter] = React.useState(0);
    return(<div className="container">
        <h1 id="display">{counter}</h1>
        <div>
            <button id="button" onClick={()=>setCounter(counter + 1) }> Increment + </button>
        </div>
    </div>)
};
ReactDOM.render(
    <div>
    <Increment />
    <Increment />
    <Increment />
    </div>
   ,
    domContainer
   );
Enter fullscreen mode Exit fullscreen mode

Screenshot 2023-04-25 234816

টিকমত কাজ করছে আর every state টিক মতো manage হচ্ছে । এক এক জায়গায় কাউন্টার এর ভ্যালু এক এক রকম
আমাদের কোন কোড dublicate করা লাগলোনা । তারমানে আমরা পুরো functionality সহ self contain block of component বানাতে পারছি । যার দনিয়া সম্পর্ন আলাদা তাখছে আর differnt দনিয়া create করতে পারছে component call করে। মনে আমরা কম্পোনেন্ট কে reuse করতে পারছি । তাই react কে component library বলা হয়

একটা react application এ multiple component থাকবে আর সবাই self contain functionality নিয়ে বসে থাকবে । একটা react component কে আমরা separate appliction ও বলতে পরি। আমরা একবারে component টা
লিখব আর যতবার প্রয়োজন আমরা component টা কে আমাদের application এ reuse করব

component গলো একবারে আলাদা হওয়ার কারণে বড় team এ separate developer separate component নিয়ে
কাজ করতে পারবে । finally egolo কে জোড়া লাগিয়ে একটা বিশাল web application বানান possible হয়।
এটাই react js এর beauty

Top comments (0)

Read next

leemeganj profile image

Developing modals using only CSS and the Popover API

Megan Lee -

priya01 profile image

Spring Boot Meets Firebase: My Journey of Building a File Upload System🚀

Priya -

info_generalhazedawn_a3d profile image

What Is Performance Testing? Improving Stability and Reliability of Your App 🚀

Info general Hazedawn -

sertxudev profile image

Reduce bitrate using FFMPEG

Sergio Peris -