読者です 読者をやめる 読者になる 読者になる

My Note Pad

Qiitaに書くほどでもない技術的なことや日々の雑感を書いていきます

React / Redux入門勉強会に行ってきた

React Nativeの学習を始めたものの、ReactもReduxもよくわからない状態からだったので、
こちらの勉強会に行ってReact / Reduxについて学んできました。

d-cube.connpass.com

その復習と理解度の確認を兼ねてメモ。

今回はReactのTodoサンプルアプリでReact.jsの復習。

GitHub - KazuhiroYoshimoto/react-todo-sample

Reactだけではなく、TypeScriptも使われている。
jQueryで止まっている身としては辛いけど、頑張って読んでいく。

IDEAtomを使いました。
コードの参照元を追いやすい。

index.html

いきなりpublic/bundle.jsを参照している。
bundle.jsというファイルはこのリポジトリに存在しない・・

webpack.config.jsを見ると、定義が書かれていました。

f:id:yuki10k:20170215011306p:plain

./src/Index.tsxを読み込んで/public/配下にbundle.jsというファイルでトランスパイルしているそうな。
webpackもちゃんと理解していなくて、このあたりも再度復習が必要そう・・・

index.tsx

続いてindex.tsxを見ていく。
ReactDOM.renderファンクションの中で、idappDOMを指定している。

この例では、index.html<div id="app"></div><Component />を適用している。

f:id:yuki10k:20170215011316p:plain

<Component />が何かというと、./Componentsとして読み込んでいる。

f:id:yuki10k:20170215011325p:plain

Components.tsx

./Componentsが指し示しているのは、Components.tsxで、classがいくつか存在しているため「どれやねん」となりそうだけど、今回の場合は特に指定していないので、default宣言されているTodoListComponentが対象。

f:id:yuki10k:20170215011334p:plain

また、TodoListComponentの中で呼び出しているTodoというクラスと、TodoComponentというクラス(コンポーネント)は、それぞれComponents.tsx内に定義されている。

Todoクラスはidtextという項目を持つ単純なクラス。

f:id:yuki10k:20170215011353p:plain

TodoComponentは、Todoクラスのtext項目をレンダリングするためのコンポーネント

f:id:yuki10k:20170215011405p:plain

また、TodoListComponentTodoComponentの配列を持ち、それを出力している。

一見難しそうだけど、頭から追っていくことでなんとか理解することができた。
(まだReactの本質ではない)

このあたりは現代のフロントエンドでは当然のことなのかもしれないですが、
引き続きコードを追いながら React / Reduxについて学んでいきたいと思います。