ユーザーを即座に関与させる: React SPA にインタラクティブなデモを埋め込む

写真が 1000 の言葉に匹敵するなら、インタラクティブなデモには 100 万の言葉の価値があるはずです?

アプリの目的を理解するために流行語をスクロールするのは好きですか?おそらくそうではありません。そして、私は最近情熱を注いでいたプロジェクト「Wanna」のために、そんな大げさなことを書く気はありませんでした。そこで私は、より興味深い解決策を追求しました。それは、ユーザーが探索できるように、アプリを独自のランディング ページ内にネストするというものです。

この gif には 263 フレームがあるので、263,000 ワードの価値があると思います

実装

React のコンポーザビリティのおかげで、ほぼ単にルート App コンポーネントをレンダリングして終わりにすることができます。

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

ただし、次のような問題が発生します。

1. デモ アプリのナビゲーションは実際のアプリをナビゲートします
2. デモ アプリは実際のデータを取得しますが、失敗するか、うまく表示されない可能性があります
3. ユーザーにとって、何を見ているのかは明らかではない可能性があります

それらを解決しましょう。 Wanna は 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
+       <unsafe_locationcontext.provider value="{null}">
+           <memoryrouter initialentries="{['/app']}">
                <app></app>
+           </memoryrouter>
+       </unsafe_locationcontext.provider>
    )
}

デモが内部で移動している間、ブラウザは同じページに留まるように MemoryRouter を使用していることに注意してください。

データ

デモ アプリに偽のデータを提供するために、useState を使用してクライアント アプリ内に偽の「バックエンド」を維持し、(実装に応じて) 模擬クライアントまたはサーバー経由でそれを提供します。これは、アプリ コードの残りの部分への侵入を最小限に抑え、手動テストにデモを使用することもできます。迅速に反復する場合に非常に便利です。

私はmock-apollo-clientを使用しました。 REST または 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 (
+       <apolloprovider client="{demoClient}"> 
            <unsafe_locationcontext.provider value="{null}">
                <memoryrouter initialentries="{['/app']}">
                    <app></app>
                </memoryrouter>
            </unsafe_locationcontext.provider>
+       </apolloprovider>
    )
}

代わりにモックサーバーを使用した場合は、その URL をデモアプリの実際のクライアントに挿入します。

ビジュアル

効果あります！では、インタラクティブなデモを見ていることをユーザーに明らかにするにはどうすればよいでしょうか?

Wanna はモバイルファーストであるため、携帯電話のフレーム内にデモをレンダリングすることにしました。 devices.css を使用したのは、私が最も見栄えが良いと考えたデバイス (つまり、デモスペースを最大化するための最小限のベゼル) が提供されるためです。ただし、簡単にするために、ここではすぐに使える React をサポートするライブラリ、react-device-frameset を使用します。

ズームを使用してデモ UI を縮小し、ページの残りの部分内にうまくネストしてみましょう。 Wanna では、 を使用するときにこのズームを反転して考慮する必要がありました。 visjs-html-nodes を使用して招待者グラフを描画しますが、ほとんどの場合は「正常に動作します」。

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

以上がユーザーを即座に関与させる: React SPA にインタラクティブなデモを埋め込むの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。