Wenn ein Bild mehr sagt als tausend Worte, dann muss eine interaktive Demo... eine Million wert sein?

M?gen Sie es, durch Schlagworte zu scrollen, um den Zweck einer App zu verstehen? Wahrscheinlich nicht. Und ich hatte keine Lust, so viel Geschw?tz für mein neuestes Leidenschaftsprojekt Wanna zu schreiben. Deshalb habe ich eine interessantere L?sung verfolgt: Meine App auf einer eigenen Landingpage verschachteln, damit Benutzer sie erkunden k?nnen!

Durchführung

Dank der Zusammensetzbarkeit von React k?nnen wir fast einfach unsere Root-App-Komponente rendern und Schluss machen:

export const InteractiveDemo = () => {
    return (
        <App />
    )
}

Es treten jedoch einige Probleme auf:

1. Die Navigation der Demo-App navigiert durch die echte App
2. Die Demo-App ruft echte Daten ab, die m?glicherweise fehlschlagen oder nicht gut dargestellt werden
3. Für Benutzer ist es m?glicherweise nicht offensichtlich, was sie sehen

Lassen Sie uns diese l?sen. Ich m?chte React Router v6 und Apollo GraphQL verwenden, aber die Konzepte gelten unabh?ngig von der Technologie.

Navigation

Um die Navigation der Demo-App von der echten App zu trennen, packen wir sie in einen anderen Navigationsanbieter ein:

+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
+       <UNSAFE_LocationContext.Provider value={null}>
+           <MemoryRouter initialEntries={['/app']}>
                <App />
+           </MemoryRouter>
+       </UNSAFE_LocationContext.Provider>
    )
}

Beachten Sie, dass wir einen MemoryRouter verwenden, damit der Browser auf derselben Seite bleibt, w?hrend die Demo intern navigiert.

Daten

Um die Demo-App mit gef?lschten Daten zu versorgen, pflegen wir mit useState ein gef?lschtes ?Backend“ innerhalb der Client-App und stellen es über einen simulierten Client oder Server bereit (je nach Implementierung). Es greift nur minimal in den Rest des App-Codes ein und erm?glicht es uns sogar, die Demo für manuelle Tests zu verwenden – sehr praktisch, wenn man schnell iteriert.

Ich habe Mock-Apollo-Client verwendet; Für REST oder tRPC k?nnten Sie so etwas wie Nock verwenden. Sie sind für automatisierte Tests gedacht, aber genau das, was wir hier brauchen.

Zuerst erstellen wir einen Schein-Client, dessen Anforderungshandler Demodaten abfragen und so ver?ndern, dass sie das echte Backend nachahmen:

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
}

Dann packen wir unsere Demo genau wie bei der Navigation in einen neuen Anbieter mit unserem Mock-Client:

+import { ApolloProvider } from '@apollo/client'

export const InteractiveDemo = () => {
+   const demoClient = useDemoClient()
    return (
+       <ApolloProvider client={demoClient}> 
            <UNSAFE_LocationContext.Provider value={null}>
                <MemoryRouter initialEntries={['/app']}>
                    <App />
                </MemoryRouter>
            </UNSAFE_LocationContext.Provider>
+       </ApolloProvider>
    )
}

Wenn Sie stattdessen einen Scheinserver verwenden würden, würden Sie dessen URL in den echten Client der Demo-App einfügen.

Visuals

Es funktioniert! Wie machen wir nun für den Benutzer deutlich, dass er sich eine interaktive Demo ansieht?

Da das Mobilger?t an erster Stelle steht, habe ich mich entschieden, die Demo in einem Telefonrahmen zu rendern. Ich habe devices.css verwendet, weil es die Ger?te bietet, die meiner Meinung nach am besten aussehen (d. h. minimaler Rahmen, um den Platz für die Demo zu maximieren). Aber der Einfachheit halber verwenden wir hier eine Bibliothek, die React sofort unterstützt: React-Device-Frameset.

Lassen Sie uns auch Zoom verwenden, um die Demo-Benutzeroberfl?che zu verkleinern und sie sch?n in den Rest der Seite zu verschachteln. In Wanna musste ich diesen Zoom umkehren und berücksichtigen, wenn ich mit visjs-html-nodes, um das Diagramm der eingeladenen Personen zu zeichnen, aber gr??tenteils funktioniert es ?einfach“.

export const InteractiveDemo = () => {
    return (
        <App />
    )
}

Das obige ist der detaillierte Inhalt vonBinden Sie Benutzer sofort ein: Betten Sie eine interaktive Demo in Ihr React SPA ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!