追記

リニューアルしました！

React + Redux + TypeScript でモダンなwebアプリを作るチュートリアルを考えてみた①

対象

Reactの概念をなんとなく理解したので、実際に簡単なアプリを作ってみたい方
Reactの日本語チュートリアルがなくなって困っている方

目標

Reactで画像のようなToDoアプリを作ります。
今回はTodoを表示させるところまで実装してみましょう。
見本：GitHub

手順

環境構築

Reactの環境構築を最短で行う

package.jsonがあるディレクトリ（アプリ名のディレクトリ）でnpm startを実行することでアプリが起動します。この状態でファイルを編集&保存すると、瞬時に結果が反映されるため、非常に便利です。

ディレクトリ構成（例）

.
├── node_modules
├── package-lock.json
├── package.json
├── public
│   ├── data1.json
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.js
    ├── App.test.js
    ├── Form.js
    ├── Todo.js
    ├── TodoList.js
    ├── css
    │   ├── App.css
    │   ├── form.css
    │   ├── index.css
    │   └── todo.css
    ├── index.js
    └── registerServiceWorker.js

# 一部省略

CSSを書くのが面倒な方はこちらに見本があるので使ってください。

Todoを表示させよう

index.js

src/index.js

import './css/index.css'
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))

import 〇〇 from 'ファイル名など'：別のファイルで指定した〇〇（クラス名や変数）を使うことができます。import React from 'react'はReactを使うファイルでは必須です。
ReactDOM.Render()でHTMLのidのある場所にコンポーネントを挿入します。今回は、public/index.html にある<div id="root"></div>にAppコンポーネントを挿入しています。

App.js

src/App.js

import React, { Component } from 'react';
import TodoList from './TodoList';
import './css/App.css'


class App extends Component {

  constructor() {
    super()
    this.state = {
      todos: [
        {
          id: 1,
          title: "Hello, React!",
          desc: "React始めました",
          done: false
        },
        {
          id: 2,
          title: "Hello, Redux!",
          desc: "Reduxも始めました",
          done: false
        },
      ]
    }
  }

  render() {
    return (
      <div className="app">
        <h1>todoアプリを作ってみた</h1>
        <TodoList
          todos={this.state.todos}
          />
      </div>
    );
  }
}

export default App

class 〇〇 extends Component{}でコンポーネントと呼ばれるクラスを作成します。これを組み合わせて様々なviewを作れるのがReactの特徴の一つです。
constructorでは初期値を設定します。super()はComponentを継承するため必須です。
this.stateはこのクラスのstateを示しています。今回はtodosという配列に各キーとバリューを設定しておきます。
render(){}でHTMLとして渡したい変数などを設定し、return()の中に実際に返したいHTMLそのものを記述します。実際にHTMLに近いJSXと言う記法です。HTMLのclassはJSXではclassNameとなるので気をつけましょう。
呼び出したいコンポーネントは<TodoList />のように記述します。さらに、todos={this.state.todos}のように、そのコンポーネントに渡したい内容も書いてあげましょう。これで、TodoListでtodosという変数を使えるようになりました。
export default 〇〇でimportされた時にデフォルトで呼び出されるものを定義します。

TodoList.js

src/TodoList.js

import React, { Component } from 'react';
import Todo from './Todo';


class TodoList extends Component {

  render() {
    const todos = this.props.todos.map( todo =>
      <Todo
        key={todo.id}
        {...todo}
      />
    )

    return(
      <ul>
        {todos}
      </ul>
    );
  }
}

export default TodoList

親コンポーネントから渡されたものはthis.propsを使って受け取ることができます。
TodoListから複数のTodoができる時など、子コンポーネントに同じ形式の配列を渡す時は、それらを区別するための絶対に重複しないkeyを設定する必要があります。今回はtodo.idをkeyに入れます。
{...todo}はtodoに入っている要素を全て引き継ぐ、と言う意味です。
returnでの配列の入ったtodosを返すことで、Todoコンポーネントでpropsとして受け取ることができます。{}で変数展開ができます。

Todo.js

src/Todo.js

import React, { Component } from 'react';
import './css/todo.css';

class Todo extends Component {

  render() {
    const className = 'undone'
    const link = this.props.done ? '元に戻す' : '完了！'
    return(
      <li className={className}>
        <span>{this.props.id}</span>
        <span>：{this.props.title}　　</span>
        <a href="">{link}</a>
        <p>{this.props.desc}</p>
      </li>
    );
  }

}

export default Todo

const linkは三項演算子を使って定義しています。this.props.doneがtrue（完了済）の時は「元に戻す」ボタン、false(未完了)の時は「完了」ボタンを表示するようにします。
returnの中でHTMLとして表示したい用要素を組み立てて完成です。

今回はここまで！

内容に不備等ありましたら、お手数ですがコメントにてお願いします。

【React】ToDoアプリを作ってみよう【前編】

追記

対象

関連

目標

手順

環境構築

Reactの環境構築を最短で行う

ディレクトリ構成（例）

Todoを表示させよう

index.js

App.js

TodoList.js

Todo.js

今回はここまで！

参考