রিঅ্যাক্ট JS টুকিটাকি

npx এর সাহায্যে নতুন একটা রিআ্যাক্ট প্রোজেক্ট তৈরী করতে

npx create-react-app <project-name>

npx এর সাহায্যে Typescript দিয়ে নতুন একটা রিআ্যাক্ট প্রোজেক্ট তৈরী করতে

npx create-react-app <project-name> --template typescript

npx এর সাহায্যে প্রজেক্ট নাম ছাড়া রিআ্যাক্ট প্রোজেক্ট তৈরী করতে

npx create-react-app . 

npm এর সাহায্যে নতুন একটা রিআ্যাক্ট প্রোজেক্ট তৈরী করতে

npm init react-app <project-name>

yarn এর সাহায্যে নতুন একটা রিআ্যাক্ট প্রোজেক্ট তৈরী করতে

yarn create react-app <project-name>

yarn এর সাহায্যে Typescript দিয়ে নতুন একটা রিআ্যাক্ট প্রোজেক্ট তৈরী করতে

yarn create react-app <project-name> --template typescript

লোকাল স্টেট এবং লাইফ-সাইকেল হুক কন্টেইন করে এমন একটি টেমপ্লেট

class

লোকাল স্টেট ডিফাইন করে এবং কম্পোনেন্ট মাউন্ট হওয়ার আগে ফায়ার করবে

constructor(props)

প্যারেন্ট constructor কে রেফারেন্স করে

super(props)

লোকাল স্টেট তৈরি করার উদাহরন

this.state = {date: new Date()}

ডোমে রেন্ডার করার একটি ফংশন যা রির্টান করবে ডোম ইলিমেন্ট

render() {return (<h1>Hello world</h1>)}

রেন্ডারিং এর আগে ইনভোক হয়

constructor (props)

রেন্ডার করে

render()

রেন্ডারিং এর পর ইনভোক হয়(যখন ডোম এভেইলএবল)

componentDidMount()

ডোম রিমুভ হওয়ার আগে ইনভোক হয়

componentWillUnmount()

কম্পোনেন্ট নতুন কোন প্রপস গ্রহন করলে

componentWillReceiveProps()

কম্পোনেন্ট নতুন প্রপস গ্রহন করার পর এবং রেন্ডারিং এর আগে ইনভোক হয়

shouldComponentUpdate()

নতুন প্রপস অথবা স্টেট পরিবর্তন হওয়ার সাথে সাথে ইনভোক হয়

componentWillUpdate()

কম্পোনেন্ট নতুন প্রপস গ্রহন করে তা রেন্ডার করার পর ইনভোক হয়

componentDidUpdate()

ডাইন্যামিক্যালি নেভিগেশন বা রুট পরিবর্তন করতে চাইলে

useHistory()

ডাইন্যামিক্যালি URL প্যারামিটার সেট করতে চাইলে

useParams()

বর্তমান URL এর অবস্থান জানতে বা ব্যবহার করতে হলে

useLocation()

প্রদত্ত কম্পোনেন্ট একটি নির্দিষ্ট পৃষ্ঠায় আছে কিনা তা জানুন

useRouteMatch()

npm এর সাহায্যে রাউটার ইন্সটল

npm install react-router-dom@6

yarn এর সাহায্যে রাউটার ইন্সটল

yarn add react-router-dom@6

Router সেট করতে App.js এ যুক্ত করুন

import { BrowserRouter } from 'react-router-dom'

Router Render করতে App.js এ যুক্ত করুন

import { Routes, Route } from 'react-router-dom'

লিংক বা সুইচ এর মাধ্যমে পেইজ পরিবর্তন করতে App.js এ যুক্ত করুন

import { Routes, Route, Link } from 'react-router-dom'

যেভাবে রাউটার অবজেক্ট বানিয়ে রাউটার কম্পোনেন্ট সেটআপ করবেন

import { useRoutes } from 'react-router-dom'
//inside the component
const routes = [
  children: [
   {
    element: <PageComponent />,
    path: '/path',
   }
  ]
]
const routerRegister = useRoutes(routes)
return routerRegister

react কে ইম্পোর্ট(ES6 কনসেপ্ট) করে নেয়া

import React from 'react'

ReactDOM কে ইম্পোর্ট করে নেয়া

import ReactDOM from 'react-dom/client'

এরপরে প্রজেক্টের root তৈরী করা ReactDOM এর সাহায্যে

const root = ReactDOM.createRoot(document.getElementById('root'))

ReactDOM এর সাহায্যে তৈরী root টিকে রেন্ডার করা

root.render(<h1>Hello world!</h1>)

স্টেটলেস-কম্পোনেন্টের স্ট্রাকচার

const Human = ()=>{return()}

props যুক্ত স্টেটলেস-কম্পোনেন্ট

const Human = (props) =>{return(<h2>{props.name}</h2>)}

যে হুক দ্বারা ফাংশনাল কম্পোনেন্টে state ব্যবহার করা হয়

useState()

কম্পোনেন্ট রেন্ডারিং, রি-রেন্ডারিং হওয়ার পর যে হুক কল হয়

useEffect(() => {}, [dependencies])

যে হুক দ্বারা বিভিন্ন কম্পোনেন্ট context object গ্রহণ করে

useContext()

একাধিক অথবা নেস্টেড object state আপডেট করতে হুক ব্যবহার করা যায়

useReducer(reducer, initialState)

যে হুক দ্বারা কোন ফাংশন/ফাংশনাল কম্পোনেন্টকে মেমোরাইজ করা হয়

useMemo(() => <Child></Child>, [dependencies])

যে হুক দ্বারা JSX(HTML) এর কোন এলিম্যান্টের রেফারেন্স রাখা হয়

const inputRef = useRef(null)

যে হুক দ্বারা DOM measurements(scroll event, viewport height/width) করা যায় এবং synchronously re-render হতে থাকে state আপডেটের পর

useLayoutEffect(() => {}, [dependencies])

যে হুক দ্বারা ইউনিক আইডি জেনারেট করা হয়

const id = useId()

যে হুক দ্বারা কোন স্টেটের আপডেট মনিটর করা হয় এবং সেই স্টেটের আপডেট হওয়া পর্যন্ত পেন্ডিং স্টেট শো করে।

const [isPending, startTransition] = useTransition()

npm এর সাহায্যে রাউটার ইন্সটল

npm install react-router-dom

yarn এর সাহায্যে রাউটার ইন্সটল

yarn add react-router-dom

Router সেট করতে App.js এ যুক্ত করুন

import { BrowserRouter as Router } from 'react-router-dom'

Router Render করতে App.js এ যুক্ত করুন

import { BrowserRouter as Router, Route } from 'react-router-dom'

লিংক বা সুইচ এর মাধ্যমে পেইজ পরিবর্তন করতে App.js এ যুক্ত করুন

import { BrowserRouter as Router, Route, Link or Switch } from 'react-router-dom'

ন্যাভ লিংক মাধ্যমে পেইজ পরিবর্তন করতে App.js এ যুক্ত করুন

import { NavLink } from 'react-router-dom'

match অবজেক্ট

match.params , match.isExact , match.path , match.url

সুইচ এর একটি উদাহরণ

<Router> <Switch> <Route path='/about' component={About}/> </Switch> </Router>

লিংক এর একটি উদাহরন

<Link to='/about'> About </Link>

ন্যাভ লিংক এর একটি উদাহরন

<NavLink to='/about'> About </NavLink>

Route-এ প্যারামিটার পাস করতে হলে

<Router> <Switch> <Route path='/about/:param' component={About}/> </Switch> </Router>

Protected Route এর একটি উদাহরণ

<Switch> <Route path='/home' component={Home}/> {isAuthenticated ? <> <Route path='/about/:parma' component ={About} </> : <Redirect to='/home'/> } </Switch>

যেকোনো টাইপের স্টেট ডিফাইন করা

const [state, setState] = useState(<STATE_TYPE>)

যেকোনো সাইড ইফেক্ট হ্যান্ডেল করতে useEffect

useEffect(() => {
// Update the document title using the browser API 
document.title = `You clicked ${count} times`;
});