प्रतिक्रिया वर घासणे: प्रतिक्रिया कशी बूटस्ट्रॅप करावी

आपल्या प्रकल्पावर प्रतिक्रिया देऊन प्रारंभ करण्याचे वेगवेगळे मार्ग.

ब्रशिंग ऑन रिएक्शनच्या चालू मालिकेचा एक भाग.

कठीण मार्ग - क्रिएट-रिएक्ट-अॅपशिवाय

  • एक नोड प्रोजेक्ट तयार करा: एनपीएम init -y
  • रिएक्ट आणि रीएक्ट-डोम स्थापित करा: एनपीएम रीएक्ट रिएक्ट-डोम स्थापित करा
  • आपल्याला कमीतकमी दोन फायली आवश्यक असतीलः आपल्या रिएक्ट घटकासाठी एक जेएस फाइल आणि आपल्या रिएक्ट घटकाचे बूटस्ट्रॅप करण्यासाठी एक एचटीएमएल फाइल.
// अनुक्रमणिका. js आयात 'प्रतिक्रिया' वरून प्रतिक्रिया देते; 'रिएक्ट-डोम' वरून रिएक्टडीओएम आयात करा; आयात './index.css'; क्लास अ‍ॅपने रीएक्ट वाढविला. घटक {रेंडर () {रिटर्न ( हॅलो वर्ल्ड )}}
// आपल्या एचटीएमएल डीओएमवर प्रतिक्रिया जोडा.
ReactDOM.reender ( , document.getElementById ('app')); // अनुक्रमणिका. html

येथून कोड घेतलाः https://dev.to/vish448/create-react-project-without-create-react-app-3goh

  • जेव्हा कोड बनविला जाईल, तेव्हा js फाईल चालविली जाईल आणि ReactDOM.reender () इंडेक्स. एचटीएमएल मध्ये रिएक्ट कोड इंजेक्ट करेल.
  • आम्ही कोड बंडल करण्यासाठी वेबपॅक आणि जेएसएक्स ट्रान्सपोर्ट करण्यासाठी बेबील वापरू शकतो.

सोपा मार्ग - क्रिएट-रिएक्ट-अॅपसह

  • प्रतिक्रियेसह प्रारंभ करण्याचा सर्वात सोपा मार्ग. वेबपॅक, बाबेल इत्यादी आवश्यक असलेल्या सर्व साधनांसह येतो.
  • येथून चरणांचे अनुसरण करा.

समस्या: आपणास नवीन जेएस लिहायचे आहे म्हणजे एस 6 परंतु सर्व ब्राउझर नवीन वाक्यरचना आणि वैशिष्ट्ये संकलित करू आणि चालवू शकत नाहीत.

ऊत्तराची: बाबेल नवीन जेएस जुन्या लोकांमध्ये बदलते जेणेकरून ते सर्व ब्राउझरसह कार्य करते. बॅबल आम्हाला पॉलीफिलला नवीन कार्यक्षमता वापरण्याची परवानगी देते ज्याचे ट्रान्सप्लिस् होऊ शकत नाही.

महत्वाची पॅकेजेस / लायब्ररी जाणून घ्या

  • प्रीसेट: विशिष्ट जावास्क्रिप्ट भाषेच्या वैशिष्ट्यास समर्थन देण्यासाठी वापरले जाणारे प्लगइनचे अ‍ॅरे.
  • @ बेबेल / प्रीसेट-एन्व्हः एक "स्मार्ट" प्रीसेट जो आपल्या लक्ष्य वातावरणाद्वारे कोणत्या विशिष्ट सिंटॅक्स रूपांतरण किंवा पॉलीफिलची आवश्यकता आहे हे व्यवस्थापित केल्याशिवाय आम्हाला नवीनतम जावास्क्रिप्ट वापरण्याची परवानगी देतो.
  • लक्ष्य वातावरणः ज्या ब्राउझरमध्ये आपण बॅबल इच्छित आहात त्या ब्राउझरवर
  • ब्राउझरलिस्टः प्रकल्प जे आम्हाला क्वेरी वापरुन लक्ष्य वातावरण निर्दिष्ट करू देते. बाबेलने क्वेरीस एक. ब्राउझरची यादी सीआरपी फाइलमध्ये ठेवण्याची शिफारस केली आहे.
# ब्राउझर आम्ही शेवटच्या 2 आवृत्त्यांचे समर्थन करीत नाही> 0.5% नाही

आम्ही सर्व प्रमुख ब्राउझरच्या शेवटच्या 2 आवृत्त्या लक्ष्यित करू इच्छित आहोत ज्या मेल्या नाहीत आणि बाजारातील वाटा 0.5% पेक्षा जास्त आहेत.

  • babel.config.js: जिथे आम्ही आमच्या सर्व बाबेल कॉन्फिगरेशन सामग्री ठेवतो जेणेकरुन आपल्याला लांबीच्या क्लायंट कमांडद्वारे बेबल चालवावे लागू नये.
  • पॉलीफिलः जेएसची काही नवीन वैशिष्ट्ये जुने वाक्यरचनामध्ये रूपांतरित केली जाऊ शकत नाहीत कारण जुना समतुल्य नाही. त्यांच्यासाठी आम्ही पॉलीफिल परिभाषित करतो, जे ब्राउझर एपीआयमध्ये कोड जोडलेले असतात. आम्ही आमच्या अनुप्रयोगात पॉलिफिल जोडण्यासाठी कोअर-जेएस वापरू शकतो, @ बेबल / प्रीसेट-एनव्ही द्वारे.
// babel.config.js const presets = [["" बाबेल / प्रीसेट-एनव्ही ", {// प्रीसेट डीबगवर कॉन्फिगरेशन ऑब्जेक्ट पास करा: सत्य, // संकलित करताना वापरलेले लक्ष्य / प्लगइन आउटपुट करा // नवीन कोडे: // कॉर्ड-जेएस कडून @ बेबेल / प्रीसेट-एनव्ही पॉलीफिल कशा हाताळतात हे कॉन्फिगर करा. // https://babeljs.io/docs/en/babel-preset-env useBuiltIns: 'वापर', // कोर-जेएस आवृत्ती निर्दिष्ट करा. पॅकेज.जेसन कोरजेस मधील आवृत्तीशी जुळणे आवश्यक आहे: 3, // आम्ही कोणत्या वातावरणाला समर्थन / लक्ष्य करतो हे निर्दिष्ट करा. (आम्ही. ब्राउझर यादीमध्ये // लक्ष्य निर्दिष्ट करणे निवडले आहे, म्हणून येथे ते करण्याची आवश्यकता नाही.) // लक्ष्य: "", // अंत नवीन कोड}],]; कॉन्ट प्लगइन्स = []; // कॉन्फिगर ऑब्जेक्ट निर्यात करा. मॉड्यूल.एक्सपोर्ट्स = {प्रीसेट, प्लगइन्स};

वेबपॅक

वेबपॅक आपली सर्व फ्रंट एंड संसाधने एक किंवा अधिक मॉड्यूलमध्ये बंडल करते जेणेकरून ते उत्पादनामध्ये खपतील. वेबपॅक फक्त बंडलिंग संसाधनांसाठी मर्यादित नाही. हे बॅबल, प्रति-प्रक्रिया वापरून फायली, ट्रान्सप्लेल्स आणि पॉलीफिलची भर घालते आणि एसएएसएस इत्यादी सीएसएस मॉड्यूल संकलित करते.

आम्ही वेबपॅकवर एक एंट्री फाइल पाठवितो आणि तेथून ती फाईल वरुन सर्व अवलंबित्व (बहुधा रिकर्सिव) ट्रॅव्हर्स करते. अशाच प्रकारे बंडलमध्ये कोणत्या संसाधनांचा समावेश करणे आवश्यक आहे हे वेबपॅकला माहित आहे.

लोडर्स

आम्ही आमच्या अ‍ॅपमध्ये आयात करत असलेल्या वेगवेगळ्या मॉड्यूल्सचे उपचार कसे करावे हे वेबपॅकला सांगण्यासाठी लोडर्सचा वापर केला जातो. लोडर्सचा वापर करून आम्ही './sum' वरून आयात, './styles/main.scss' व './logo.png' वरून लोगो आयात करतो तेव्हा काय करावे ते वेबपॅकला सांगू शकतो. उदाहरणार्थ, लोडरचा वापर करून आम्ही वेबबॅकला Sass कंपाईलर [1] द्वारे .scss फायली चालविण्यास सुचवू शकतो.

हे लक्षात घेऊन आपण बाबेल कॉन्फिगरेशनला वेबपॅकमध्ये हलवूया. मग आम्हाला यापुढे बेबील.कॉन्फिग.जेएस वापरण्याची आवश्यकता नाही.

पर्यावरण

पर्यावरणावर अवलंबून, आपल्याला भिन्न सामग्री करावी लागेल म्हणजे डेव मोडमध्ये कन्सोल करण्यासाठी अधिक लॉग आउटपुट करा. वेबपॅक आम्हाला वेगवेगळ्या ईन्व्हेस्टसाठी वर्तन परिभाषित करण्याची परवानगी देतो. आपल्याला फक्त ऑब्जेक्टऐवजी फंक्शन परत करणे आवश्यक आहे. जर आपण एखादे फंक्शन एक्सपोर्ट केले तर ते दोन पॅरामीटर्ससह पास केले जाईल, त्यातील पहिले वेबपॅक कमांड लाइन एनवायरनमेंट पर्याय - एनव्ही. दुसरे एक म्हणजे --arvgv.

दुसरा पर्याय म्हणजे दोन वेबपॅक कॉन्फिगरेशन फाइल्स परिभाषित करणे: एक देव आणि दुसरा प्रॉड.

एक साधी वेबपॅक कॉन्फिगरेशन:

मार्ग पथ = आवश्यक ('पथ');
मॉड्यूल.एक्सपोर्ट्स = {प्रविष्टी: {प्रवेश_पाथ_1: './path/to/code/1', प्रविष्टी_पाथ_2: './path/to/code/2'}, आउटपुट: {फाइलनाव: '[नाव] .js', पथ: पथ.रेसोल (__ dirname, 'build')}, संकल्प करा: {विस्तारः [".webpack.js", ".web.js", ".js", ".जेसन", ".jsx"]} }, मॉड्यूल: {नियम: [{चाचणी: /\.(jsypejsx)$/, वगळा: / नोड_मॉड्यूल्स /, लोडर: "बेबल-लोडर"}, {चाचणी: /\.(cssmittedless)$/ , वापरा: ["शैली-लोडर", "सीएसएस-लोडर", "कमी-लोडर", "सस-लोडर"]}, {चाचणी: /\.svg$/, वगळा: / नोड_मॉड्यूल्स /, वापरा: er लोडर : 'एसव्हीजी-रिएक्ट-लोडर',}}, {चाचणी: /\.(pngmittedjpe?g?ggg)$/i, वापरा: [{लोडर: 'फाईल-लोडर', पर्याय: {नाव: '[ नाव]. [ext] ',},},],}]}};

वेबपॅक चालू आहे

// package.json sc "स्क्रिप्ट्स": build "बिल्ड": "वेबपॅक --env.en वातावरण = उत्पादन --config webpack.config.js", "देव": "वेबपॅक --env.en वातावरण = विकास --config webpack.config.js "," डिव्हर्व्हर ":" वेबपॅक-देव-सर्व्हर --env.en वातावरण = विकास --config वेबपॅक.कॉन्फिग.जेज "}, ...

अधिक जाणून घेण्यासाठी आपण या पृष्ठास भेट देऊ शकता.

पुढे, चाचणी प्रतिक्रिया!

मूळतः 2 जानेवारी, 2020 रोजी http://musingsofajuniorengineer.wordpress.com वर प्रकाशित केले.