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

あいつの日誌β

あいつの日誌です。

React tutorial(2)

React.js Redux Tutorial

あらすじ

前回は開発環境の構築方法を紹介しました。 今回はReact で使われる簡単な記述方法に触れます。

たぶん直感で理解できると思いますので細かい説明は省略します。

目次

  • 開発環境を準備
  • React の基本的な Life Cycle に触れる <= 今日やること
  • redux に触れる
  • redux-saga に触れる
  • react router に触れる
  • npm で公開されている components を導入して echo system を体感する
  • redux-form に触れる
  • react-select に触れる

今日やること

こんな感じの画面を作ります

f:id:okamuuu:20170122150249p:plain

各種ファイル作成

mkdir src/components
touch src/fixtures.js src/components/Posts.js

create src/fixtures.js

export const posts = [{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
},{
"userId": 1,
"id": 2,
"title": "qui est esse",
"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
}]

create src/components/Posts.js

import React, {Component} from 'react'

// stateless component
export const PostItem = (props) => (
  <div key={props.post.id}>
    <h3>{props.post.title}</h3>
    <p>{props.post.body}</p>
  </div>
)

export default class Posts extends Component {

  constructor(props) {
    console.log("=== constructor ===")
    super(props)
  }

  componentWillMount() {
    console.log("=== componentWillMount ===")
  }

  componentDidMount() {
    console.log("=== componentDidMount ===")
  }

  componentWillReceiveProps() {
    console.log("=== componentWillReceiveProps ===")
  }

  componentWillUpdate() {
    console.log("=== componentWillUpdate ===")
  }

  componentDidUpdate() {
    console.log("=== componentDidUpdate ===")
  }

  componentWillUnmount() {
    console.log("=== componentWillUnmount ===")
  }

  handleButtonClick() {
    alert("Button Clicked!!")
  }

  render() {
    const {posts} = this.props

    return (
      <div className="container">
        <h2>Posts</h2>
        {posts.map((post) => (
          <PostItem post={post} />
        ))}
        <button className="btn btn-default" onClick={this.handleButtonClick.bind(this)}>Push</button>
      </div>
    )
  }
}

edit src/Root.js

import 'babel-polyfill'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css'
import React from 'react'

import {posts} from './fixtures'
import Posts from './components/Posts'

export default (props) => (
  <Posts posts={posts} />
)

Implement it

% node devServer.js

まとめ

今回は React の LifeCycle と、よく使われる関数の書き方である handleButtonClickposts.map に触れました。 LifeCycle に関しては都度ドキュメントを見て細かい事を覚えながらでも大丈夫だと思います。

とりあえず render() 関数に必要なデータを渡せば画面をレンダリングできる、ということがなんとなく理解できたと思います。 次回は redux をつかってどうやって render 関数にデータを渡すのかについて触れたいと思います。