Quantcast
Channel: tyoshikawa1106のブログ
Viewing all articles
Browse latest Browse all 1436

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

$
0
0

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


Viewing all articles
Browse latest Browse all 1436

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>