, если изображение стоит тысячи слов, то интерактивная демонстрация должна стоить ... миллион?

вам нравится прокручивать модные слова, чтобы понять цель приложения? Наверное, нет. И я не хотел написать все это для моего последнего проекта страсти, Wanna. Поэтому я преследовал более интересное решение: гнезд моего приложения на собственной целевой странице, чтобы пользователи могли изучить!

] Выполнение

благодаря композиции React, мы можем почти просто отобразить наш корневой компонент и назвать его в день:
]

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

однако, вы столкнетесь с несколькими проблемами:

]
1. навигация по демонстрации приложений будет ориентироваться в реальном приложении
]
2. демо -приложение будет извлекать реальные данные, которые могут пройти или не демонстрировать их хорошо
3. не может быть очевидным для пользователей, на что они смотрят
]

давайте решим их. Хочу использовать React Router V6 и Apollo GraphQL, но концепции применяются независимо от технологии.

] Навигация

, чтобы отделить навигацию по демонстрации от реального приложения, мы завершаем его внутри другого поставщика навигации:

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

Примечание Мы используем MemoryRouter, поэтому браузер остается на одной странице, пока демонстрация перемещается внутри.

] Данные

, чтобы предоставить демонстрационное приложение фальшивыми данными, мы поддерживаем фальшивый «бэкэнд» внутри клиентского приложения с использованием и обслуживаем его с помощью фиктивного клиента или сервера (в зависимости от реализации). Это минимально инвазивно для остальной части кода приложения и даже позволяет нам использовать демонстрацию для ручного тестирования - очень удобно при быстрое итерации.

я использовал Mock-Apollo-Client; Для отдыха или TRPC вы можете использовать что -то вроде Nock. Они предназначены для автоматического тестирования, но это именно то, что нам нужно здесь.

Во -первых, мы создаем фиктивного клиента, чьи обработчики запроса запроса и демонстрации мутируют таким образом, что имитирует реальную бэкэнд:
]

import { InMemoryCache } from '@apollo/client'
import { createMockClient, createMockSubscription } from 'mock-apollo-client'
import { useMemo, useState } from 'react'
// GraphQL documents that our client sends to the real server
import GET_FRIENDS from '../../gql/getFriends.gql'
import ADD_FRIEND from '../../gql/addFriend.gql'

// Simplified example
export const useDemoClient = () => {
    const [friends, setFriends] = useState[{
        __typename: 'User',
        id: 1,
        name: 'Nick',
    }]

    // Cache should persist across clients
    const cache = useMemo(() => { 
        // Should be the same cache configuration you provide to your real Apollo client
        return new InMemoryCache() 
    }, [])

    // We need to recreate the mock client whenever the data changes
    // because it doesn't support resetting request handlers.
    const mockClient = useMemo(() => {
        const client = createMockClient({ cache })

        client.setRequestHandler(GET_FRIENDS, () => Promise.resolve({
            data: {
                friends: friends
            }
        }))
        client.setRequestHandler(ADD_FRIEND, ({ user }) => {
            setFriends((prev) => prev.concat([user]))
            return Promise.resolve({
                data: {
                    addFriend: user
                }
            })
        })

        return client
    }, [friends])

    return mockClient
}

Точно так же, как мы сделали с навигацией, мы завершаем нашу демонстрацию в новый провайдер с нашим макетным клиентом:
]

 import { ApolloProvider } from '@apollo/client'

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

Если вы использовали фиктивный сервер, вы бы ввели бы его URL в реального клиента демонстрации.

] Визуальные эффекты

Оно работает! Теперь, как мы можем сделать очевидным для пользователя, что он просматривает интерактивную демонстрацию?

Wanna Is Mobile-Prirst, поэтому я решил отображать демонстрацию в рамке телефона. Я использовал Devices.css, потому что он предлагает устройства, которые, по моему мнению, выглядят лучше всего (то есть минимальная рамка, чтобы максимизировать демонстрационное пространство). Но для простоты, здесь мы будем использовать библиотеку, которая поддерживает React Of-Use-Box: React-Device-Frameset.

давайте также используем Zoom, чтобы уменьшить демонстрационный пользовательский интерфейс и красиво гнетать его внутри остальной части страницы. В Wange я должен был инвертировать и учитывать этот масштаб при использовании с помощью visjs-html-узлов, чтобы нарисовать график Invitee, но по большей части он «просто работает».

 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 (
        

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




          ]

            
        ]