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

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

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

componentDidUpdate()
ডেভসংকেত

বাংলা চিটশিটের ভান্ডার

devsonket.com

প্রিন্ট করুন