公開されているReact Componentを利用してみる

  • 109
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

今回はちょっと趣向を変えて公開されているComponentの利用について書きたいと思います。

Componentは基本的にはPropがI/Fとなっているのでドキュメントを見てよくわからなかった場合は、Propを見るとどのようなI/Fがあるかわかると思います。

自分が公開する場合は、PropTypesやgetDefaultPropsを使ってI/Fを明確にしておくといいと思います。

Bootstrap

何はともあれまずは定番のBootstrapですがやはりちゃんとあります。
前回のRouterのサンプルでも使っていました。

http://react-bootstrap.github.io/

使う場合は、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>
  }
});

http://react-bootstrap.github.io/components.html

↑のページで実装を見ることが出来るので、Propの仕様などを確認することが出来ます。

Componentを探す

React Components

http://react-components.com/

ReactComponentが集まっているサイトでここで欲しい物を探すことが出来ます。
ここにあるComponentはnpmのkeywordにreact-componentが入っているものが対象になっています。

React Rocks

http://react.rocks/

Componentが集まっているというより色々なReactComponentを使ったサンプルが紹介されているサイトです。実際に動くものを見ることが出来るので参考になります。

こんなのとか http://freiksenet.github.io/react-calendar/#

GitHubのwiki

https://github.com/facebook/react/wiki/Complementary-Tools#ui-components

あと、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を読み込んでおく必要があります。

https://github.com/pedronauck/react-video/blob/master/dist/react-video.css

requireして読み込むだけでCSSもなんとかしてくれるようになるといいですが...。

I/Fを確認する

react-videoの場合はREADME見るとわかるのですが、I/Fをどうなっているのかも確認してみます。

propTypesgetDefaultPropsを見ると、

  • fromにはyoutubevimeoが指定出来て必須
  • idは文字列で必須
  • classNameも指定出来てデフォルトはvideoというクラス

ということがわかります。
propTypesちゃんと書いておくといいですね。

  propTypes: {
    from: React.PropTypes.oneOf(['youtube', 'vimeo']).isRequired,
    id: React.PropTypes.string.isRequired
  },
  getDefaultProps() {
    return {
      className: 'video'
    };
  },

https://github.com/pedronauck/react-video/blob/master/lib/react-video.jsx#L9-L17


というわけで今回は誰かが作ったComponentの利用について書きました。

明日はテストについて書きたいと思います。

この投稿は 一人React.js Advent Calendar 201419日目の記事です。