आता आपण बघू कि react चा flow कसा आहे.तर react चा flow बघण्या साठी मी code penह्या site चा वापर करणार आहे.आपण बघितले कि react हे सिंगल page application आहे.म्हणून आपण जो कोड लिहणार आहोत तो
आणि javascript ani html ह्या टॅब मध्ये लिहणार
आहोत.त्या आधी मी javascript टॅब मध्ये जाऊन दोन पॅकजेच्या लिंक देतो.
१.react
२.react-dom
आणि मी एक div तयार करतो टॅब मध्ये आणि त्याला id देतो app
<div id="app"></div>आता आपण javascript चा कोड करायला चालू करू तर सगळ्या पहिला मी काय करतो तर एक veriable घेतो a नावाचा आणि त्याला मी assign करतो एक value.तर आपण जे reactचे package घेतले होते ना त्याचा use करून मी एक medthod तयार करतो createElement() नावाची तर हि जी method आहे त्याचे ३ arrguments असतात .
१.कुटला html element create करायचा आहे
२.प्रॉप्स हायला आपण html मध्ये attribute म्हणतो
३.कंन्टेन्ट म्हणजे जो एलिमेंट तयार होत आहे त्याच्यात काय कन्टेन्ट असणार आहे
let a = React.createElement('div',null,'Namasakr Mandlai');तर हा आपला react चा एक html element तयार झाला पण जर तो दाखवायचा असेल तर तो React Dom ह्या package चा use करून दाखवावा लागतो. मग त्याची एक method आहे render () नावाची तर हि काय करते तुम्ही कुठला एलिमेंट दाखवणार आहेत तो दयाचा त्याला 1st argument आणि तो कुठे दाखवणार आहत हा सेकंड argument घेते आणि तुमच्या html page वर तुमचा रिऍक्ट element दाखवते.
ReactDOM.render(a,document.querySelector('#app');
वरची image बघितली तर आपण दाखवणार काय आहोत
a एलिमेंट
कुठे तर app ह्या id मध्ये
आता समजा मला नमस्कार मंडळी चा कलर change करायचा आहे तर मला काय पाठव्हावे लागले एलिमेंट ला style नावाचा प्रॉप्स बरोबर तर तो तुम्ही असा पाठवू शकता
let a = React.createElement('div',{style:{color:'red'}},'Namasakr Mandali')
आता समजा मला एका div मध्ये multiple element पाठवायचे आहेत तर मी असे पाठवेन
function App(){
return React.createReactElement('div',null,[
React.createElement('button',null,'click here'),React.createElement('h2',null,'hello')
])
}
