SandPack React で動的コードプレイグラウンドを作成しましょう!-jsチュートリアル-php.cn

SandPack React で動的コードプレイグラウンドを作成しましょう!

DDD

リリース： 2024-11-16 02:23:03

オリジナル

721 人が閲覧しました

この記事では、CodeSandbox による人気のプレイグラウンドフレームワークである SandPack について調査し、それを使用してユーザーにとってより動的でインタラクティブな環境を作成する方法について説明します。

この記事では、SandPack について知っておくべき基本的な事項のほぼすべてを説明します。ただし、フックやカスタムコンポーネントなどのより高度な機能やクールなカスタマイズオプションについては、私のブログで詳しく説明しています。

この記事の詳細版をご覧ください

サンドパックとは

SandPack は、ブログや技術ドキュメント用のライブコードエディターを構築するためのコンポーネントツールキットです。この記事では、軽量の JavaScript バンドラーである Sandpack-client ではなく、sandpack-react に焦点を当てます。

SandPack を際立たせているのは、利用可能な幅広いカスタマイズオプションです。さらに、始めるのはとても簡単です。 Sandpack-react の最も便利な機能は次のとおりです:

一般的な言語とフレームワーク用の事前に構築されたテンプレート
エディター用の多数の事前構築済みテーマと、カスタムテーマを作成するオプション。
すべての npm 依存関係と主要な JavaScript フレームワークのサポート。
UI とプレイグラウンドのほぼすべての側面をカスタマイズするオプション。
事前構築されたコンポーザブルコンポーネントを使用して、完全にカスタムのプレイグラウンドを作成できます。
プロバイダーとカスタムフックを使用してカスタムコンポーネントを作成できます。

ザプレイグラウンドの概要

sandpack-react を開始するには、次の npm または Yarn コマンドを実行します。

npm i @codesandbox/sandpack-react

または
糸追加 @codesandbox/sandpack-react

次に、Sandpack プレイグラウンドをインポートし、次のコードを使用してレンダリングします。

import { Sandpack } from "@codesandbox/sandpack-react";

export default function App() {
  return <Sandpack />
}

ログイン後にコピー

Create a Dynamic Code Playground with SandPack React!

<サンドパック />コンポーネントは、すぐに参加できる空のプレイグラウンドを設定します。デフォルトでは、プレイグラウンドには基本的な React テンプレートが含まれています。テンプレートやテーマなどをカスタマイズするための基本的な小道具を見てみましょう:

template: このプロパティは、テンプレートの事前定義されたリストを受け入れます。デフォルトではバニラが設定されています。
files: これは非常に便利なプロパティです。通常のフォルダー構造と同様に、カスタムコードを使用して複数のファイルを作成できます。ファイルオブジェクトには、値 (相対ファイルパス) とキー (ファイルの内容) が含まれます。このオブジェクト内のファイルはタブにも自動的に表示されます。
options: options オブジェクトを使用して、いくつかの機能をカスタマイズできます。完全なリストはここでご覧いただけます。最も役立つものには次のようなものがあります。
- showLineNumbers: 行番号の表示を切り替えます。
- showTabs: タブの表示/非表示を切り替えます。
- クラス: 既存のテンプレートクラスにカスタムクラス名を割り当てて、さらにカスタマイズできます。
依存関係: 依存関係オブジェクトには、アプリに必要な任意の NPM パッケージを含めることができます。形式と構文は package.json ファイルの形式と構文に似ています。
テーマ: 事前に構築されたテーマを選択するか、完全にカスタムのテーマを割り当てることができます。

PlayGround のカスタマイズ

私たちのスタイルに合うようにデフォルトのプレイグラウンドを微調整し、試してみる楽しいサンプルを作成しましょう。サイトのテーマに合わせてエディターをカスタマイズすると、エディターがシームレスに溶け込み、サードパーティ製の埋め込みのように感じられなくなります。まず、files プロップを使用して、単純なカウンターボタンを作成しましょう。 App.js ファイルの他に、App.css ファイルも作成します。

以下の例とコードを見てください:

この例では、カウンターコンポーネントがプレイグラウンドにレンダリングされます。ファイルオブジェクトには、App.js と App.css の両方のコードが含まれています。前述の事前構築済みリストからテーマを選択し、サンドパックテーマをソースとして、スタイルのタッチを追加しました。行番号も true に設定されています。

さらに、遊び場のレイアウトを簡単にカスタマイズできます。これは、カスタムクラスを適用するか、SandPack が提供する事前構築されたオプションを利用することで実行できます。たとえば、次のようなカスタムクラスを使用できます:

import { Sandpack } from "@codesandbox/sandpack-react";

export default function App() {
  return <Sandpack />
}

ログイン後にコピー

その後、CSS を使用して外観とレイアウトを調整し、視覚的なデザインをさらに細かく制御できるようになります。

もう 1 つの便利な機能は、異なるレイアウトモードを切り替える機能です。 SandPack には、プレビュー、テスト、コンソールの 3 つのモードが用意されています。デフォルトのモードはプレビューですが、テストモードはテストを実行するためのスイートを提供し、コンソールモードはプレビューウィンドウの代わりに端末/コンソールコンポーネントをレンダリングします。コンソールモードは、サーバー側ロジックの出力を表示するのに役立ちます。 rtl (右から左へのレイアウト) オプションを使用してレイアウトの方向を切り替えることもできます。

出力のカスタマイズ

エディタ自体に加えて、出力表示もカスタマイズできます。たとえば、コンソールの表示または非表示を選択したり、レイアウトを変更したり、プレビューウィンドウの外観を変更したりすることもできます。かなりクールですよね！コードエディターには、大幅にカスタマイズされた編集ウィンドウがあることがよくありますが、実際の出力にはそれほど注意が払われません。

コンソールには、あらゆる種類のエラーとコンソールログが表示されます。表示されるコードスニペットの種類に応じて、コンソールを表示または非表示にする必要があります。 [コンソールを表示] ボタンの表示/非表示を切り替えることもできます。デフォルトでは、コンソールは非表示になっています。すべての SandPack コンポーネントと同様、カスタム CSS クラスを使用してスタイルを個別に変更できます。

import { Sandpack } from "@codesandbox/sandpack-react";

export default function App() {
  return <Sandpack />
}

ログイン後にコピー

コンソールの他に、表示ウィンドウ自体もカスタマイズできます。たとえば、showNavigator オプションを使用してナビゲータバーをオンまたはオフにし、resizablePanels オプションを使用してパネルのサイズを変更できるかどうかを決定できます。

<Sandpack
  theme={theme}
  template="react"
  options={{
    classes: {
      "sp-wrapper": "custom-wrapper",
      "sp-layout": "custom-layout",
      "sp-tab-button": "custom-tab",
    },
  }}
/>

ログイン後にコピー

結果は次のようになります:

Create a Dynamic Code Playground with SandPack React!