tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:react-lightning-design-systemのデモアプリを動かしてみました

だいぶ前から公開されているものですが、react-lightning-design-systemのデモアプリを動かしてみました。ReactとLightning Design Systemを組み合わせを確認できます。

f:id:tyoshikawa1106:20160502042629p:plain

GitHub - stomita/react-lightning-design-system: Salesforce Lightning Design System components built with React

実行方法

以下の手順でデモアプリを実行できます。(詳細はREADME.mdに記載があります。)

$ cd desktop
$ git clone git@github.com:stomita/react-lightning-design-system.git
$ cd react-lightning-design-system
$ npm install
$ npm run build
$ cd examples
$ npm install
$ npm start

※npm startはcd examplesでディレクトリ変更しておく必要がありました。


これでデモアプリの利用準備が整いました。

localhost:3000


デモアプリはこんな感じです。
f:id:tyoshikawa1106:20160502044203p:plain


入力フォームやルックアップなども確認できます。
f:id:tyoshikawa1106:20160502044344p:plain

f:id:tyoshikawa1106:20160502044355p:plain


Lightning Design Systemは通常CSS部分のみの提供となっているため、JS部分が自分で実装する必要があります。react-lightning-design-systemはJS部分も用意されているのでタブの切り替えやDatepickerなども実際に動くものを確認できました。
f:id:tyoshikawa1106:20160502044543p:plain


特にDatepickerは十字キーで日付を変更したり、前の月、次の月へと変更もできるようになっています。


自分が試せたのはデモアプリを動かす所だけですが、react-lightning-design-systemはNPMで公開されているみたいです。

$ npm install react-lightning-design-system


react-lightning-design-systemはこんな感じになっていました。

ちょっと追記

ちなみにnpm run buildコマンドでビルドしたタイミングでlib/scriptsフォルダが生成されるのですが、その中にはSLDSのバッチやボタンなどの各コンポーネント用のファイルが用意されています。
f:id:tyoshikawa1106:20160502050030p:plain


examplesフォルダ内にデモアプリのコードが用意されているのですが、そこの処理でlib/scriptsフォルダ内のファイルを呼び出しているみたいです。react-lightning-design-systemの使い方はこの部分のコードで確認すれば良さそうです。
f:id:tyoshikawa1106:20160502050214p:plain