Reactアプリを作り始める前にやるべきこと4つ

  • 18
    いいね
  • 0
    コメント

react-opti.png

公式Docsを一読しておく

https://facebook.github.io/react/docs/hello-world.html

早い段階で一通り読んでおいたおかげで、「こういうことがやりたいんだけど、どうすれば良いんだろう」となるたびに「そういえばあそこに何か書いてあったな」と読み返すことが出来ました。いずれにしても開発中に何度も読み直すことになると思うので、一度読んでおけば脳内indexが貼られるので効率的ですし、当然ですがReact全体への理解を深めた上でシステム設計を行うのが理想です。全体のボリュームはありますが、エッセンスが簡潔にまとまっているので、読みやすいです。

Create React Appを下敷きにする

https://github.com/facebookincubator/create-react-app

Reactでアプリを開発するのが初めてであれば、まずはこのプロジェクトをbootstrapにして作り始めることを強くおすすめします。webpackやbabelのconfigに最初からエネルギーを注ぐのは得策ではないです。

また、user-guideはノウハウの宝庫なので、こちらも要チェックです。

https://github.com/facebookincubator/create-react-app#user-guide

フォルダ構成、lint、デバッグ、型チェック、CSSなどなど、初期のフェーズで知りたいことが出てきたらここを参照すると大体なにか書いてます。しかしこうしてみると、最近のWebフロントエンド、最初に知っておいたり考慮しないといけないことが異常に多くてうんざりしますね…。Create React Appがある程度吸収してくれているにもかかわらず、これだけの項目があります。

React Nativeの場合は、Create React Native Appというのがあります。いずれも、facebookが公式でメンテしてます。
https://github.com/react-community/create-react-native-app

Discordのコミュニティに参加する

https://facebook.github.io/react/blog/2015/10/19/reactiflux-is-moving-to-discord.html

Reactコミュニティの議論が、Discord上で活発に行われています。参加者も多く、気楽に質問できて誰かが答えてくれる空気があるので、とてもすばらしいコミュニティです。有名なライブラリ名がチャンネル名になっており、チャンネル名で検索するだけですでに知見が得られます。Facebookのエンジニアが月1回降臨して質問を受け付けてくれるなどのイベントも行われています。

コードを書く前にライブラリを探す

一般的なWebサイトで必要なComponentやロジックのほとんどは既にライブラリとして存在するので、それをそのまま使うか拡張するかして使うかを検討すべきです。View Componentについてはmaterial UIやbootstrapのReactラッパーがあるので、これでほとんど代替してしまっても良いですし、Javascriptのオブジェクト操作については好みに応じてramda、lodash、underscoreなど色々あると思います。

https://github.com/callemall/material-ui
https://react-bootstrap.github.io/