DEV Community: Mehedi0911

Mastering React: Best Practices for Cleaner and More Efficient Code

Mehedi0911 — Sat, 06 Jan 2024 12:59:06 +0000

এই আর্টিক্যাল এ আমরা React এর কিছু best practice নিয়ে কথা বলবো ।

1. Destructuring and Spread Operator for Props:

React component এ একাধিক prop রিসিভ করলে আমরা সেগুলো destructure করে ইউজ করলে কোড এর readability and efficiency বেড়ে যায় ।

const MyComponent = ({ prop1, prop2, prop3, ...restProps }) => {
  // Component logic here
  return <ChildComponent {...restProps} />;
};

এই example এ, ফাংশন প্যরামিটার এ props destructure করে নেয়ার কারনে সহজেই আমরা বুঝতে পারি এই কম্পোনেন্টটি কি কি props এর উপর dependent.

2. Conditional Rendering with Ternary Operators:

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

const MyComponent = ({ isLoggedIn }) => {
  return isLoggedIn ? <UserDashboard /> : <Login />;
};

এই example এ, ইউজার যখন লগিন করা থাকবে তখন আমরা UserDashboard এবং যখন লগিন না থাকবে তখন Login কম্পনেন্ট কে রেন্ডার করব ternary operator ইউজ করে ।

3. React Fragments for Cleaner JSX:

আমরা যখন একটা কম্পনেন্ট এ আরও কিছু child component ইউজ করি তখন সেগুলো একটা wrapper div দিয়ে wrap না করে আমরা react fragments ইউজ করে আমাদের কোড আরো বেশি ক্লিন এবং রিডেবল করে ফেলতে পারি ।

const MyComponent = () => (
  <>
    <Header />
    <MainContent />
    <Footer />
  </>
);

4. PropTypes and Default Props:

একটা component যে props গুলো রিসিভ করে সেগুলোর টাইপ ডিক্লেয়ার করে দেয়ার মাধ্যমে আর ডিফল্ট props সেট করে আমরা development স্টেজ এই আমাদের এরর গুলো ডিটেক্ট এবং হ্যান্ডল করে ফেলতে পারি । এতে আমাদের development টাইম অনেক কমে আসে ।

import PropTypes from 'prop-types';

const MyComponent = ({ name, age }) => {
  // Component logic here
};

MyComponent.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number,
};

MyComponent.defaultProps = {
  age: 25,
};

এছাড়াও এরকম আরো অনেক বেস্ট প্র্যক্টিস আছে যা ফলো করে আমরা আমাদের আমাদের কোড বেজ কে ক্লিন, রিডেবল এবং Efficient করতে পারি । ধন্যবাদ ।

Front-End Web Application এ React ইউজ করার Advantages

Mehedi0911 — Fri, 10 Nov 2023 12:28:33 +0000

ফ্রন্ট-এন্ড ডেভেলপমেন্টের current ল্যান্ডস্কেপে, React একটি game changer । রিঅ্যাক্ট হল ইউজার ইন্টারফেস তৈরির জন্য একটি জাভাস্ক্রিপ্ট লাইব্রেরি । web application development করতে React ইউজ করার অনেক গুলো advantages রয়েছে । এই আর্টিকেল এ আমরা সেগুলোর কয়েকটি সম্পর্কে জানবো ।

1. Reusable Components

রিঅ্যাক্টের reusable component এর মাধ্যমে আমরা একটা কমন এলিমেন্ট বানিয়ে আমরা সেটা রি ইউজ করতে পারি । আমাদের এপ্লিকেশন এ যদি সিমিলার বা কাছাকাছি দেখতে কোন এলিমেন্ট থাকে যেটা আমাদের এপ্লিকেশনে বিভিন্ন প্লেস এ ইউক হচ্ছে, তাহলে আমরা একটি কমন কম্পনেন্ট বানিয়ে ফেলতে পারি । আমরা এই কম্পনেন্ট এ প্রপ্স পাস করে এটাকে ডাইমামিক করে ফেলতে পারি । যেমন

import React from 'react';

const Button = (props) => {
  return <button>{props.label}</button>;
};

const App = () => {
  return (
    <div>
      <Button label="Click me" />
      <Button label="Submit" />
    </div>
  );
};

export default App;

2. Virtual DOM

React page rendering এর জন্য virtual dom ইউজ করে যা আমাদের পেজ রেন্ডারিং কে আরও smooth এবং efficient করে । এখানে React actual dom কে ম্যনুপুলেট না করে এর একটা কপি তৈরি করে, এবং শুধুমাত্র যে পার্ট গুলো change করা হয়েছে সেটাই Update করে । এছাড়াও আমদের পেজ লোডিং স্পিড কে অনেক কমিয়ে ফেলে ।

import React, { useState } from 'react';

const App = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};

3. Unidirectional Data Flow

React এর ডাটা ফ্লো ইউনিডিরেকশনাল অর্থাৎ রিএক্ট শুধু প্যারেন্ট থেকে চাইল্ড এই ডাটা পাস করতে পারে । যার জন্য ডেভেলপমেন্ট এর সমস্য এরর track করা আর debug করা অনেক সহজ আর Time saving হয় ।

import React, { useState } from 'react';

const ParentComponent = () => {
  const [message, setMessage] = useState('Hello from Parent');

  return (
    <div>
      <ChildComponent message={message} />
    </div>
  );
};

const ChildComponent = (props) => {
  return (
    <div>
      <p>{props.message}</p>
    </div>
  );
};

4. Strong Community Support

রিএক্ট এর একটা vast and active community আছে । যার ফলে ডেভেলপমেন্ট এর সময় একজন ডেভেলপার এর কাছে plenty of resources, libraries, and updates থাকে । যার ফলে খুব সহজের জেকন সমস্যার সলুশন পাওয়া যায় ।

5. Excellent Developer Tools

রিএক্ট এর powerful developer tools আছে, যেমন React DevTools and component inspection. এগুলো debugging, profiling এ অনেক হেল্প করে ।
সব মিলিয়ে আমরা বলতে পারি ফ্রন্ড এন্ড application ডেভেলপমেন্ট এ রিএক্ট আমাদের first choice এই থাকে ।

A glimpse of JavaScript strings.

Mehedi0911 — Wed, 25 Jan 2023 03:41:59 +0000

জাভাস্ক্রিপ্ট স্ট্রিং বলতে যেকোনো টেক্সট কে বুঝায় । স্ট্রিং জাভাস্ক্রিপ্ট এ খুবই গুরুত্বপুর্ন একটি টার্ম । স্ট্রিং লিখতে সিঙ্গেল বা ডাবল কোট ব্যাবহার করা হয়, যেমন -

let str1 = "Hello, world!";
let str2 = 'Hello, world!';
console.log(str1); // "Hello, world!"
console.log(str2); // "Hello, world!"

জাভাস্ক্রিপ্ট স্ট্রিং কে সুবিধামত পরিবর্তন করার জন্য বিভিন্ন স্ট্রিং মেথড ইউস করা হয় যেগুলো একেকটা ফাংশন । যেমন, আমরা যদি কোনো স্ট্রিংকে ছোট থেকে বড় হাতের অক্ষরে পরিবর্তন করতে চাই তাহলে string.toUpperCase() মেথড টি ইউস করতে পারি। এরকম আরোও কয়েকটি উদাহরণ নিচে দেয়া হল -

let myString = "Hello, world!";
console.log(myString.length); // 13
console.log(myString.toUpperCase()); // "HELLO, WORLD!"
console.log(myString.toLowerCase()); // "hello, world!"

এরকম আরোও একটি কমন স্ট্রিং মেথড হল .indexOf() মেথড । এর দ্বারা আমরা কোন একটি স্ট্রিং এর ভেতর কোন স্পেসিফিক ওয়ার্ড বা আরেকটি স্ট্রিং আছে কিনা সেটা সার্চ করে দেখতে পারি। নিচের উদাহরণ এ "Hello, world!" স্ট্রিং এর ভেতর "world" শব্দটি ৭ম ইনডেক্স এ আছে ।

let myString = "Hello, world!";
console.log(myString.indexOf("world")); // 7

.split() মেথড টি দিয়ে আমরা একটি বড় স্ট্রিং কে যেকোনো ক্যরেক্টার অনুযায়ী আলাদা আলাদা করে একটি অ্যারে তে নিতে পারি। নিচের উদাহরণ এ "JavaScript is a powerful language" স্ট্রিং টিকে স্পেস এর প্রেক্ষিতে আলাদা করা হয়েছে এবং অউটপুট একটি অ্যারে আকারে এসেছে ।

let myString = "JavaScript is a powerful language";
let words = myString.split(" ");
console.log(words); // ["JavaScript", "is", "a", "powerful", "language"]

আমরা যদি কোন একটি স্ট্রিং কে একটি স্পেসিফিক ইনডেক্স এ আলাদা করতে চাই তাহলে আমরা .slice() মেথড টি ইউস করতে পারি ।

let myString = "JavaScript is a powerful language";
console.log(myString.slice(0, 10)); // "JavaScript"

.substr() মেথড টি .slice() এর মতই তবে এখানে আমরা এন্ডিং ইনডেক্স না বলে দিয়ে বলে দিব সে কোন ইনডেক্স থেকে শুরু করবে আর কত লেংথ এর স্ট্রিং কে আলাদা করবে ।

let myString = "JavaScript is a powerful language";
console.log(myString.substr(0, 10)); // "JavaScript"

আমরা যদি কয়েকটি স্ট্রিং কে একসাথে জোড়া দিতে চাই তাহলে .concat() মেথড ইউস করতে পারি । নিচের উদাহরণ টি দেখলেই সেটা সহজে বুঝা যায় ।

let str1 = "Hello";
let str2 = "world";
let str3 = "!";
console.log(str1.concat(" ", str2, str3)); // "Hello world!"

.split() এর ঠিক উল্টো হল .join() । এর দ্বারা আমরা একটি অ্যারে তে থাকা কয়েকটি স্ট্রিং বা শব্দ কে কোন একটা স্পেসিফিক ক্যরেক্টার বা শব্দ দিয়ে জোড়া দিতে পারি।

let arr = ["JavaScript", "is", "a", "powerful", "language"];
console.log(arr.join(" hello ")); // "JavaScript hello is hello a hello powerful hello language"

উপরে উল্লেখিত মেথড গুলো ছাড়াও আরো অনেক মেথড আছে যেগুলো আমরা নিচে দেয়া লিংক থেকে দেখে প্র্যাকটিস করতে পারি।

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String

ধন্যবাদ