यह ब्लॉग उन लोगों के लिए है, जिन्हें प्रतिक्रिया की बुनियादी समझ है। js

इस ब्लॉग में, हम react.js में एक साधारण एप्लिकेशन बनाने जा रहे हैं जो सबसे ऊपर एक सर्च बार और नीचे फूलों के नामों की एक सूची प्रदर्शित करता है, जो हमारे नकली डेटा को उर्फ ​​करता है। खोज बार हमें एक इनपुट फ़ील्ड में टाइप करने की अनुमति देगा जो हमारे नकली डेटा के माध्यम से खोज करेगा और स्क्रीन पर तुरंत फूल का नाम प्रदर्शित करेगा। हम इसे प्राप्त करने के लिए वर्ग आधारित घटकों का उपयोग करेंगे।

शुरू करना

एक नई प्रतिक्रिया परियोजना बनाने के लिए, चलाएँ:

नीचे हाइलाइट की गई सभी अनावश्यक फ़ाइलों को हटा दें:

Src फ़ोल्डर में एक घटक सबफ़ोल्डर बनाएँ। फिर फ्लावरकोर्नर और SearchBar नाम के दो चाइल्ड कंपोनेंट्स बनाएं।

CSS स्टाइलिंग के लिए निम्न कोड का उपयोग करें। आप के रूप में आप कृपया आवेदन शैली में आपका स्वागत है।

सेटअप ऐप घटक

App.js आपका मुख्य घटक होगा जहां आपके सभी डेटा और इंस्टेंस विधियां संग्रहीत की जाएंगी। मेरे कोड के लिए नीचे दी गई छवि देखें।

अब इस कोड को तोड़ देता है!

पंक्ति 7: राज्य

हमारे राज्य की वस्तु में, हमारे पास एक "फूल" अवस्था होती है, जिसमें फूलों के नामों की एक सरणी होती है। हमारे पास एक "सर्चटर्म" राज्य भी है, जिसके मूल्य के रूप में एक खाली स्ट्रिंग है जो खोज शब्द का प्रतिनिधित्व करेगा जिसे हम अपने खोज इनपुट क्षेत्र में टाइप करेंगे।

लाइन 21: handleSearchTermChange फ़ंक्शन

SearchBermChange फ़ंक्शन को SeachBar घटक में एक प्रोप के रूप में पास किया जाएगा। ट्रिगर होने पर, setState "searchTerm" के मूल्य को अपडेट करेगा।

पंक्ति 25: फ़िल्टरफ़्लॉवर फ़ंक्शन

फ़िल्टरफ़्लॉवर फ़ंक्शन हमारा कॉलबैक फ़ंक्शन होगा जो नीचे फ़िल्टर विधि में पारित किया जाएगा। ToLowerCase () विधि कम आवरण होने के लिए तारों को बदल देगी। विभाजन () पद्धति स्ट्रिंग में प्रत्येक स्थान पर स्ट्रिंग को सब्सट्रिंग में विभाजित करेगी और सब्सट्रिंग को एक सरणी में रखेगी। तब शामिल होने () विधि स्ट्रिंग्स के उस सरणी को ले जाएगा और उन्हें बिना किसी रिक्त स्थान के एक स्ट्रिंग में संयोजित करेगा। जब उपयोगकर्ता इनपुट क्षेत्र में टाइप करता है, तो इनपुट असंवेदनशील हो सकता है और कई शब्दों के साथ फूलों के नामों में रिक्त स्थान की उपेक्षा करेगा। आपने देखा होगा कि हमने "indexOf (सामान्यीकृत)! == -1" को भी फूलों में शामिल किया था। यह जाँचता है कि क्या हम जो स्ट्रिंग टाइप कर रहे हैं, वह फूल नामों में मौजूद है।

लाइन 30: JSX

App घटक के रेंडर विधि में, हमारे पास SearchBar चाइल्ड कंपोनेंट है, और हमारे फ़िल्टर और मैप मेथड्स में FlowerContainer कंपोनेंट पास हो गया है। फ़िल्टर मेथड में सभी फ़्लॉवर नामों के साथ एक नया एरे बनेगा जो कि टेस्ट को पास करता है जो कि हमारा फ़िल्टरफ़्लोअर फ़ंक्शन है। फिर हम मानचित्र विधि को कहते हैं जो फूलों के हमारे फ़िल्टर किए गए सरणी में अलग-अलग फूलों के घटकों में पार्स किया जाता है।

फ्लावरकोर्नर कंपोनेंट बनाएं

फ्लॉवर्सकंटेनर घटक उन तत्वों को प्रदर्शित करेगा जो खोज इनपुट क्षेत्र में हम जो भी लिखते हैं, उसके समान दिखाई देते हैं।

SearchBar Component बनाएँ

SearchBar घटक में एक onChange घटना होती है जो हमारे handleSearchTermChange फ़ंक्शन को पास करती है जो सर्चटर्म को "e.target.value" पर सेट करती है। जब हम खोज इनपुट फ़ील्ड में टाइप करते हैं, तो setState को handleSearchTermChange में ट्रिगर किया जाता है, फिर हमारा App घटक पुन: रेंडर करता है।

आपका अंतिम उत्पाद इस तरह दिखना चाहिए:

ये लो! मुझे आशा है कि आपने मेरे छोटे ट्यूटोरियल का आनंद लिया। यह प्रतिक्रिया में एक खोज पट्टी बनाने के कई तरीकों में से एक है।

संसाधन: