]

क्या आप ऐप के उद्देश्य को समझने के लिए buzzwords के माध्यम से स्क्रॉल करने का आनंद लेते हैं? शायद नहीं। और मुझे अपने नवीनतम जुनून प्रोजेक्ट, वाना के लिए उस सभी को लिखने की परवाह नहीं थी। इसलिए मैंने एक और दिलचस्प समाधान का पीछा किया: उपयोगकर्ताओं को पता लगाने के लिए अपने स्वयं के लैंडिंग पृष्ठ के अंदर अपने ऐप को नेस्ट करें!

]

कार्यान्वयन

] ] वापस करना ( ) }

] ]

यह उपयोगकर्ताओं के लिए स्पष्ट नहीं हो सकता है कि वे क्या देख रहे हैं

आइए उन को हल करें। वाना राउटर v6 और अपोलो ग्राफक्ल का उपयोग करता है, लेकिन अवधारणाएं प्रौद्योगिकी की परवाह किए बिना लागू होती हैं।
मार्गदर्शन

]

export const InteractiveDemo = () => {
    return (
        
    )
}

]

डेटा

] यह बाकी ऐप कोड के लिए न्यूनतम इनवेसिव है, और यहां तक ​​कि हमें मैनुअल परीक्षण के लिए डेमो का उपयोग करने देता है - बहुत आसान है जब जल्दी से पुनरावृति।

1. मैंने मॉक-एपोलो-क्लाइंट का उपयोग किया; REST या TRPC के लिए, आप Nock जैसी किसी चीज़ का उपयोग कर सकते हैं। वे स्वचालित परीक्षण के लिए हैं, लेकिन वास्तव में हमें यहां क्या चाहिए।
]
2. ] आयात {createmockclient, createmocksubscription} 'मॉक-एपोलो-क्लाइंट' से आयात {usememo, usestate} 'रिएक्ट' से // GraphQL दस्तावेज़ जो हमारे क्लाइंट को वास्तविक सर्वर पर भेजता है आयात get_friends से '../../gql/getfridments.gql' आयात add_friend से '../../gql/addfriend.gql' // सरलीकृत उदाहरण एक्सपोर्ट कांस्ट यूज्डेमोक्लिएंट = () => { const [दोस्तों, सेटफ्रेंड्स] = usestate [{ __typeName: 'उपयोगकर्ता', आईडी: 1, नाम: 'निक', }] // कैश को ग्राहकों के पार जारी रखना चाहिए const cache = usememo () => { // वही कैश कॉन्फ़िगरेशन होना चाहिए जो आप अपने वास्तविक अपोलो क्लाइंट को प्रदान करते हैं नया inmemorycache लौटाएं () }, []) // जब भी डेटा बदलता है, हमें मॉक क्लाइंट को फिर से बनाने की आवश्यकता होती है // क्योंकि यह अनुरोध हैंडलर्स को रीसेट करने का समर्थन नहीं करता है। const mockclient = usememo () => { const क्लाइंट = createMockClient ({कैश}) client.setRequestHandler (get_friends, () => proming.resolve ({{ डेटा: { दोस्तों: दोस्तों } })) client.setrequesthandler (add_friend, ({उपयोगकर्ता}) => { सेटफ्रेंड्स ((prev) => prev.concat ([उपयोगकर्ता])) वापसी वादा। resolve ({ डेटा: { जोड़ें: उपयोगकर्ता } }) }) वापसी ग्राहक }, [दोस्त]) मॉकक्लिएंट लौटें }
]
3. ] एक्सपोर्ट कांस्ट इंटरएक्टिवेडमो = () => { const democlient = usedemoclient () वापस करना ( स्मृति> ) }
]

विजुअल्स

यह काम करता है! अब हम उपयोगकर्ता को यह कैसे स्पष्ट करते हैं कि वे एक इंटरैक्टिव डेमो देख रहे हैं?

] मैंने डिवाइस का उपयोग किया। CSS क्योंकि यह उन उपकरणों की पेशकश करता है जिन्हें मैंने सोचा था कि सबसे अच्छा लग रहा था (यानी डेमो स्पेस को अधिकतम करने के लिए न्यूनतम बेजल)। लेकिन सादगी के लिए, यहां हम एक लाइब्रेरी का उपयोग करेंगे जो रिएक्ट आउट-ऑफ-द-बॉक्स का समर्थन करता है: रिएक्ट-डिवाइस-फ़्रेमसेट।

] वाना में मुझे इस ज़ूम के लिए उल्टा और खाता होना पड़ा, जब इनविटे ग्राफ को आकर्षित करने के लिए VisJS-HTML-nodes के साथ का उपयोग किया, लेकिन अधिकांश भाग के लिए यह "बस काम करता है"।

] आयात 'रिएक्ट-डिवाइस-फ़्रेमसेट/स्टाइल्स/मार्वल-डिवाइस.min.css' एक्सपोर्ट कांस्ट इंटरएक्टिवेडमो = () => { const democlient = usedemoclient () वापस करना (

अंत में, यह एक एनीमेशन करने में मदद करता है ताकि यह स्पष्ट रूप से एक स्थिर छवि नहीं है। उदाहरण के लिए, गतिविधि इनपुट फ़ील्ड में लगातार भूत-प्रकार के सुझाव देना चाहते हैं।

 import { MemoryRouter, UNSAFE_LocationContext } from 'react-router'

export const InteractiveDemo = () => {
    return (
        // Hack to nest MemoryRouter inside BrowserRouter.
        // https://github.com/remix-run/react-router/issues/7375
        
            
                
            
        
    )
}

एकीकरण

]

एक्सपोर्ट कास्ट लैंडिंग = () => { वापस करना (

{/ * ... */} {/ * ... */}

) }