React tutorial(2)

あらすじ

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

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

今日やること

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

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 と、よく使われる関数の書き方である handleButtonClick と posts.map に触れました。 LifeCycle に関しては都度ドキュメントを見て細かい事を覚えながらでも大丈夫だと思います。

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

あいつの日誌β

働きながら旅しています。

あらすじ

目次

今日やること

各種ファイル作成

まとめ