रिएक्ट ट्यूटोरियल, भाग 5: एक TODO अनुप्रयोग, बेसिक स्टाइलिंग के साथ शुरुआत करना

आज, रिएक्ट प्रशिक्षण पाठ्यक्रम के अनुवाद के अगले भाग में, हम पहले प्रशिक्षण परियोजना पर काम करना शुरू करेंगे और स्टाइल की मूल बातों के बारे में बात करेंगे।



→ भाग 1: पाठ्यक्रम अवलोकन, प्रतिक्रिया की प्रतिक्रिया के कारण, ReactDOM और JSX
→ भाग 2: कार्यात्मक घटक
→ भाग 3: घटक फाइलें, परियोजना संरचना
→ भाग 4: माता-पिता और बच्चे के घटक
→ भाग 5: एक TODO आवेदन, स्टाइलिंग की मूल बातें पर काम शुरू
→ भाग 6: पाठ्यक्रम की कुछ विशेषताओं के बारे में, जेएसएक्स और जावास्क्रिप्ट
→ भाग 7: इनलाइन शैली
→ भाग 8: TODO आवेदन पर काम जारी रखा, घटकों के गुणों से परिचित
→ भाग 9: घटक गुण
→ भाग 10: घटक गुणों और स्टाइल के साथ काम करने पर कार्यशाला
→ भाग 11: डायनेमिक मार्कअप जेनरेशन और मैप एरे विधि
→ भाग 12: कार्यशाला, एक TODO आवेदन पर काम का तीसरा चरण
→ भाग 13: वर्ग-आधारित घटक
→ भाग 14: वर्ग-आधारित घटकों, घटक स्थिति पर कार्यशाला
→ भाग 15: घटक स्वास्थ्य कार्यशालाएँ
→ भाग 16: TODO अनुप्रयोग, ईवेंट हैंडलिंग पर काम का चौथा चरण
→ भाग 17: TODO अनुप्रयोग पर काम का पांचवा चरण, घटकों की स्थिति को संशोधित करता है
→ भाग 18: TODO आवेदन पर काम का छठा चरण
→ भाग 19: घटक जीवन चक्र विधियाँ
भाग 20: सशर्त प्रतिपादन में पहला पाठ
→ भाग 21: सशर्त प्रतिपादन पर दूसरा पाठ और कार्यशाला
→ भाग 22: TODO आवेदन पर काम का सातवां चरण, बाहरी स्रोतों से डेटा डाउनलोड करना
→ भाग 23: रूपों के साथ काम करने पर पहला पाठ
→ भाग 24: दूसरा रूप पाठ
→ भाग 25: रूपों के साथ काम करने पर कार्यशाला
→ भाग 26: अनुप्रयोग वास्तुकला, कंटेनर / घटक पैटर्न
→ भाग 27: पाठ्यक्रम परियोजना

पाठ 11. कार्यशाला। TODO आवेदन। स्टेज नंबर 1

→ मूल

इस पाठ में, हम अपनी पहली प्रशिक्षण परियोजना - TODO आवेदन पर काम शुरू करेंगे। समान कार्यशालाओं को साधारण कार्यशालाओं के रूप में तैयार किया जाएगा। सबसे पहले, आपको एक कार्य दिया जाएगा, जिसके कार्यान्वयन के लिए पहले से अध्ययन की गई सामग्री में नेविगेट करना आवश्यक होगा, जिसके बाद एक समाधान प्रस्तुत किया जाएगा।

हम इस एप्लिकेशन पर काफी समय से काम कर रहे हैं, इसलिए, यदि आप create-react-app उपयोग करते create-react-app , तो इसके लिए एक अलग प्रोजेक्ट बनाने की सिफारिश की जाती है।

▍Zadanie

• एक नया रिएक्ट एप्लिकेशन बनाएं।
• index.js फ़ाइल का उपयोग करके पृष्ठ पर <App /> घटक प्रदर्शित करें।
• <App /> घटक को उनके बाद कुछ पाठ के साथ 3-4 झंडे प्रदर्शित करने के लिए कोड उत्पन्न करना चाहिए। पाठ को <p> या <span> टैग का उपयोग करके स्वरूपित किया जा सकता है। आप जो कर सकते हैं वह एक टू-डू सूची जैसा होना चाहिए जिसमें कुछ प्रविष्टियां पहले ही हो चुकी हैं।

▍Reshenie

index.js फ़ाइल index.js कोड index.js :

 import React from 'react' import ReactDOM from 'react-dom' import App from './App' ReactDOM.render(   <App />,   document.getElementById('root') ) 

App.js फ़ाइल App.js :

 import React from "react" function App() {   return (       <div>           <input type="checkbox" />           <p>Placeholder text here</p>                     <input type="checkbox" />           <p>Placeholder text here</p>                     <input type="checkbox" />           <p>Placeholder text here</p>                     <input type="checkbox" />           <p>Placeholder text here</p>       </div>   ) } export default App 

यहां बताया गया है कि VSCode में मानक create-react-app प्रोजेक्ट काम के इस चरण में कैसा दिखता है।


VSCode में परियोजना

यह वही है जो हमारा आवेदन अब पृष्ठ पर प्रदर्शित होता है।


ब्राउज़र में ऐप उपस्थिति

आज हमने TODO अनुप्रयोग की ओर पहला कदम उठाया है। लेकिन जो स्क्रीन पर इस एप्लिकेशन को प्रदर्शित करता है वह हमारे पिछले प्रयोगों के दौरान पृष्ठों पर दिखाई देने वाली चीज़ों के समान सुखद नहीं होता है। इसलिए, अगले पाठ में हम तत्वों को स्टाइल करने पर ध्यान केंद्रित करेंगे।

पाठ 12. सीएसएस कक्षाओं का उपयोग करके प्रतिक्रिया में स्टाइलिंग

→ मूल

अब हम उस एप्लिकेशन पर काम करेंगे जो पाठ 10 में कार्यशाला के परिणामस्वरूप बनाया गया था। यहां स्क्रीन पर प्रदर्शित एप्लिकेशन है।


ब्राउज़र में एप्लिकेशन पेज

हम पृष्ठ के तत्वों को स्टाइल करना चाहेंगे। रिएक्ट में कई स्टाइलिंग दृष्टिकोण हैं। अब हम उन सिद्धांतों के साथ दृष्टिकोण का उपयोग कर रहे हैं जिनके बारे में आप पहले से ही परिचित हैं। इसमें सीएसएस कक्षाएं और इन कक्षाओं को सौंपे गए सीएसएस नियम लागू होते हैं। आइए इस परियोजना की संरचना पर एक नज़र डालते हैं और सोचते हैं कि किन तत्वों को कक्षाओं को सौंपा जाना चाहिए जो उन्हें स्टाइल करने के लिए उपयोग किए जाएंगे।


VSCode में परियोजना

index.js फ़ाइल App घटक को प्रस्तुत करने के लिए ज़िम्मेदार है। App घटक एक <div> तत्व प्रदर्शित करता है, जिसमें तीन अन्य घटक होते हैं - Header , MainComponent और Footer । और इनमें से प्रत्येक घटक केवल एक JSX तत्व को पाठ के साथ प्रदर्शित करता है। यह इन घटकों में है कि हम स्टाइलिंग में लगे रहेंगे। आइए Header घटक पर काम करते हैं। याद रखें कि उनके काम के इस चरण में, उनका कोड इस तरह दिखता है:

 import React from "react" function Header() {   return (       <header>This is the header</header>   ) } export default Header 

आमतौर पर, जब वे एचटीएमएल कोड के साथ काम करते हैं और एक निश्चित तत्व को एक कक्षा असाइन करना चाहते हैं, तो यह class विशेषता का उपयोग करके किया जाता है। मान लीजिए कि हम इस तरह की विशेषता को एक <header> तत्व को सौंपने जा रहे हैं। लेकिन यहां हमें यह नहीं भूलना चाहिए कि हम HTML कोड के साथ नहीं, बल्कि JSX के साथ काम कर रहे हैं। और यहां हम class विशेषता का उपयोग नहीं कर सकते हैं (वास्तव में, आप इस नाम के साथ विशेषता का उपयोग कर सकते हैं, लेकिन यह अनुशंसित नहीं है)। इसके बजाय, className नामक विशेषता className । कई प्रकाशन कहते हैं कि इसका कारण यह है कि class एक आरक्षित JavaScript कीवर्ड है। लेकिन, वास्तव में, JSX DOM के साथ काम करने के लिए नियमित जावास्क्रिप्ट API का उपयोग करता है। इस API का उपयोग करने वाले तत्वों तक पहुंचने के लिए, निम्न फ़ॉर्म का एक परिचित डिज़ाइन उपयोग किया जाता है:

 document.getElementById("something") 

एक तत्व में एक नया वर्ग जोड़ने के लिए, निम्नानुसार आगे बढ़ें:

 document.getElementById("something").className += " new-class-name" 

एक समान स्थिति में, classList तत्वों की संपत्ति का उपयोग करना अधिक सुविधाजनक है, विशेष रूप से, क्योंकि इसमें कक्षाओं को जोड़ने और हटाने के लिए सुविधाजनक तरीके हैं, लेकिन इस मामले में यह कोई फर्क नहीं पड़ता। और महत्वपूर्ण बात यह है कि className संपत्ति का उपयोग className किया जाता className ।

वास्तव में, JSX तत्वों को कक्षाएं नियत करने के लिए, हमारे लिए यह जानना पर्याप्त है कि HTML में class कीवर्ड का उपयोग कहाँ किया जाता है, className कीवर्ड className में उपयोग किया जाना चाहिए।

नाविक वर्ग को <header> navbar असाइन करें:

 import React from "react" function Header() {   return (       <header className="navbar">This is the header</header>   ) } export default Header 

अब, components फ़ोल्डर में, Header.css फ़ाइल बनाएँ। इसमें निम्नलिखित कोड डालें:

 .navbar { background-color: purple; } 

अब इस फ़ाइल को import "./Header.css" कमांड के साथ इस फ़ाइल से कनेक्ट करें (इस कमांड के साथ, मानक import कमांड की क्षमताओं का विस्तार करते हुए, हम वेबपैक बंडलर को बताते हैं, जिसका उपयोग create-react-app का उपयोग करके बनाई गई परियोजनाओं में किया जाता है, जो हम चाहते हैं Header.css में Header.js उपयोग करें)।

यह कैसे VSCode में दिखेगा।


स्टाइल फ़ाइल और VSCode में इसका कनेक्शन

यह सब इस तथ्य को जन्म देगा कि पृष्ठ पर एप्लिकेशन द्वारा प्रदर्शित शीर्ष रेखा का स्वरूप बदल जाता है।


शीर्ष पंक्ति शैली बदलें

यहां हमने एक बेहद सरल शैली का उपयोग किया। निम्न के Header.css फ़ाइल Header.css सामग्री को Header.css :

 .navbar {   height: 100px;   background-color: #333;   color: whitesmoke;   margin-bottom: 15px;   text-align: center;   font-size: 30px;   display: flex;   justify-content: center;   align-items: center; } 

इसके अलावा, पहले ही प्रोजेक्ट में मौजूद index.css फ़ाइल को खोलें और उसमें निम्न शैली डालें:

 body {   margin: 0; } 

index.js इस फाइल को index.js में import "./index.css" कमांड import "./index.css" । परिणामस्वरूप, आवेदन पृष्ठ निम्नलिखित आकृति में दिखाया गया रूप लेगा।


पृष्ठ शैली बदलें

कृपया ध्यान दें कि index.css में निर्दिष्ट शैलियों ने पृष्ठ के सभी तत्वों को प्रभावित किया है। यदि आप उपयोग करते हैं, उदाहरण के लिए, प्रयोग के लिए किसी प्रकार के ऑनलाइन संपादक, शैली फ़ाइलों के साथ काम एक विशेष तरीके से आयोजित किया जा सकता है। उदाहरण के लिए, इस तरह के एक संपादक में एक एकल मानक शैली की फ़ाइल हो सकती है जो स्वचालित रूप से पृष्ठ से जुड़ी होती है, जिसमें सीएसएस के नियमों का वर्णन किया गया है जो पृष्ठ के सभी तत्वों पर लागू होगा। हमारे सरल उदाहरण में, सभी शैलियों को index.css में रखना पूरी तरह से संभव होगा।

दरअसल, यह मानते हुए कि आप पहले से ही CSS से परिचित हैं, हम कह सकते हैं कि यहां हम बिल्कुल उसी CSS कोड का उपयोग करते हैं जो साधारण HTML तत्वों को स्टाइल करने के लिए उपयोग किया जाता है। प्रतिक्रिया में कक्षाओं के साथ तत्वों को स्टाइल करते समय ध्यान रखने वाली मुख्य बात यह है कि HTML में उपयोग किए जाने वाले class तत्व की विशेषता के बजाय, className उपयोग किया जाता है।

इसके अलावा, यह ध्यान दिया जाना चाहिए कि कक्षाएं केवल रिएक्ट तत्वों को सौंपी जा सकती हैं - जैसे <header> , <p> या <h1> । यदि आप किसी घटक नाम को घटक उदाहरण - जैसे <Header /> या <MainContent /> असाइन करने का प्रयास करते हैं, तो सिस्टम आपसे अपेक्षा के <MainContent /> काफी अलग व्यवहार करेगा। हम इस बारे में बाद में बात करेंगे। इस बीच, बस याद रखें कि प्रतिक्रिया अनुप्रयोगों में कक्षाएं तत्वों को सौंपी जाती हैं, घटकों को नहीं।

यहां कुछ और है जो आपको रिएक्ट के साथ शुरू करने में मुश्किल हो सकती है। हम स्टाइल तत्वों के बारे में बात कर रहे हैं जिनके पृष्ठ पर पदानुक्रम के विभिन्न स्तर हैं। मान लीजिए कि ऐसा तब होता है जब स्टाइल के लिए CSS फ्लेक्सबॉक्स या CSS ग्रिड तकनीकों का उपयोग किया जाता है। ऐसे मामलों में, उदाहरण के लिए, फ्लेक्स लेआउट का उपयोग करते समय, आपको यह जानना होगा कि कौन सा इकाई फ्लेक्स कंटेनर है और कौन सी संस्थाएं फ्लेक्स तत्व हैं। अर्थात्, यह समझना मुश्किल हो सकता है - कुछ तत्वों को लागू करने के लिए किन तत्वों को स्टाइल करना बिल्कुल सही है। उदाहरण के लिए, मान लीजिए कि हमारे App घटक से <div> तत्व एक फ्लेक्स कंटेनर होना चाहिए:

 import React from "react" import Header from "./components/Header" import MainContent from "./components/MainContent" import Footer from "./components/Footer" function App() {   return (       <div>           <Header />           <MainContent />           <Footer />       </div>   ) } export default App 

इस स्थिति में, फ्लेक्स-तत्वों को Header , MainContent और Footer घटकों के माध्यम से प्रदर्शित किया जाता है। उदाहरण के लिए, Header घटक कोड पर एक नज़र डालें:

 import React from "react" import "./Header.css" function Header() {   return (       <header className="navbar">           This is the header       </header>   ) } export default Header 

<header> तत्व App घटक से <div> तत्व का प्रत्यक्ष वंशज होना चाहिए। इसे फ्लेक्स-एलिमेंट के रूप में स्टाइल किया जाना चाहिए।

इस तरह के निर्माणों की शैलीीकरण को समझने के लिए, आपको यह विचार करने की आवश्यकता है कि एप्लिकेशन द्वारा उत्पन्न HTML कोड क्या होगा। हम उस पृष्ठ के लिए क्रोम डेवलपर टूल के Elements टैब को खोलते हैं जो ब्राउज़र में प्रकट होता है जब create-react-app का उपयोग करके बनाई गई परियोजना के साथ काम करते create-react-app ।


पेज कोड

पहचानकर्ता root साथ <div> तत्व index.html पृष्ठ का वह तत्व है जिसे हम index.js फ़ाइल में ReactDOM.render() विधि में संदर्भित करते हैं। App घटक द्वारा उत्पन्न मार्कअप को इसमें प्रदर्शित किया जाता है, अर्थात्, अगले <div> तत्व, जिसमें <header> , <main> और <footer> तत्संबंधी घटकों द्वारा निर्मित तत्व होते हैं।

यही है, ऊपर दिए गए रिएक्ट एप्लिकेशन के कोड का विश्लेषण करके, हम यह मान सकते हैं कि App घटक में <Header /> निर्माण को <header className="navbar">This is the header</header> साथ बदल दिया जाता है <header className="navbar">This is the header</header> निर्माण है। इस तथ्य को समझना आपको पृष्ठ तत्वों को स्टाइल करने के लिए जटिल योजनाओं का उपयोग करने की अनुमति देता है।

यह स्टाइलिंग प्रतिक्रिया अनुप्रयोगों के लिए हमारा पहला परिचय समाप्त करता है। यह अनुशंसा की जाती है कि आप जो कुछ भी पता लगाते हैं, उसके साथ प्रयोग करते हैं। उदाहरण के लिए, <MainContent /> और <Footer /> घटकों द्वारा <MainContent /> आउटपुट आउटपुट को <MainContent /> प्रयास <MainContent /> ।

परिणाम

आज हमने अपनी पहली प्रशिक्षण परियोजना - TODO अनुप्रयोगों को विकसित करना शुरू कर दिया, और CSS कक्षाओं का उपयोग करके स्टाइल रिएक्ट अनुप्रयोगों से भी परिचित हुए। अगली बार जब हम कोड शैली की विशेषताओं के बारे में बात करेंगे, जो इस पाठ्यक्रम के लेखक का पालन करती है, साथ ही JSX और जावास्क्रिप्ट के बारे में कुछ बातें।

प्रिय पाठकों! क्या आपके पास पहले से ही किसी एप्लिकेशन के लिए एक विचार है जिसे आप रिएक्ट का उपयोग करके बनाना चाहते हैं?