ডেভসংকেত

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

ফ্রন্ট-এন্ড ওয়েব ডেভেলপমেন্ট এর এক যুগান্তকারী টুলস এর নাম রিয়েক্ট জেএস। এটি একটি ইন্টারেক্টিভ ইউজার ইন্টারফেস (UI) ভিত্তিক জাভাস্ক্রিপ্ট লাইব্রেরী।

কন্ট্রিবিউটর

  • nsourov
  • 0xMahabub
  • mehedihasankhairul
  • saadh393
  • jonaed1230
  • iamraufu
  • mrhrifat
  • sabbirshawon
  • shaonkabir8
  • MohiuddinRabby
  • lahin31
  • zonayedpca
  • zonayedpcadotcom
  • menomanabdulla

শেয়ার করুন

রিঅ্যাক্ট 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

ES6 class নিয়ে কিছু কথা

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

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

    constructor(props)
  • প্যারেন্ট constructor কে রেফারেন্স করে

    super(props)
  • লোকাল স্টেট তৈরি করার উদাহরন

    this.state = {date: new Date()}
  • ডোমে রেন্ডার করার একটি ফংশন যা রির্টান করবে ডোম ইলিমেন্ট

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

রিঅ্যাক্ট JS লাইফ সাইকেল হুক

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

    constructor (props)
  • রেন্ডার করে

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

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

    componentWillUnmount()
  • কম্পোনেন্ট নতুন কোন প্রপস গ্রহন করলে

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

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

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

    componentDidUpdate()

রিঅ্যাক্ট রাউটার হুক্স

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

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

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

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

    useRouteMatch()

রিঅ্যাক্ট রাউটার v6

  • 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

রিঅ্যাক্ট JS এ 'Hello world' প্রিন্ট করা

  • 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()

রিঅ্যাক্ট রাউটার v5

  • 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`;
    });

ডেভসংকেত সম্পর্কে

ডেভসংকেত এর লক্ষ্য হচ্ছে বাংলাতে একটা বড় চিটশিটের ভান্ডার গড়ে তোলা। এটা সম্পূর্ণ স্বাধীন এবং ওপেন সোর্স গিটহাব অর্গানাইজেশন।

স্পন্সর