रिएक्ट का उपयोग करके हैकर न्यूज़ क्लोन कैसे बनाएं

हैकर न्यूज़ उद्यमियों और डेवलपर्स के बीच एक लोकप्रिय वेबसाइट है। इसमें कंप्यूटर विज्ञान और उद्यमिता पर केंद्रित सामग्री शामिल है।

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

प्रोजेक्ट और डेवलपमेंट सर्वर की स्थापना

इस परियोजना के लिए आवश्यक पैकेजों में शामिल हैं:

• रूटिंग को संभालने के लिए रिएक्ट राउटर सिंगल पेज एप्लिकेशन (एसपीए).
instagram viewer
• HTMLReactParser द्वारा लौटाए गए HTML को पार्स करने के लिए एप्लीकेशन प्रोग्रामिंग इंटरफ़ेस (एपीआई).
• एपीआई द्वारा लौटाई गई तारीखों को संभालने के लिए मोमेंटजेएस।

टर्मिनल खोलें और चलाएँ:

यार्न वाइट बनाएं

आप भी उपयोग कर सकते हैं नोड पैकेज मैनेजर (एनपीएम) यदि आप इसे सूत से अधिक पसंद करते हैं। उपरोक्त कमांड को एक बुनियादी प्रोजेक्ट को तैयार करने के लिए वाइट बिल्ड टूल का उपयोग करना चाहिए। अपने प्रोजेक्ट को नाम दें और जब फ्रेमवर्क के लिए कहा जाए, तो चुनें प्रतिक्रिया और वैरिएंट को इस पर सेट करें जावास्क्रिप्ट.

अब सीडी प्रोजेक्ट फ़ोल्डर में डालें और टर्मिनल में निम्नलिखित कमांड चलाकर पहले बताए गए पैकेज इंस्टॉल करें:

यार्न html-प्रतिक्रिया-पार्सर जोड़ें
यार्न प्रतिक्रिया-राउटर-डोम जोड़ें
यार्न पल जोड़ें
यार्न देव

सभी पैकेजों को स्थापित करने और विकास सर्वर शुरू करने के बाद, किसी भी कोड संपादक में प्रोजेक्ट खोलें और इसमें तीन फ़ोल्डर्स बनाएं स्रोत फ़ोल्डर अर्थात्: अवयव, हुक, और पृष्ठों.

में अवयव फ़ोल्डर, दो फ़ाइलें जोड़ें टिप्पणियाँ.jsx और नेवबार.जेएसएक्स. में हुक फ़ोल्डर, एक फ़ाइल जोड़ें useFetch.jsx. फिर में पृष्ठों फ़ोल्डर, दो फ़ाइलें जोड़ें ListPage.jsx और पोस्टपेज.जेएसएक्स.

हटाएँ ऐप.सीएसएस फ़ाइल करें और इसकी सामग्री बदलें मुख्य.जेएसएक्स निम्नलिखित के साथ फ़ाइल करें:

आयात प्रतिक्रिया से'प्रतिक्रिया'
आयात { ब्राउज़रराउटर } से'प्रतिक्रिया-राउटर-डोम'
आयात रिएक्टडोम से'प्रतिक्रिया-डोम/ग्राहक'
आयात अनुप्रयोग से'./App.jsx'
आयात'./index.css'
ReactDOM.createRoot(दस्तावेज़.getElementById('जड़'))।प्रदान करना(



 </BrowserRouter>
 </React.StrictMode>,
)

में App.jsx फ़ाइल, सभी बॉयलरप्लेट कोड को हटा दें और फ़ाइल को इस तरह संशोधित करें कि आपके पास केवल कार्यात्मक घटक शेष रहे:

समारोहअनुप्रयोग() {
वापस करना (
 <>
 </>
 )
}
निर्यातगलती करना अनुप्रयोग

आवश्यक मॉड्यूल आयात करें:

आयात { मार्ग, मार्ग } से'प्रतिक्रिया-राउटर-डोम'
आयात सूची पृष्ठ से'./पेज/लिस्टपेज'
आयात नेवबार से'./घटक/नेवबार'
आयात पोस्टपेज से'./पेज/पोस्टपेज'

प्रतिक्रिया खंड में, जोड़ें मार्गों तीन के साथ घटक मार्ग पथों के साथ बाल घटक: /, /:type, और /item/:id क्रमश।

'/'
 तत्व={<> <नेवबार /><सूची पृष्ठ /></>}>
 </Route>
'/:प्रकार'
 तत्व={<> <नेवबार /><सूची पृष्ठ /></>}>
 </Route>
'/सामान आईडी'
 तत्व={}>
 </Route>
</Routes>

यूज़फ़ेच कस्टम हुक बनाना

यह प्रोजेक्ट दो एपीआई का उपयोग करता है। पहला एपीआई किसी दिए गए श्रेणी में पदों की सूची लाने के लिए जिम्मेदार है (प्रकार), जबकि दूसरा एपीआई अल्गोलिया एपीआई है जो किसी विशेष पोस्ट और उसके लाने के लिए जिम्मेदार है टिप्पणियाँ।

खोलें useFetch.jsx फ़ाइल, हुक को डिफ़ॉल्ट निर्यात के रूप में परिभाषित करें और आयात करें उपयोग राज्य और उपयोगप्रभाव हुक.

आयात {यूज़स्टेट, यूज़इफ़ेक्ट } से"प्रतिक्रिया";
निर्यातगलती करनासमारोहउपयोग करें(प्रकार, आईडी) {
}

तीन राज्य चर को परिभाषित करें अर्थात्: आंकड़े, गलती, और लोड हो रहा है, उनके संबंधित सेटर कार्यों के साथ।

कॉन्स्ट [डेटा, सेटडेटा] = यूज़स्टेट();
कॉन्स्ट [त्रुटि, सेट एरर] = यूज़स्टेट(असत्य);
कॉन्स्ट [लोडिंग, सेटलोडिंग] = यूज़स्टेट(सत्य);

फिर, एक जोड़ें उपयोगप्रभाव निर्भरताओं के साथ जुड़ें: पहचान और प्रकार.

उपयोगप्रभाव(() => {
}, [आईडी का प्रकार])

इसके बाद कॉलबैक फ़ंक्शन में फ़ंक्शन जोड़ें फ़ेचडेटा() उपयुक्त एपीआई से डेटा लाने के लिए। यदि पैरामीटर पारित किया गया है प्रकार, पहले एपीआई का उपयोग करें। अन्यथा, दूसरे एपीआई का उपयोग करें।

asyncसमारोहडेटा प्राप्त करें() {
होने देना प्रतिक्रिया, यूआरएल, पैरामीटर;
अगर (प्रकार) { 
 यूआरएल = " https://node-hnapi.herokuapp.com/"; 
 पैरामीटर = type.toLowerCase(); 
 }
अन्यअगर (पहचान) { 
 यूआरएल = " https://hn.algolia.com/api/v1/items/"; 
 पैरामीटर = id.toLowerCase(); 
 }
कोशिश {
 प्रतिक्रिया = इंतजार लाना(`${यूआरएल}${पैरामीटर}`);
 } पकड़ना (गलती) {
 सेटत्रुटि(सत्य);
 }
अगर (जवाब) अगर (प्रतिक्रिया.स्थिति !== 200) {
 सेटत्रुटि(सत्य);
 } अन्य {
होने देना डेटा = इंतजार प्रतिक्रिया.json();
 सेटलोडिंग(असत्य);
 सेटडेटा (डेटा);
 }
}
फ़ेचडेटा();

अंत में, वापस लौटें लोड हो रहा है, गलती, और आंकड़े चर को एक वस्तु के रूप में बताएं।

वापस करना { लोड हो रहा है, त्रुटि, डेटा };

अनुरोधित श्रेणी के आधार पर पदों की सूची प्रस्तुत करना

जब भी उपयोगकर्ता नेविगेट करता है / या /:type, प्रतिक्रिया को प्रस्तुत करना चाहिए सूची पृष्ठ अवयव। इस कार्यक्षमता को लागू करने के लिए, सबसे पहले, आवश्यक मॉड्यूल आयात करें:

आयात { यूज़नेविगेट, यूज़पैराम्स } से"प्रतिक्रिया-राउटर-डोम";
आयात उपयोग करें से"../हुक/यूज़फ़ेच";

फिर, कार्यात्मक घटक को परिभाषित करें और फिर गतिशील पैरामीटर निर्दिष्ट करें, प्रकार तक प्रकार चर। यदि डायनेमिक पैरामीटर उपलब्ध नहीं है, तो सेट करें प्रकार परिवर्तनशील से समाचार. फिर, कॉल करें उपयोग करें अंकुश।

निर्यातगलती करनासमारोहसूची पृष्ठ() {
होने देना { प्रकार } = उपयोग पैराम्स();
कॉन्स्ट नेविगेट करें = उपयोग करेंनेविगेट();
अगर (!प्रकार) प्रकार= "समाचार";
कॉन्स्ट { लोडिंग, त्रुटि, डेटा } = यूज़फ़ेच (प्रकार, व्यर्थ);
}

इसके बाद, इनमें से किसी एक के आधार पर उपयुक्त JSX कोड लौटाएँ लोड हो रहा है, गलती, या आंकड़े चर सत्य है.

अगर (गलती) {
वापस करना<डिव>कुछ गलत हो गया!डिव>
}
अगर (लोड हो रहा है) {
वापस करना<डिव>लोड हो रहा हैडिव>
}
अगर (आंकड़े) {
दस्तावेज़.शीर्षक = type.toUpperCase();
वापस करना<डिव>
'सूची-प्रकार'>{प्रकार}</div>
{डेटा.मैप(वस्तु =>
"वस्तु">
"मद शीर्षक"
 ऑनक्लिक={() => नेविगेट करें(`/आइटम/${आइटम.आईडी}`)}>
 {मद शीर्षक}
 </div>
 {आइटम.डोमेन && 
"आइटम-लिंक"
 ऑनक्लिक={() => खुला(`${आइटम.यूआरएल}`)}>
 ({आइटम.डोमेन})</span>}
 </div>)}
 </div>
 </div>
}

पोस्टपेज घटक बनाना

सबसे पहले, उपयुक्त मॉड्यूल और घटकों को आयात करें, फिर डिफ़ॉल्ट कार्यात्मक घटक को परिभाषित करें, असाइन करें पहचान गतिशील पैरामीटर के लिए पहचान वेरिएबल और, कॉल करें उपयोग करें अंकुश। सुनिश्चित करें कि आपने प्रतिक्रिया को नष्ट कर दिया है।

आयात {लिंक, उपयोग पैरामीटर्स } से"प्रतिक्रिया-राउटर-डोम";
आयात पार्स से'एचटीएमएल-प्रतिक्रिया-पार्सर';
आयात पल से"पल";
आयात टिप्पणियाँ से"../घटक/टिप्पणियाँ";
आयात उपयोग करें से"../हुक/यूज़फ़ेच";
निर्यातगलती करनासमारोहपोस्टपेज() {
कॉन्स्ट {आईडी} = यूज़पैराम्स();
कॉन्स्ट { लोड हो रहा है, त्रुटि, डेटा } = useFetch(व्यर्थ, पहचान);
}

और बिल्कुल वैसे ही जैसे सूची पृष्ठ घटक, निम्नलिखित चर की स्थिति के आधार पर उपयुक्त JSX प्रस्तुत करें: लोड हो रहा है, गलती, और आंकड़े.

अगर (गलती) {
वापस करना<डिव>कुछ गलत हो गया!डिव>
}
अगर (लोड हो रहा है) {
वापस करना<डिव>लोड हो रहा हैडिव>
}
अगर (आंकड़े) {
दस्तावेज़.शीर्षक=डेटा.शीर्षक;
वापस करना<डिव>
"शीर्षक पोस्ट करें">{डेटा.शीर्षक}</div>
"पोस्ट-मेटाडेटा">
 {डेटा.यूआरएल && 
 वर्गनाम="पोस्ट-लिंक">वेबसाइट पर जाएँ</Link>}
"पोस्ट-लेखक">{डेटा.लेखक}</span>
"पोस्ट समय">
 {क्षण (data.created_at).fromNow()}
 </span>
 </div>
 {डेटा.टेक्स्ट && 
"पोस्ट-पाठ">
 {पार्स (डेटा.टेक्स्ट)}</div>}
"टिप्पणियां भेजें">
"टिप्पणियाँ-लेबल">टिप्पणियाँ</div>

 </div>
 </div>
}

आयात करें पार्स मॉड्यूल और पल मापांक। डिफ़ॉल्ट कार्यात्मक घटक को परिभाषित करें टिप्पणियाँ जो अंदर ले जाता है टिप्पणियाँडेटा ऐरे को एक प्रोप के रूप में, ऐरे के माध्यम से पार करता है, और एक प्रस्तुत करता है नोड प्रत्येक तत्व के लिए घटक.

आयात पार्स से'एचटीएमएल-प्रतिक्रिया-पार्सर';
आयात पल से"पल";
निर्यातगलती करनासमारोहटिप्पणियाँ({ टिप्पणियाँडेटा }) {
वापस करना<>
 {टिप्पणियाँData.map(टिप्पणीडेटा =><नोडटिप्पणीडेटा={टिप्पणीडेटा}चाबी={commentData.id}
 />)}
 </>
}

अगला, परिभाषित करें नोड के ठीक नीचे कार्यात्मक घटक टिप्पणियाँ अवयव। नोड घटक स्वयं को पुनरावर्ती रूप से प्रस्तुत करके टिप्पणी, मेटाडेटा और प्रत्येक टिप्पणी (यदि कोई हो) का उत्तर देता है।

समारोहनोड({ टिप्पणीडेटा }) {
वापस करना<डिवकक्षा का नाम="टिप्पणी">
 {
 टिप्पणीडेटा.पाठ &&
 <>
'टिप्पणी-मेटाडेटा'>
{commentData.author}</span>

 {पल (commentData.created_at).fromNow()}
 </span>
 </div>
'टिप्पणी-पाठ'>
 {parse (commentData.text)}</div>
 </>
 }
'टिप्पणी-उत्तर'>
 {(commentData.children) && 
 commentData.children.map(बच्चा =>
)}
 </div>
 </div>
}

उपरोक्त कोड ब्लॉक में, पार्स में संग्रहीत HTML को पार्स करने के लिए जिम्मेदार है commentData.text, जबकि पल टिप्पणी समय को पार्स करने और इसका उपयोग करके सापेक्ष समय लौटाने के लिए जिम्मेदार है अभी से() तरीका।

नेवबार घटक बनाना

खोलें नेवबार.जेएसएक्स फ़ाइल करें और आयात करें नेवलिंक से मॉड्यूल प्रतिक्रिया-राउटर-डोम मापांक। अंत में, कार्यात्मक घटक को परिभाषित करें और एक पैरेंट लौटाएँ एनएवी पांच के साथ तत्व नेवलिंक उपयुक्त श्रेणियों (या प्रकारों) की ओर इशारा करने वाले तत्व।

आयात { नेवलिंक } से"प्रतिक्रिया-राउटर-डोम"
निर्यातगलती करनासमारोहनेवबार() {
वापस करना<एनएवी>
"/समाचार">घर</NavLink>
"/श्रेष्ठ">सर्वश्रेष्ठ</NavLink>
"/दिखाना">दिखाएँ</NavLink>
"/पूछना">पूछो</NavLink>
"/नौकरियां"> नौकरियाँ</NavLink>
 </nav>
}

बधाई! आपने अभी-अभी हैकर न्यूज़ के लिए अपना स्वयं का फ्रंट-एंड क्लाइंट बनाया है।

क्लोन एप्लिकेशन बनाकर अपने प्रतिक्रिया कौशल को मजबूत करें

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

स्क्रैच से अपना खुद का राउटर बनाने की कोशिश करने के बजाय, पेशेवरों द्वारा बनाए गए टूल का उपयोग करना बेहतर है जो एसपीए बनाना आसान बनाने के लिए समर्पित हैं।