WIP

handson 2016/09/18

created at 2017.01.02
updated at 9ヶ月前 ago
vsanna / public React.js

今日のゴール

  • 素のReactをイマドキの書き方で書けるようになる
  • reactの基本的な挙動を理解する
    1. lifecycle
    2. 基本的な書き方

聞いておきたい

  • fluxとは
    • fluxのフレームワークがredux
  • 実際のコードのイメージ with flux
  • ディレクトリ構成
  • バケツリレーヤダ
  • コンポーネント間の連絡
    • vueでいうevents
  • react css のアレ
  • App.jsに全てのデータを集めるのであればとてもここが重くなる?

一旦このフレームワークを使わずに実装し、その後reduxに拡張していくのがよい

React概要

  • ReactはComponentを利用し、複数のcomponentを組み合わせる

React基本的な挙動

  1. ReactDOM.renderでレンダリング
  2. 各コンポーネントはrenderメソッドをインスタンスメソッドとして持っており、それによりdomを出力する
  3. renderメソッドの前後に処理をはさみたいときには

PropTypes

  • propsのバリデーション
  • propsの型が指定と異なったり、不足がある場合にはwarnされる
class Pizza extends Componet {
  static PropTypes = {
    cheeze: React.PropTypes.string.isRequires, // stringであり、かつ必須
    onion: React.PropTypes.object
  }
}

memo

- create-react-appは便利にできており, 勝手に内部でファイル更新してくれる

vueとの比較

  • el ok
  • data ... state ok
  • props ... 親から ok
  • component ... ok
    • 入れ子は普通にできるはず
  • mixins
  • methods ... ok
    • これでいいの?
  • lifecycle
    • created
  • event ... ok
    • 親から子に何かしらを伝達するにはpropsでメソッドを渡すとのこと
    • バケツ辛い
  • watch

shareシェアする

forumコメント

まだコメントはありません!
ログインしてコメントを残す
{{comment.user.name}} on {{commentCreatedAt()}}

content_copy前後のイシュー

{{message}}