万年素人からHackerへの道

万年素人がHackerになれるまで殴り書きするぜ。

第9回これから始める人のためのNode.js,React.js勉強会

http://node.connpass.com/event/34498/

VS Code

https://code.visualstudio.com/docs/setup/osx

⇧⌘Pを押下して、codeコマンドを入れる

shell command

サンプルを見る

cd redux/examples/todos

動かす

インストール

npm install

起動

npm start

ブラウザで見る

open http://localhost:3000/

今回の資料

https://intheweb.io/react-redux-todos/

UIの状態を管理

Reactの拡張

http://qiita.com/kiita312/items/49a1f03445b19cf407b7

index.jsから読む

importを主にやっている。

import { render } from 'react-dom'

renderメソッドは

footer.js

this.props ではなく直接

App

const App の後ろの

Store#getState(); {todos:[ {id:1, text:1} ], visibilityFilter:"" }

react redux react-redux

createStore・・・redux store・・・state管理, reducerも保持, dispatch関数がある

containersフォルダ内・・・reactをreact-reduxで拡張した

App.jsは純粋なReactのコンポーネント

reducers 元の状態やステートやアクションを元に新しい状態を生成する

React・・・HTML系 Redux・・・状態管理

イベント更新 ステートが変更 上の連携、containersに入ってるreact-redexで拡張したもの

AddTodo = connect()(AddTodo)

2つ関数を渡している

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

2つめは不要?

import React from 'react'
var React = react;
import { render } from 'react-dom'
var render = react-dom.render;