Si une image vaut mille mots, alors une démo interactive doit valoir ... un million?

Aimez-vous faire défiler les mots à la mode pour comprendre le but d'une application? Probablement pas. Et je ne me souciais pas d'écrire tout ce blather pour mon dernier projet passionné, Wanna. J'ai donc poursuivi une solution plus intéressante: nid mon application dans sa propre page de destination pour que les utilisateurs puissent explorer!

Mise en œuvre

Grâce à la composabilité de React, nous pouvons presque Rendez simplement notre composant d'application racine et l'appelez un jour:

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

Cependant, vous rencontrerez quelques problèmes:

1. La navigation de l'application de démonstration naviguera dans la vraie application
2. L'application de démonstration récupérera les données réelles, qui peuvent échouer ou ne pas la présenter bien
3. Il n'est peut-être pas évident pour les utilisateurs ce qu'ils regardent

résolvons-les. Je veux utiliser React Router V6 et Apollo GraphQL, mais les concepts s'appliquent quelle que soit la technologie.

Navigation

Pour séparer la navigation de l'application de démon

 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
        
            
                
            
        
    )
}

 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
        
            
                
            
        
    )
}

 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
        
            
                
            
        
    )
}

 import { DeviceFrameset } from 'react-device-frameset'
 import 'react-device-frameset/styles/marvel-devices.min.css'

export const InteractiveDemo = () => {
    const demoClient = useDemoClient()
    return (
        



Lastly, it helps to have an animation so it's clearly not a static image. For example, Wanna continually ghost-types suggestions in the activity input field.


  
  
  Integration


Now that we have our InteractiveDemo component, we render it inside our landing page and we're done!



export const Landing = () => {
    return (
        

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