ডেভসংকেত

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

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

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

    শেয়ার করুন

    রিঅ্যাক্ট JS ইন্সটল করা

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

      npx create-react-app <project-name>
    • npm এর সাহায্যে নতুন একটা রিআ্যাক্ট প্রোজেক্ট তৈরী করতে

      npm init react-app <project-name>
    • yarn এর সাহায্যে নতুন একটা রিআ্যাক্ট প্রোজেক্ট তৈরী করতে

      yarn create react-app <project-name>

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

    রিঅ্যাক্ট 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>
    • লিংক এর একটি উদাহরন

      <Link to='/about'> About </Link>
    • 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>