今回はちょっと趣向を変えて公開されているComponentの利用について書きたいと思います。
Componentは基本的にはPropがI/Fとなっているのでドキュメントを見てよくわからなかった場合は、Propを見るとどのようなI/Fがあるかわかると思います。
自分が公開する場合は、PropTypesやgetDefaultPropsを使ってI/Fを明確にしておくといいと思います。
Bootstrap
何はともあれまずは定番のBootstrapですがやはりちゃんとあります。
前回のRouterのサンプルでも使っていました。
使う場合は、react-bootstrapの他に別途bootstrapのCSSを読み込む必要があります。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
使い方としては、bootstrapの各ComponentがReactComponentになっているのでそれを他のComponentと同様に使っていくだけです。
var {Jumbotron, Col} = require('react-bootstrap');
module.exports = React.createClass({
render() {
<Col xs={6} md={4} key={video.id}>
<Jumbotron>
<Video from={type} id={video.id} />
<p>{video.title}</p>
</Jumbotron>
</Col>
}
});
↑のページで実装を見ることが出来るので、Propの仕様などを確認することが出来ます。
Componentを探す
React Components
ReactComponentが集まっているサイトでここで欲しい物を探すことが出来ます。
ここにあるComponentはnpmのkeywordにreact-componentが入っているものが対象になっています。
React Rocks
Componentが集まっているというより色々なReactComponentを使ったサンプルが紹介されているサイトです。実際に動くものを見ることが出来るので参考になります。
こんなのとか http://freiksenet.github.io/react-calendar/#
GitHubのwiki
あと、ReactのGitHub Repositoryにはwikiがあって、そこにもUI Componentが色々と紹介されているのでオススメです。
実際にComponentを探して使ってみる(react-video編)
それでは例としてreact-videoという、youtubeとvimeoのplayerを表示してくれるComponentを実際に使ってみたいと思います。
使ったサンプル
使い方
基本的な使い方はtypeとidを指定するだけなのでとても簡単です。
var Video = require('react-video');
type = 'youtube' // or 'vimeo'
<Video from={type} id={video.id} />
CSS
あと、注意点としては、このCSSを読み込んでおく必要があります。
requireして読み込むだけでCSSもなんとかしてくれるようになるといいですが...。
I/Fを確認する
react-videoの場合はREADME見るとわかるのですが、I/Fをどうなっているのかも確認してみます。
propTypesとgetDefaultPropsを見ると、
-
fromにはyoutubeかvimeoが指定出来て必須 -
idは文字列で必須 -
classNameも指定出来てデフォルトはvideoというクラス
ということがわかります。
propTypesちゃんと書いておくといいですね。
propTypes: {
from: React.PropTypes.oneOf(['youtube', 'vimeo']).isRequired,
id: React.PropTypes.string.isRequired
},
getDefaultProps() {
return {
className: 'video'
};
},
というわけで今回は誰かが作ったComponentの利用について書きました。
明日はテストについて書きたいと思います。