not good but great

プログラミング、アート、映画・本の感想について書きます。

Reactjsをやってみた

Reactjsを始める

Webサービス作ってみるかとふと思い、内容を考えた結果Reactjsで作ったら良いかもしれないと思った。だからReactjsを始めた。

環境構築

モダンなフロントエンド環境構築に疎かったので、Qiitaで最近の投稿を参考にした。

作って壊せるReact開発環境をつくる(gulp + browserify + bebel) - Qiita

Reactチュートリアルをやる

Reactチュートリアルは初心者にも優しいので取り組みやすかった。

チュートリアル | React

ES6で書くには下の記事が参考になるかも。

ES6版React.jsチュートリアル - Qiita

Reduxとか

とりあえずReactjsを触ってみたかったのでReduxの勉強は保留。

詰まったところ

ES6の書き方

ES6というJavascriptを良い感じで書けるやつがある。特にClassを書いたりするのがやりやすい。

モジュール読み込み

Classを外部ファイルから読み込む場合は、export defaultをつける。

export default class SampleApp extends React.Component {
    render() {
        return (
          //something
        );
    }
}
import SampleApp from './modules/components/SampleApp'

SampleApp.jsに書いたとしたら、上のようになる。

Babelで理解するEcmaScript6の import / export - Qiita

ES6ではmixinは書けない

mixinが必要な外部コンポーネントを使いたかったので、ReactMixinを用いた。しかしうまくいかなかったので、mixinを使うときはよく考える必要がある。

React v0.13から使えるようになったES6のclass構文でmixinを使う - Qiita

Reusable Components | React

Reactjsの規則

renderメソッドでは複数コンポーネントを返せない

複数返す場合はdivで囲う。

React.jsのComponentについて - Qiita

コンポーネントを探す

下記を参考にした。

Latest ReactJS Examples

react-masonry-component

hearsay eiriklv/react-masonry-component: A React.js component for using @desandro's Masonry

react-masonry-mixinもあるけどES6ではmixinを使うことが基本できないので相性が悪かったので不採用。

eiriklv/react-masonry-mixin: A React.js mixin for using @desandro's Masonry

react-swipe-views

Androidのようなスワイプ画面を作ることができる。

damusnet/react-swipe-views: A React Component for binded Tabs and Swipeable Views

デザイン

Bootstrap4

Bootstrap3ではなくBootstrap4を使ってみることにした。Cardとかこれまでなかったコンポーネントが入っている。react-bootstrapもあるけど、よくわからない。

Bootstrap · The world's most popular mobile-first and responsive front-end framework.

デバッグ

ダミーデータ用意

ローカルでjsonを読み込むときにダミーデータを生成する必要があった。そういうツールを探したらあった。

ポチポチやるだけで数万オーダーのテストデータを生成する - Qiita

広告を非表示にする