nlog

とめどなく流れるよだれ

React Sketch.app を導入して Reeact のコードを Sketch に反映させる

上記ドキュメントの通りにするだけなんだけど、途中詰まったところもあったので一通りまとめておく。

React Sketch.app を git clone する。

[path/to/]
$ git clone https://github.com/airbnb/react-sketchapp.git

つぎは React コードの編集を Sketch ファイルに反映するための準備。まずは編集したいディレクトリに移動する。ここでは最初から用意されている examples/basic-setup に移動する。

# clone したディレクトリ内の examples/basic-setup に移動
[path/to/]
$ cd react-sketchapp/examples/basic-setup

そして必要な NPM パッケージをインストールする。

# examples/basic-setup で必要な NPM パッケージをインストール
[path/to/react-sketchapp/examples/basic-setup]
$ npm install
...

最後の準備として、Sketch で新規ドキュメントを開く。このあと $npm run render したときに、React のコードはこの Sketch ドキュメントに反映される。この工程を忘れると、 $npm run render したときにエラーがでる。

f:id:namikuguri:20180422121814p:plain

$npm run render で React のコードを Sketch ドキュメントに反映。

# Sketch ドキュメントに React のコードを反映
[path/to/react-sketchapp/examples/basic-setup]
$ npm run render

> basic-setup@1.0.0 render /Users/user-name/path/to/react-sketchapp/examples/basic-setup
> skpm-build --watch --run

🖨  Copied src/manifest.json in 11ms
⚒  Built ./my-command.js in 2565ms

React のコードが Sketch ドキュメントに反映された。

f:id:namikuguri:20180422123327p:plain

すこし変更を加えてみる。Haus を Blue にした。

# コードがあるディレクトリに移動
[path/to/react-sketchapp/examples/basic-setup]
$ cd src

# my-command.js を編集する
[path/to/react-sketchapp/examples/basic-setup/src]
$ vi my-command.js

# Haus を Blue にした
[path/to/react-sketchapp/examples/basic-setup/src]
$ cat my-command.js
...
export default () => {
    const colorList = {
        Blue: 'blue',
        ...
    };

    render(<Document colors={colorList} />, context.document.currentPage());
};

f:id:namikuguri:20180422123345p:plain

よしよし。