React Sketch.app を導入して Reeact のコードを Sketch に反映させる
- Introduction - React Sketch.app (Quickstart)
上記ドキュメントの通りにするだけなんだけど、途中詰まったところもあったので一通りまとめておく。
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 したときにエラーがでる。
$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 ドキュメントに反映された。
すこし変更を加えてみる。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()); };
よしよし。