読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:react-lightning-design-systemをnpm installで組み込む手順

react-lightning-design-systemを自分のプロジェクトに組み込む手順についてです。

f:id:tyoshikawa1106:20160521015945p:plain

https://github.com/stomita/react-lightning-design-system


react-lightning-design-systemはnpmパッケージで公開されているので、npm installコマンドで簡単に利用できるようになります。

$ npm install react-lightning-design-system --save


インストール後は、次のようにimportすることで利用できます。(ボタンコンポーネントの場合)

import { Button } from 'react-lightning-design-system';
export default React.createClass({
  render() {
    return <Button type='brand'>Brand</Button>
  }
})

f:id:tyoshikawa1106:20160521020931p:plain


これでボタンが表示できました。
f:id:tyoshikawa1106:20160521020901p:plain


細かい使い方はreact-lightning-design-systemリポジトリのexamplesフォルダのサンプルアプリで確認できそうです。

Lightning Design Systemの読み込み

react-lightning-design-systemはnpm installコマンドで利用できるようになりますが、Lightning Design SystemのCSSはきちんと読み込む必要があります。
f:id:tyoshikawa1106:20160521021304p:plain