5分で反応するヘッドレスのCMSを加えてください

この短いチュートリアルでは、我々はどのように我々は新しいの助けを借りて反応アプリケーションにStoryBlokを統合することができます見ていきます@storyblok/react , 公式StoryBlokはSDKに反応します.StoryBlokからデータを取得する方法を示します.Storyblok Bridge ビジュアルエディタでライブ変更をプレビューするには

HINT: You can find the final code for this tutorial in this repo.

要件

このチュートリアルに従ういくつかの要件があります.

反応とJavaScriptの基本的な理解.

ノード.JS LTSバージョン(NPMまたは糸をインストール).

エーStoryblok App StoryBlokでプロジェクトを作成するためのアカウント.

プロジェクト設定

新しい反応プロジェクトを作成して起動します.

npx create-react-app storyblok-react-boilerplate

パッケージをインストールする@storyblok/react . これは、このチュートリアルに必要なパッケージです.

cd storyblok-react-boilerplate
npm install @storyblok/react
# yarn add @storyblok/react

パッケージ@ StoryBlok/反応我々はすべてを設定することができます.それはStoryBlokからロードされるデータを得るのを助けますStoryblok Bridge リアルタイムの視覚的な更新のためには、StoryBloketable機能を提供しますVisual Editor .
パッケージがインストールされたら、開発サーバを起動できます.

npm run start
# yarn start

これは、URLを自動的にブラウザでタブを開く必要がありますhttp://localhost:3000 , または、プロジェクトが起動したら手動でURLに移動できます.あなたはこのスクリーンを見るべきです.

StoryBlok V 2を使用しているなら、https proxyでdevサーバを設定する必要があります.私たちはポート3010を使用するので、ウェブサイトにアクセスするURLはhttps://localhost:3010/

HINT: If you don’t know how to setup an HTTPS proxy on macOS, read this guide.

空間構成

今+をクリックしてStoryBlokアプリの新しいスペースを作成します.を選択して最初のオプションをゼロから起動し、名前を与える.

我々は、すでに我々のためにつくられるサンプル内容でスペースを得ます.これの後、我々は我々のウェブサイトのライブプレビューを得るために、我々のビジュアルエディタを構成する必要があります.このため、[設定]ビジュアルエディタに移動し、場所を設定しますhttps://localhost:3010/ .

今すぐコンテンツセクションからホームページに移動します.あなたはすでに我々の反応アプリを見る必要があります.エントリの設定をクリックし、「/」に設定します.これは、スラッグに応じてデータを取得するときに有用です.

また、私たちの右側には、我々のアプリの後半に作成されるコンポーネントのいくつかを見ることができます.

StoryBlokに反応する接続

SDKの助けを借りてStoryBlokに反応アプリケーションを接続します.我々は、パッケージから2つのものを使用しますindex.js ファイルstoryblokInit and apiPlugin . 次のコードを追加する必要がありますindex.js ファイル.

// index.js
...

import { storyblokInit, apiPlugin } from "@storyblok/react";

storyblokInit({
  accessToken: "YOUR_PREVIEW_TOKEN",
  use: [apiPlugin],
  components: {}
});

...

storyblokInit スペースとの接続を設定することができますまた、StoryBlokブリッジをロードします.これは、コンテンツを編集するときにリアルタイムの変更を確認するのに役立ちます.The apiPlugin ここでは、データを得ることができます.あなたが使いたくないならばapiPlugin , お好みの方法や関数を使用してデータを取得できます.
我々は、我々が我々のスペースで持っているものに従って、我々がつくる必要があるすべての反応する成分を宣言するために、ここでコンポーネントキーを持っています.これらのコンポーネントはStoryblokComponent どのような我々は少し表示されます.コンポーネントを作成している間、名前を同じ位置に保つ必要があります.
プレビュートークンを取得し、AccessStokenで値を置き換えます.これを行うには、設定にアクセスしてくださいPreview アクセストークン.

データを取得し、動的にそれをロードするには、アプリケーションのコードを変更します.以下のJS :

// App.js
import { useStoryblok, StoryblokComponent } from "@storyblok/react";

function App() {

  let slug =
    window.location.pathname === "/"
      ? "home"
      : window.location.pathname.replace("/", "");

  const story = useStoryblok(slug, { version: "draft" });
  if (!story || !story.content) {
    return <div>Loading...</div>;
  }

  return <StoryblokComponent blok={story.content} />;
}
export default App;

ここではuseStoryblok スラッグを手に入れた後に、編集者に何かを変えるたびに、新しい物語を得るのを助けてくれます.それは3つのパラメータを持っています.番目のパラメータはapiOptions データを取得するためのAPIオプションの全てを持っていて、3つ目はbridgeOptions ブリッジを設定するオプションはどれです.
パラメータ
説明
スラグ
文字列の最初のパラメータ.必要な物語のスラッグ
オプション
APIオプションを設定するためのTypeオブジェクトの第2パラメータ
ブリッジオプション
これは、ブリッジオプションをカスタマイズするためのオブジェクトの任意のパラメータです.
またStoryblokComponent ここで活動してください.それは私たちの空間に応じて作成された反応コンポーネントをレンダリングするコード内の任意の場所で使用することができます.我々は、物語のコンテンツを渡すことができますblok プロップこれは動作するように、それらをリストすることが重要ですstoryblokInit .
StoryBlokでは、コンテンツはコンポーネントとして構成されます.我々はすでにいくつかのコンポーネントは、我々のスペースで作成したように、我々の反応アプリでそれらを作成してみましょう.これにより、コンポーネントを動的に再利用できます.

コンポーネントの作成

新しいスペースを作成するとき、デフォルトのコンポーネントは次のとおりです.Page , Teaser , Grid and Feature . 今すぐ我々のアプリでは、言及したコンポーネントを作成します.
「コンポーネント」フォルダで

// Page.js
import { StoryblokComponent, storyblokEditable } from "@storyblok/react";

const Page = ({ blok }) => (
  <main {...storyblokEditable(blok)}>
    {blok.body
      ? blok.body.map((blok) => (
          <StoryblokComponent blok={blok} key={blok._uid} />
        ))
      : null}
  </main>
);

export default Page;

また、私たちはstoryblokEditable SDKからの機能.これにより、ビジュアルエディタで編集可能なコンポーネントをマークできます.この関数の助けを借りて、ビジュアルエディタのコンポーネントをクリックして簡単に編集できます.したがって、すべてのStoryBlokコンポーネントのためにこれを使用します.

// Page.js
import { storyblokEditable } from "@storyblok/react";

const Teaser = ({ blok }) => {
  return <h2 style={{textAlign: 'center'}} 
    {...storyblokEditable(blok)} >{blok.headline}</h2>;
};

export default Teaser;

// Grid.js
import { StoryblokComponent, storyblokEditable } from "@storyblok/react";

const Grid = ({ blok }) => {
  return (
    <div style={{display: "flex", justifyContent: "space-around"}} 
      {...storyblokEditable(blok)} className="grid">
      {blok.columns.map((blok) => (
        <StoryblokComponent blok={blok} key={blok._uid} />
      ))}
    </div>
  );
};

export default Grid;

// Feature.js
import { storyblokEditable } from "@storyblok/react";

const Feature = ({ blok }) => (
  <div {...storyblokEditable(blok)} className="column feature" >
    {blok.name}
  </div>
);

export default Feature; 

さて、これらのコンポーネントをstoryblokInit . 次のようになります.

// index.js
import { storyblokInit, apiPlugin } from "@storyblok/react";
import Page from './components/Page'
import Grid from './components/Grid'
import Feature from './components/Feature'
import Teaser from './components/Teaser'

storyblokInit({
  accessToken: "YOUR_PREVIEW_TOKEN",
  use: [apiPlugin],
  components: {
    page: Page,
    teaser: Teaser,
    feature: Feature,
    grid: Grid
  }
});

そして、それはすべてです!あなたは、あなたがライブ編集の力をアンロックした今、ビジュアルエディタであなたのコンテンツを見ることができるはずです.あなたがコンテンツを再生を開始し、ライブの変更を参照してくださいすることができます.次のようになります.

ラッピング

このチュートリアルでは、公式反応SDKの助けを借りてStoryBlokとの反応アプリケーションを作成し、統合する方法の概要を見ました.また、データの使用方法を学び、リアルタイムのビジュアルエディタを有効にします.
リソース
リンク
リポジトリ
https://github.com/storyblok/storyblok-react-boilerplate
反応する医者
https://reactjs.org/docs/getting-started.html
StoryBlok反応SDK
https://github.com/storyblok/storyblok-react
ビジュアルエディタ
https://www.storyblok.com/docs/guide/essentials/visual-editor
StoryBlok JS橋
https://www.storyblok.com/docs/Guides/storyblok-latest-js
StoryBlok反応ハブ
https://www.storyblok.com/tc/react