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

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

    সবার সাথে শেয়ার করুন

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

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

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

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

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

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

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

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

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

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

    const Human = ()=>{return()}
  • props যুক্ত স্টেটলেস-কম্পোনেন্ট

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

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

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

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

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

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

    componentWillUnmount()
  • যখন কম্পোনেন্ট নতুন প্রপস রিসীভড করে

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

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

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

    componentDidUpdate()