ডেভসংকেত

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

রিঅ্যাক্ট JS এর আদ্যোপান্ত

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

  • MohiuddinRabby
  • lahin31
  • zonayedpca
  • zonayedpcadotcom
  • menomanabdulla

শেয়ার করুন

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

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

    import React from 'react'
  • ReactDOM কে ইম্পোর্ট করে নেয়া

    import ReactDOM from 'react-dom'
  • ReactDOM.render এই মেথডটি ২টি আরগুমেন্ট নেয় রেন্ডার ইলিমেন্ট এবং রেন্ডার স্কোপ

    ReactDOM.render(<h1>Hello, world!</h1>,document.getElementById('root'))

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

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

    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])

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

  • রাউটার ইন্সটল

    npm install 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'
  • একটি উদাহরণ

    <Router> <Switch> <Route path='/about' component={About}/> </Switch> </Router>
  • 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>

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() 
  • immediately ইনভোক হয় নতুন প্রপস অথবা স্টেট পরিবর্তন হয়

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

    componentDidUpdate()

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

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

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

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

    useLocation()