Reduxについて学んできました。d-cube.connpass.comその復習と理解度の確認を兼ねてメモ。今回はReactのTodoサンプルアプリでReact.jsの復習。KazuhiroYoshimoto/react-todo-sampleReactだけではなく、TypeScriptも使われている。jQueryで止まっている身としては辛いけど、頑張って読んでいく。IDEはAtomを使いました。コードの参照元を追いやすい。index.htmlいきなりpublic/bundle.jsを参照している。bundle.jsというファイルはこのリポジトリに存在しない・・webpack.config.jsを見ると、定義が書かれていました。./src/Index.tsxを読み込んで/public/配下にbundle.jsというファイルでトランスパイルしているそうな。webpackもちゃんと理解していなくて、このあたりも再度復習が必要そう・・・index.tsx続いてindex.tsxを見ていく。ReactDOM.renderファンクションの中で、とidがappのDOMを指定している。/>が何かというと、./Componentsとして読み込んでいる。Components.tsx./Componentsが指し示しているのは、Components.tsxで、classがいくつか存在しているため「どれやねん」となりそうだけど、今回の場合は特に指定していないので、default宣言されているTodoListComponentが対象。TodoListComponentの中で呼び出しているTodoというクラスと、TodoComponentというクラス(コンポーネント)は、それぞれComponents.tsx内に定義されている。Todoクラスはidとtextという項目を持つ単純なクラス。TodoComponentは、Todoクラスのtext項目をレンダリングするためのコンポーネント。TodoListComponentはTodoComponentの配列を持ち、それを出力している。難しそうだけど、頭から追っていくことでなんとか理解することができた。Reduxについて学んでいきたいと思います。linkArchiveSearchLinksはてなブログブログをはじめる週刊はてなブログはてなブログProGroupsプログラミングはてなブログをはじめよう!yuki10kさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。