Reactjsを始める
Webサービス作ってみるかとふと思い、内容を考えた結果Reactjsで作ったら良いかもしれないと思った。だからReactjsを始めた。
環境構築
モダンなフロントエンド環境構築に疎かったので、Qiitaで最近の投稿を参考にした。
作って壊せるReact開発環境をつくる(gulp + browserify + bebel) - Qiita
Reactチュートリアルをやる
Reactチュートリアルは初心者にも優しいので取り組みやすかった。
ES6で書くには下の記事が参考になるかも。
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
Reactjsの規則
renderメソッドでは複数のコンポーネントを返せない
複数返す場合はdivで囲う。
React.jsのComponentについて - Qiita
コンポーネントを探す
下記を参考にした。
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を読み込むときにダミーデータを生成する必要があった。そういうツールを探したらあった。
