How to Install Material UI in React in Easy Bengali | Material UI কি? 2024

React এ Material UI হল একটি জনপ্রিয় লাইব্রেরি যা Google এর Material ডিজাইন নীতির উপর ভিত্তি করে React এর উপাদান প্রদান করে।আপনি কি একজন ডেভেলপার হতে চান কিন্তু জানেন না Material UI কী? এই ব্লগ এ আমরা বিশদভাবে Material UI কি এবং এর ব্যবহার, সুবিধা এবং Syntax সম্বন্ধে আলোচনা করেছি।

Material UI কি?

Material-UI হল একটি Open-Source Framework যার Github এ প্রায় 60,000 টিরও বেশি Stars রয়েছে, এটি একটি React এর উপাদান Front-End লাইব্রেরির যা Google এর Material ডিজাইন নীতির উপর ভিত্তি করে তৈরী করা হয়েছে।

Material UI মূলত কাস্টমাইজ যোগ্য UI উপাদানগুলি প্রদান করে যেমন – বাটন, ফর্ম, নেভিগেশন বার ইত্যাদি। এর উপাদানগুলি Material ডিজাইন কে  অনুসরণ করে , যা একটি আধুনিক এবং সামঞ্জস্যপূর্ণ চেহারা প্রদান করে।

Material UI অ্যাপ্লিকেশনটিকে প্রতিক্রিয়াশীল এবং Interactive ডিজাইন প্রদানে সাহায্য করে যাতে UI উপাদানগুলি বিভিন্ন স্ক্রিনের আকারের সাথে সামঞ্জস্য ভাবে চলতে পারে। এটিকে এমন ভাবে তৈরী করা হয়েছে যাতে বিভিন্ন প্ল্যাটফর্ম যেমন – ডেস্কটপ, ট্যাবলেট, মোবাইল ইত্যাদিতে User-Friendly ইন্টারফেস তৈরি করা যায়।

কেন আপনি Material UI নির্বাচন করবেন?

Material UI এর built-in-design এবং সহজ বাস্তবায়নের জন্য বেশিরভাগ developers দের কাছে এটি প্রথম পছন্দসই হয়ে উঠে। অন্তর্নির্মিত Elements গুলি পরিবর্তনযোগ্য তাই এটি সহজেই ডিজাইনগুলি পুনর্নির্মাণ করতে সহায়তা করে। Material UI এর বিভিন্ন সুবিধার মধ্যে একটি হলো এটি পুরানো Elements গুলি সহজে আপগ্রেড করার অনুমতি দেয়। Material UI প্রবর্তনের পর থেকে React অ্যাপ্লিকেশনগুলির বিকাশ দ্রুত হরে বেড়েছে।

Also Read :- Learn Basic UI and UX in Easy Bengali 2024

Responsive Material UI এর বৈশিষ্ট্য

• Customizable: Template গুলো সহজেই কাস্টমাইজ যোগ্য এবং Template গুলো পরিবর্তন করতে খুব কম Coding এর প্রয়োজন।
• Responsive: Built-in উপাদানগুলি Default ভাবে প্রতিক্রিয়াশীল ফলে বিভিন্ন স্ক্রিনের ভিত্তিতে ওয়েব অ্যাপ্লিকেশন তৈরি করা সহজ।
• Fast Loading: অন্যান্য Framework এর তুলনায় এর উপাদানগুলির লোডিং অনেক দ্রুত।
• Theme: বিভিন্ন ধরনের থিম এবং সহজে পরিবর্তনশীল।

Material UI এর সুবিধা

React এ Material UI ব্যবহার করার বিশেষ কিছু সুবিধা রয়েছে। আমরা আরও ভালো করে বোঝার জন্য বিশেষ কিছু বৈশিষ্ট্য নিয়ে আলোচনা করেছি।

1. Material UI তে কাস্টমাইজ-যোগ্য বিভিন্ন Element রয়েছে যেমন বাটন, ফর্ম, কার্ড প্রভৃতি। এটি Scratch থেকে UI উপাদান প্রদান করে যা Developers দের সময় বাঁচাতে ও খাটনি কমাতে সাহায্য করে।
2. Material UI-এর উপাদানগুলি Google-এর Material ডিজাইন এর নিয়মগুলি অনুসরণ করে যেটি React অ্যাপ্লিকেশনগুলিতে একটি আধুনিক এবং একটি সুন্দর ডিসাইন তৈরী করে।
3. Material UI সহজেই React প্রজেক্টগুলোর একসাথে কাজ করতে পারে। যা একজন ডেভেলপারের কাজকে অনেকেটাই সহজ করে দেয়।
4. Material UI প্রতিক্রিয়াশীল ডিজাইন প্রদানে সাহায্য করে যার ফলে UI উপাদানগুলি বিভিন্ন স্ক্রিনের আকার এবং ডিভাইস যেমন – ডেস্কটপ, ট্যাবলেট, মোবাইল ইত্যাদির সাথে সামঞ্জস্যতা বজায় রাখে।
5. Developers রা তাদের ডিজাইনের প্রয়োজনীয়তা অনুযায়ী Material UI উপাদানগুলি পরিবর্তন করতে পারে। এবং একটি নতুনত্ব ডিজাইন তৈরি করতে পারে।
6. Material UI এর Developers দের একটি বৃহৎ এবং সক্রিয় Community রয়েছে। এটি লাইব্রেরির উন্নতি, Bug ফিক্স এবং নিয়মিত আপডেট পেতে সাহায্য করে।
7. Material UI-তে বিভিন্ন বৈশিষ্ট্য রয়েছে যেমন – কোড বিভাজন, Lazy লোডিং এবং Server-Side রেন্ডারিং ইত্যাদি। এই বৈশিষ্ট্যগুলি React অ্যাপ্লিকেশনগুলিতে মসৃণ এবং দ্রুত ব্যবহারকারীর অভিজ্ঞতা নিশ্চিত করে।

React এ Material UI কীভাবে ব্যবহার করবেন?

আমরা ধাপে ধাপে Material UI এর Process গুলো নিয়ে আলোচনা করব যা আপনাকে Project তৈরিতে সাহায্য করবে।

1. Create a React Application:  প্রথমে একটি টুল ব্যবহার করে  React অ্যাপের মতো একটি React অ্যাপ্লিকেশন তৈরি করুন এবং একটি নাম দিন।

npx create-react-app my_app

2. Install Material UI: এই ধাপে, একটি টার্মিনালে আপনার Project টি Open করুন এবং এটিতে Material UI ইনস্টল করুন। আপনি এটার জন্য npm বা yard ব্যবহার করতে পারেন। Yard ব্যবহার করে Install করার Syntax দেওয়া হল-

yarn add @material-ui/core

• Material UI ব্যবহার করার আগে, আমি আপনাকে আপনার ব্যবহৃত ফন্টকে Roboto ফন্ট এ পরিবর্তন করার পরামর্শ দেব কারণ Material-UI এর উপাদানগুলি Roboto ফন্ট এ স্টাইল করা হয়েছে।
• Roboto তে পরিবর্তন করতে, আপনাকে index.html এ যেতে হবে এবং সেখানে নিম্নলিখিত লাইনটি Add করতে হবে:

<link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Roboto:300,400,500″>

3. Import Material-UI Components: আপনার React উপাদানে Material UI থেকে প্রয়োজনীয় উপাদান গুলো Import করুন।

উদাহরণস্বরূপ, একটি বাটন ব্যবহারের জন্য আপনি নিম্নের Syntax টি ব্যবহার করতে পারেন।import Button from ‘@mui/material/Button’;

এখন আপনি আপনার React Project এ Material UI ব্যবহার করতে পারবেন, আপনি যতগুলি চান তত উপাদান Import করতে পারবেন এবং সেগুলি আপনার Project এ ব্যবহার করতে পারবেন।

Material UI ব্যবহার করার উদাহরণ

নিম্নে আপনার ধারণাকে আরো সুদৃঢ় করার জন্য নীচে Material UI ব্যবহার করে একটি নেভিগেশন বার তৈরির উদাহরণ দেওয়া হল।

import React from 'react';
import ReactDOM from 'react-dom';
import { AppBar, Toolbar, Button, Typography } from '@mui/material';
function NavigationBar() {
return (
    <AppBar position="static">
      <Toolbar>
        <Typography variant= "h6" component= "div" sx={{ flexGrow: 1 }}>
          My Website
        </Typography>
        <Button color="inherit">Home</Button>
        <Button color="inherit">About</Button>
        <Button color="inherit">Services</Button>
        <Button color="inherit">Contact</Button>
      </Toolbar>
    </AppBar>
);
}
ReactDOM.render(<NavigationBar />, document.getElementById('root'));

চলুন আরেকটি উদাহরণ দেখে নিই। এই উদাহরণে আমরা আমাদের অ্যাপ্লিকেশনে ‘material-ui/core’ থেকে একটি বাটন Import করব। ‘Button’ হল Component এর যা আপনি ‘material-ui/core’ থেকে Import করতে পারেন:

import React from 'react';
import { Button } from '@material-ui/core';

const App = () => {
  return (
    <>
      <Button variant="contained" color="primary" style={{margin: "10px"}}> Click Here! </Button>
      <Button variant="contained" color="secondary" style={{margin: "10px"}}> Click Here! </Button>
    </>
  );
}
export default App;

Material UI-এর উপাদান সমূহ

আমরা দেখছি যে Material UI বিভিন্ন ধরণের Components সরবরাহ করে থাকে যা আপনি আপনার Application এ ব্যবহার করতে পারেন। এই উপাদান গুলো আপনাকে আপনার ওয়েবসাইট বা অ্যাপ্লিকেশন ইন্টারফেস আরও আধুনিক এবং সুন্দর করতে সাহায্য করবে। আসুন কিছু উপাদান দেখে নেওয়া যাক – 

1. Button: বোতাম তৈরি করতে ‘বাটন’ উপাদান ব্যবহার করা হয়, যা বিভিন্ন আধুনিক Style এর সাথে আসে এবং স্টাইলগুলো সহজেই কাস্টমাইজ করা যায়। কিছু কিছু Button এ JavaScript যোগ করা যেতে পারে।
2. Icon: Material UI বিভিন্ন ধরনের আইকন সরবরাহ করে। 1000+ এর বেশি আইকন আছে, যা আপনি আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনে ব্যবহার করতে পারবে।
3. Checkbox: ‘চেকবক্স’ উপাদানটি চেকবক্স তৈরি করতে ব্যবহার করা হয়, যা বিভিন্ন Style এর সাথে আসে এবং স্টাইলগুলো সহজেই কাস্টমাইজ করা যায়। চেকবক্সে JavaScript যোগ করা যেতে পারে।
4. Navigation: Material UI আপনাকে নেভিগেশন উপাদানগুলি সরবরাহ করে, এর মধ্যে রয়েছে ‘Pagination’, ‘Link’, ‘Menu’ এবং ‘Drawer’.
5. Layout: Material UI আপনাকে বিভিন্ন Layout Component সরবরাহ করে, যেমন ‘Box’, ‘Container’, ‘Grid’ এবং ‘Stack’.
6. Feedback: এছাড়াও কিছু Feedback Component রয়েছে যা আপনি ব্যবহার করতে পারেন।

Material UI-এর বিষয়বস্তু

আমরা দেখেছি যে Theme-এর জন্য React এ Material UI ব্যবহার করা যেতে পারে, তবে কীভাবে তা নিয়ে জানতে আমরা একটি উদাহরণ সহ কিভাবে থিমিং করতে হয় তা নিয়ে আলোচনা করব:

আমরা Material UI দ্বারা প্রদত্ত ‘Button’ এবং ‘Typography’ উপাদানগুলির Style পরিবর্তন করতে চাই এবং এই কাস্টম থিম ‘createTheme’ ফাংশন দ্বারা করা যেতে পারে। এক্ষেত্রে আমরা শুধুমাত্র ‘src’ Directory তে উপস্থিত ‘App.js’-এ পরিবর্তন করবো।

import React from 'react';
import { createTheme, ThemeProvider } from '@material-ui/core/styles';
import { Button, Typography } from '@material-ui/core';
import purple from '@material-ui/core/colors/purple';
import green from '@material-ui/core/colors/green';

const theme = createTheme({
  palette: {
    primary: {
      main: purple[500],
    },
    secondary: {
      main: green[500],
    },
  },
  typography: {
    h3: {
      fontSize: '3rem',
      fontWeight: 300,
      fontFamily: 'Roboto, sans-serif',
    },
  }
});

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Typography variant="h3">Theming Example</Typography>
      <Button variant="contained" color="primary" style={{margin: "10px"}}> Click Here! </Button>
      <Button variant="contained" color="secondary" style={{margin: "10px"}}> Click Here! </Button>
    </ThemeProvider>
  );
}

export default App;

Material UI-এর Icon

React অ্যাপ্লিকেশন এ বিনামূল্যে Material UI-এর আইকন ব্যবহার করা যেতে পারে। Material UI দ্বারা 1000+ আইকন সরবরাহ করা হয়েছে। এখানে আমরা এমন Icon গুলি নিয়ে আলোচনা করব যা Material UI থেকে Import করা যেতে পারে এবং উদাহরণ হিসাবে আমাদের React অ্যাপ্লিকেশন এ ব্যবহার করা যেতে পারে।

এখানে আমরা ‘@material-ui/icons’ প্যাকেজ থেকে আইকন গুলো Import করবো –

import React from 'react';
import { Button } from '@material-ui/core';
import { Email, Phone, LocationOn } from '@material-ui/icons';
const App = () => {
  return (
    <>
      <Button startIcon={<Email />} variant="contained" color="primary" style={{margin: "10px"}}> Email </Button>
      <Button startIcon={<Phone />} variant="contained" color="secondary" style={{margin: "10px"}}> Call </Button>
      <Button startIcon={<LocationOn />} variant="contained" style={{margin: "10px"}}> Find </Button>
    </>
  );
}
export default App;