বর্তমানে interactive UI বা SPA এর কথা চিন্তা করলেই আমাদের সবার প্রথম যে library বা framework এর কথা মাথায় আসে সেটা হলো REACT. REACT নিজেকে library হিসেবে দাবি করলে ও বর্তমান REACT eco-system খেয়াল করলে দেখা যায় যে REACT কোনো অংশেই একটি full-fledged framework থেকে কম নয়, আবার react eco-system এর উপর ভিত্তি করে বানানো বিভিন্ন meta-framework যেমন NextJs, Gatsby, Remix ও বেশ জনপ্রিয়।
বিভিন্ন টিউটরিয়াল, কোর্স বা বুটক্যাম্পে যেভাবে React শেখানো হয়, সেটার একটি downside হলো সেখানে প্রথমেই একটি build tool যেমন CRA (nobody uses cra nowadays), Vite অথবা even worst কোনো মেটা ফ্রেমওয়ার্ক যেমন NextJS দিয়ে React শেখানো শুরু করা হয়। যা আসলে React কীভাবে কাজ করছে এর উপর বড় একটা abstraction, যার ফলে বিগিনারদের কাছে অনেক জিনিসই 'ব্ল্যাক বক্স' হিসেবে মনে হয়।
React যে নিজেকে একটি লাইব্রেরি বলছে এর পিছনে একটি কারণ রয়েছে, React at it’s core শুধু UI rendering নিয়ে concerned. বাকি requirement গুলো ডেভেলপার নিজের ইচ্ছা মত integrate করতে পারে। So যখন আমরা কোনো build tool বা meta framework দিয়ে আমাদের react জার্নি শুরু করি তখন অনেক জিনিসই বাই ডিফল্ট দেয়া থাকে যা আমরা কেন ইউজ করছি তা না জেনেই ইউজ করা শুরু করি।
এই blog এ আমি চেষ্টা করব কোন build tool ছাড়াই আমরা কীভাবে react ইউজ করতে পারি এবং progressively কেন একটা build tool প্রয়োজন তা সম্পর্কে কিছুটা হলেও আইডিয়া দেয়ার।
So, শুরুতে আমরা একটা folder এ index.html নাম এ একটা file খুলে একটা boilerplate html template নেই। এর পর একটা empty div নিয়ে নিব যার id = “root”, এখানে একটা div নেয়া crucial কারণ আমরা যেকোনো react application যদি dev-tool দিয়ে open করি তাহলে দেখতে পাব যে যেকোনো React Application একটি parent div দিয়ে শুরু হয়, যাকে আমরা react এর mounting point বলতে পারি, মানে এখান থেকেই react এর শুরু (এ নিয়ে details এ জানতে হলে react কীভাবে DOM manipulate করে এটা নিয়ে ঘাঁটাঘাঁটি করতে পারেন )।
এর পর আমরা আমাদের application এ react এড করার জন্য html body তে দুইটা script tag ইউজ করব। ফার্স্ট টা হল react API যার মাধ্যমে আমরা react এর ফাংশন ইউজ করব আর পরের টা হল react-dom যেটা আসলে dom render করবে।
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Document</title>
7 </head>
8 <body>
9 <!-- Mounting Point of React -->
10 <div id="root"></div>
11
12 <!-- React Scripts -->
13 <script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
14 <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
15 </body>
16</html>React আর ReactDOM এর script এর নিচে আমাদের আরেকটা script tag লাগবে যেটায় আমরা আমাদের ফার্স্ট react component লিখবো কারণ react এর main premise ই হল ও javascript দিয়ে html render করে। একটু লজিকালি একটু চিন্তা করি, আমার কাছে React আছে যা আমাকে কিছু react api দিবে আর আমার কাছে ReactDOM আছে যার মাধ্যমে আমি HTML render করতে পারি। So high-level ওভারভিউ হল আমি React দিয়ে UI বানাবো আর ReactDOM দিয়ে ওইটা render করবো।
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Document</title>
7 </head>
8 <body>
9 <!-- Mounting Point of React -->
10 <div id="root"></div>
11
12 <!-- React Scripts -->
13 <script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
14 <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
15
16 <!-- React Component -->
17 <script>
18 const App = () => {
19 return React.createElement("h1", {}, "Hello To React");
20 };
21 const container = document.getElementById("root");
22 const root = ReactDOM.createRoot(container);
23 root.render(React.createElement(App));
24 </script>
25 </body>
26</html>এখানে App function এ আমরা একটা react element create করলাম, যার ফার্স্ট প্যারামিটার হল, আমি কি ধরনের html render করতে চাই, আমাদের ক্ষেত্রে যা হল একটা “h1” tag. সেকেন্ড প্যারামিটার এ আমার ওই html tag এর কোনো attribute যেমন id বা অন্য কিছু যদি দিতে চাই তাহলে দিতে পারি আর লাস্ট প্যারামিটার টা হল html tag এর ভিতরের content.
আগেই বলা হয়েছে যে “root” div টা হল আমাদের application এর starting পয়েন্ট so আমাদের ReactDOM কে বলে দিতে হবে যে এই “root” div টা হল আমাদের starting পয়েন্ট এবং root.render দিয়ে আমাদের বানানো App component টাকে render করতে।
এখন আমরা নতুন একটা folder, for example ‘src’ নেই যার মাঝে App.js নাম এ একটা js file নেই যার মাঝে আমাদের component কে নিয়ে যাই আর আমাদের html এর script tag এ App.js এর source দিয়ে দেই।
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Document</title>
7 </head>
8 <body>
9 <!-- Mounting Point of React -->
10 <div id="root"></div>
11
12 <!-- React Scripts -->
13 <script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
14 <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
15
16 <!-- React Component -->
17 <script src="./src/App.js"></script>
18 </body>
19</html>1// src/App.js
2
3const App = () => {
4 return React.createElement("h1", {}, "Hello To React from src");
5};
6const container = document.getElementById("root");
7const root = ReactDOM.createRoot(container);
8root.render(React.createElement(App));আরেকটা component বানানো যাক। App.js file এ আমরা নতুন একটা User component create করি।
1// src/App.js
2
3const User = () => {
4 return React.createElement("div", {}, [
5 React.createElement("h2", {}, "Name: A"),
6 React.createElement("h3", {}, "Id: 123"),
7 ]);
8};
9
10const App = () => {
11 return React.createElement("div", {}, [
12 React.createElement("h1", {}, "Hello React from src"),
13 React.createElement(User),
14 ]);
15};
16
17const container = document.getElementById("root");
18const root = ReactDOM.createRoot(container);
19root.render(React.createElement(App));এখানে User component একটা div যার ভিতর একটি h2 এবং h3 tag আছে এবং আমাদের App component এ আমরা এইটাকে React.createElement(User) দিয়ে কল করছি। এক ই ভাবে আমরা আরও component এড করতে পারি আমাদের react application এ।
এখন দেখা যাক কীভাবে আমরা App থেকে User এ ডাটা pass করতে পারি আর এই ডাটা show করতে পারি।
1// src/App.js
2
3const User = (props) => {
4 return React.createElement("div", {}, [
5 React.createElement("h2", {}, `Name: ${props.name}`),
6 React.createElement("h3", {}, `Id: ${props.id}`),
7 ]);
8};
9
10const App = () => {
11 return React.createElement("div", {}, [
12 React.createElement("h1", {}, "Hello React from src"),
13 React.createElement(User, {
14 name: "A",
15 id: 123,
16 }),
17 React.createElement(User, {
18 name: "B",
19 id: 456,
20 }),
21 React.createElement(User, {
22 name: "C",
23 id: 789,
24 }),
25 ]);
26};
27
28const container = document.getElementById("root");
29const root = ReactDOM.createRoot(container);
30root.render(React.createElement(App));এখানে আমরা তিনটা ইউজার create করলাম আর ইউজার গুলার properties এ ডাটা দিয়ে দিলাম যেটা আমরা User component এ collect করে render করলাম। এখন আমরা চাইলেই multiple components add করতে পারি ওইগুলোর props দিতে পারি এবং render করতে পারি।
একটা জিনিস আমরা খেয়াল করলে দেখতে পারব যে এই approach টা তেমন intuitive না, প্রতিবার আমরা new component create করতে হলে React.createElement() call করে এতে html tag দেয়া, properties দেয়া আবার same component call করতে হলেও React.createElement() call করা component pass করা… you know what I mean. এখান থেকেই JSX এর শুরু। JSX আমাদের same code ই আরও initiative way তে লিখতে সাহায্য করে। আর এই JSX code কে transpile করে আমরা বিভিন্ন build tool এর সাহায্য নিয়ে থাকি।
এখন পর্যন্ত আমরা script tag দিয়ে react ইউজ করছিলাম, এখন আমরা react as a package install করে ইউজ করব। So, package install করলে আমাদের অনেক dependency থাকবে ওইগুলা কে manage করতে আমরা একটা package manager, for example, npm ইউজ করতে পারি। So, npm init -y দিয়ে আমরা npm add করে নিব আমাদের project এ।
npm install react react-dom command দিয়ে আমরা React r ReactDOM install করে ফেলতে পারি যেটা এত সময় আমরা script tag দিয়ে ইউজ করছিলাম। তাহলে এখন র আমাদের script tag এর কোনো দরকার নেই so আমরা script tag দুইটা কেটে দিতে পারি আর যেহেতু আমরা import export ইউজ করব যা হল ES modules তাই আমাদের index.html এ যেখানে App.js এর script tag আছে ওইখানে type="module" দিয়ে দিব। এবং App.js এ এসে আমরা React r ReactDOM import করবো।
1import React from "react";
2import ReactDOM from "react-dom";এখন আসা যাক JSX এ। আমরা সবাই ই জানি browser শুধু javascript ই read করতে পারে, এখন আমরা যদি JSX ইউজ করি এইটা ত আর valid javascript না so browser ও এইটা read করতে পারে না। Build tool আমাদের help করে JSX কে regular JS এ convert করতে যেটা browser বুঝবে ( তবে build tool এছাড়া ও অনেক কাজ করে )।
তাহলে একটা build tool install করা যাক।
npm install vite@latest আর npm install @vitejs/plugin-react@latest দিয়ে আমরা vite আর vite এর react plugin install করে ফেলি। Vite দিয়ে React ইউজ করার জন্য vite এর ছোটখাটো একটা configuration দরকার হয় এর জন্য আমরা আমাদের project এর root এ vite.config.js file খুলে ওইটায়
1// vite.config.js
2
3import { defineConfig } from "vite";
4
5import react from "@vitejs/plugin-react";
6
7export default defineConfig({
8 plugins: [react()],
9});এই configuration টা দিতে পারি। এইটা জাস্ট ensure করে আমরা vite আর vite এর react plugin ইউজ করতেছি। এখন আমাদের package.json file এ “dev”: “vite” নাম এ একটা script এড করি।
1"scripts": {
2 "dev": "vite",
3 "test": "echo \"Error: no test specified\" && exit 1"
4 },এখন চেক করা যাক vite কাজ করছে কিনা। Terminal এ গিয়ে npm run dev দিলে vite ready লেখা আসবে r localhost এ একটা port show করবে যেটায় আমাদের আগের react code run করছে।
এখন একে একে আমাদের User আর App component কে যদি আমরা JSX এ convert করি তাহলে দেখা যাক কি হয়। User এর জন্য একটা নিউ User.jsx file create করে ফেলি (totally optional).
1// User component in JSX
2
3import React from "react";
4const User = (props) => {
5 return (
6 <div>
7 <h2>Name: {props.name}</h2>
8 <h3> Id: {props.id}</h3>
9 </div>
10 );
11};
12
13export default User;App.js এখন হয়ে যাবে App.jsx. তার সাথে আমাদের index.html file এর script এর src তে ও App.jsx দিতে হবে কারণ jsx extension থাকলেই vite এই file কে transpile এর সময় consider করবে।
1// App.jsx
2
3import React from "react";
4import ReactDOM from "react-dom";
5import User from "./User";
6
7const App = () => {
8 return (
9 <div>
10 <h1>Hello React from src</h1>
11 <User name="A" id="123" />
12 <User name="B" id="456" />
13 <User name="C" id="789" />
14 </div>
15 );
16};
17
18const container = document.getElementById("root");
19const root = ReactDOM.createRoot(container);
20// Remove React.createElement and use JSX component
21root.render(<App />);এখন আমরা যদি run করি তাহলে আমরা আমাদের আগের output ই দেখতে পারব। মূলত vite jsx file গুলাকে transpile করে আমাদের আগের লেখা React.createElement টাইপ এর er file এ ই convert করে।
আশা করি এই ব্লগ এর মাধ্যমে কিছুটা হলে ও react under the hood কীভাবে কাজ করে + build tool আমরা কেন ইউজ করি বা build tool আসলে কি করে এইটা নিয়ে একটা idea দিতে পারসি।