【React】Hello Worldから簡単なTodoアプリまでReactでいろいろ書いてみる

Reactの勉強でよくあるサンプルをいろいろと書いてみたまとめです。

同じ環境でやりたい人はこちらで準備してください。

webpackでReact.jsとwebpack-dev-serverを使えるようにする

1.Hello World

これは何てことないと思います。render使ってこんな風にHTMLを表示するんだというぐらい。

app.js

import React from 'react'
import { render } from 'react-dom'
class App extends React.Component {
  render () {
    return (
      <h1>Hello, World!</h1>
    )
  }
}
render(
  <App />,
  document.getElementById('app')
)

2.カウントアップ

ただ単純にひらすら数字を追加していくカウントアップ。

app.js

import React from 'react'
import { render } from 'react-dom'
class App extends React.Component {
  constructor() {
    super()
    this.state = {
      count: 0
    }
  }
  handleClick() {
    this.setState({
      count: this.state.count + 1
    })
  }
  render(){
    return(
      <div>
        <span>{this.state.count}</span>
        <button onClick={this.handleClick.bind(this)}>+</button>
      </div>
    )
  }
}
render(
  <App />,
  document.getElementById('app')
)

3.Facebook Likeボタン風なカウント

さっきのは単純にカウントアップしていたのに対し、FacebookのLikeボタンみたいに一度クリックしたら数字を1増やし、もう一度クリックすると1減らすというサンプル。

参考にしたブログ。参考にさせていただいたこのブログの方がスタイル調整もちゃんとやっています。

30分間React入門「いいねボタン」作成チュートリアル

Craftsman Software Inc.

app.js

import React from 'react'
import { render } from 'react-dom'
class App extends React.Component {
  constructor() {
    super()
    this.state = {
      like: false,
      count: 1000
    }
  }
  handleClick() {
    this.setState({
      count: this.state.count + (this.state.like ? -1 : 1),
      like: !this.state.like
    })
  }
  render(){
    var text;
    if (this.state.like == false) {
      text = "+"
    } else {
      text = "-"
    }
    return(
      <div>
        <span>{this.state.count}</span>
        <button onClick={this.handleClick.bind(this)}>{text}</button>
      </div>
    )
  }
}
render(
  <App />,
  document.getElementById('app')
)

4.親と子コンポーネントに分けてみる

今まで一つのファイルに書いてましたが、分けて書いてみます。子コンポーネントに値を渡したりできます。

app.js

import React from 'react'
import { render } from 'react-dom'
import { Sub } from './sub.js'
class App extends React.Component {
  render(){
    return(
      <div>
        <Sub text="childe-1" />
        <Sub text="childe-2" />
      </div>
    );
  }
}
render(
  <App />,
  document.getElementById('app')
)

sub.js

import React from 'react'
import {render} from 'react-dom'
export class Sub extends React.Component {
  render(){
    return(
      <p>{this.props.text}</p>
    )
  }
}

5.GitHub APIでリポジトリ名を一覧表示

GitHub APIで自分のアカウントのリポジトリ情報を取得。それをリスト表示してみます。自分のGitHubアカウントの情報を取得したいときはREQUEST_URLに入れるURLのアカウント名を変更してください

const REQUEST_URL = ''

app.js

import React from 'react'
import { render } from 'react-dom'
const REQUEST_URL = ''
class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      data: []
    };
  }
  componentDidMount() {
    this.fetchData()
  }
  fetchData() {
    fetch(REQUEST_URL)
      .then((response) => response.json())
    .then((responseData) => {
      this.setState({
        data: responseData,
      })
    })
  }
  render(){
    return(
      <ul>
        {this.state.data.map((item) => {
          return (
            <li key={item.id}>{item.name}</li>
          )
        })}
      </ul>
    )
  }
}
render(
  <App />,
  document.getElementById('app')
)

6.追加・削除までの簡単なTodoアプリを作ってみる

今まで書いてきたonClickなどでのイベントや、親子コンポーネント、JSON形式のリスト表示などを使って、簡単なTodoアプリを作ってみます。

機能としては、

inputタグに入力した後、送信ボタンクリックorキーボードのEnterでリストに反映
削除ボタンをクリックするとそのリスト項目を削除

です。

コード全体はこんな感じです。app.jsの他に、componentsというディレクトリを作りTodo.jsとInputForm.jsとTodolist.jsの3つにファイルを分けてみました。

app.js

import React from 'react'
import { render } from 'react-dom'
import { Todo } from './components/Todo.js'
render(
  <Todo />,
  document.getElementById("app")
)

Todo.js

import React from 'react'
import { render } from 'react-dom'
import { InputForm } from './InputForm.js'
import { TodoList } from './TodoList.js'
export class Todo extends React.Component{
  constructor(props) {
    super(props)
    this.state = {
      todos: []
    }
  }
  handleTodoSubmit(todo) {
    todo.id = new Date();
    const newMessages = this.state.todos.concat(todo);
    this.setState({todos: newMessages})
  }
  handleTodoDelete(id) {
    this.setState({
      todos: this.state.todos.filter((todo) => {
        return todo.id !== id
      })
    })
  }
  render() {
    const todoItems = this.state.todos.map((todo) => {
      return (
        <TodoList key={todo.id} todo={todo} onTodoDelate={this.handleTodoDelete.bind(this)} />
      )
    })
    return(
      <div className="todoBox">
        <InputForm onTodoSubmit={this.handleTodoSubmit.bind(this)} />
        {todoItems}
      </div>
    )
  }
}

InputForm.js

import React from 'react'
import {render} from 'react-dom'
export class InputForm extends React.Component {
  handlesubmit(e) {
    e.preventDefault()
    const title = this.refs.title.value.trim()
    const text = this.refs.text.value.trim()
    // フォームのどちらかが空欄だったら処理しない
    if(!title || !text) {
      return
    }
    this.props.onTodoSubmit({title: title, text: text})
    // 送信後フォームの内容を空に
    this.refs.title.value = ''
    this.refs.text.value = ''
  }
  render() {
    return(
      <form className="commentForm" onSubmit={this.handlesubmit.bind(this)}>
        <input type="text" placeholder="タスク名" ref="title" />
        <input type="text" placeholder="詳細" ref="text" />
        <button>追加</button>
      </form>
    )
  }
}

TodoList.js

import React from 'react'
import {render} from 'react-dom'
export class TodoList extends React.Component {
  handleDelete(){
    this.props.onTodoDelate(this.props.todo.id)
  }
  render() {
    return (
      <div className="todo">
        <h2 className="todoTitle">{this.props.todo.title}</h2>
        <div>{this.props.todo.text}</div>
        <button onClick={this.handleDelete.bind(this)}>削除</button>
      </div>
    )
  }
}

TodoアプリのサンプルコードはGitHubで公開してます。機能追加したり、デザイン予定なのでコードは変わっていくと思いますが。

さいごに

Reactの勉強を始めた時に書いてみた簡単なコードをまとめてみました。他のいろんなReact記事見ながらサンプルコード書くと、何となく分かってくるかなと思います。最後のTodoに関してはもうちょっと機能を追加したり、コンポーネントセットを使ってデザインして、またブログに書こうと思います。

このへんのどれか試したい。

早く・それなりの UI を実現する React コンポーネントセット 16 選

Qiita