【React.js】第一回 Reactでアプリ開発！ 〜React・ReactHooks・Reduxを一気に学ぶぜ編〜

import {Component} from 'react';

class App extends Component {
  render() {
    return <h1>Hello, Michael!!</h1>;
  }
}
export default App;

// Reactのベースアプリを作成
npx create-react-app react-todo-app

// アプリ内に移動
cd react-todo-app
// アプリ起動
npm start

.
└── src
    ├── App.js
    └── index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

function App() {
  return <h1>Hello, Michael!!</h1>
}
export default App;

import {Component} from 'react';

class App extends Component {
  render() {
    return <h1>Hello, Michael!!</h1>;
  }
}
export default App;

.
└── src
    ├── TodoInput.js
    ├── TodoList.js
    ├── App.js
    └── index.js

import {Component} from 'react';
import TodoInput from "./TodoInput";
import TodoList from "./TodoList";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tasks: [
        { title: '寝る', id: 1 },
      ],
      sequenceId: 1,
    };
    this.addTodoItem = this.addTodoItem.bind(this);
    this.resetTodoList = this.resetTodoList.bind(this);
  }

  /* タスク追加処理 */
  addTodoItem(title) {
    // state取得
    const {tasks, sequenceId} = this.state;
    // タスクの追加
    let uniqueId = sequenceId + 1;
    tasks.push({
      title,
      id: uniqueId,
    });
    // state再設定
    this.setState({tasks: tasks, sequenceId: uniqueId});
  }

  /* タスク一覧リセット処理 */
  resetTodoList() {
    this.setState({
      tasks: [],
      sequenceId: 0,
    });
  }

  render() {
    return (
        <div>
          <h1>TODO☆アプリ</h1>
          <button onClick={this.resetTodoList}>リセット</button>
          <TodoInput addTodo={this.addTodoItem} />
          <TodoList tasks={this.state.tasks} />
        </div>
    );
  }
}
export default App;

import {Component} from 'react';

class TodoInput extends Component {
    constructor(props) {
        super(props);
        // stateの定義とbind
        this.state = {
            inputValue: '',
        };
        this.inputValueChange = this.inputValueChange.bind(this);
        this.addButtonClick = this.addButtonClick.bind(this);
    }

    /* テキスト変更時のイベント */
    inputValueChange(e) {
        this.setState({
            inputValue: e.target.value,
        });
    }

    /* ボタン押下時のイベント */
    addButtonClick() {
        const inputValue = this.state.inputValue;
        this.props.addTodo(inputValue);
    }

    render() {
        return (
            <div>
                <input placeholder="タスクを入力するクマ" value={this.state.inputValue} onChange={this.inputValueChange} />
                <button onClick={this.addButtonClick}>追加</button>
            </div>
        );
    }
}
export default TodoInput;

function TodoList(props) {
    // tasksの内容から子要素を生成
    const todoItems = props.tasks.map(task => {
        return <li key={task.id}>{task.title}</li>;
    });
    return (
        <div>
            <ul>
                {todoItems}
            </ul>
        </div>
    );
}
export default TodoList;

import {useState} from 'react';
import TodoInput from "./TodoInput";
import TodoList from "./TodoList";

function App() {
  // state取得
  const [tasks, setTasks] = useState([{ title: '寝る', id: 1 }]);
  const [sequenceId, setSequenceId] = useState(1);

  /* タスク追加処理 */
  const addTodoItem = (title) => {
    // タスクの追加
    let uniqueId = sequenceId + 1;
    tasks.push({
      title,
      id: uniqueId,
    });
    // state再設定
    setTasks(tasks);
    setSequenceId(uniqueId);
  }

  /* タスク一覧リセット処理 */
  const resetTodoList = () => {
    setTasks([]);
    setSequenceId(0);
  }

  return (
      <div>
        <h1>TODO☆アプリ</h1>
        <button onClick={resetTodoList}>リセット</button>
        <TodoInput addTodo={addTodoItem} />
        <TodoList tasks={tasks} />
      </div>
  );
}
export default App;

import {useState} from 'react';

function TodoInput(props) {
    // state取得
    const [inputValue, setInputValue] = useState('');

    /* テキスト変更時のイベント */
    const inputValueChange = (e) => {
        setInputValue(e.target.value);
    }

    /* ボタン押下時のイベント */
    const addButtonClick = () => {
        props.addTodo(inputValue);
    }

    return (
        <div>
            <input placeholder="タスクを入力するクマ" value={inputValue} onChange={inputValueChange} />
            <button onClick={addButtonClick}>追加</button>
        </div>
    );
}
export default TodoInput;

function TodoList(props) {
    // tasksの内容から子要素を生成
    const todoItems = props.tasks.map(task => {
        return <li key={task.id}>{task.title}</li>;
    });
    return (
        <div>
            <ul>
                {todoItems}
            </ul>
        </div>
    );
}
export default TodoList;

import React, {useState, useCallback} from 'react';
import TodoInput from "./TodoInput";
import TodoList from "./TodoList";

export const TodoContext = React.createContext();

function App() {
  // state取得（このようにまとめて書くこともできる）
  const [state, setState] = useState({tasks: [{ title: '寝る', id: 1 }], sequenceId: 1});

  /* タスク追加処理 */
  const addTodoItem = useCallback((title) => {
      // タスクの追加
      let uniqueId = state.sequenceId + 1;
      state.tasks.push({
        title,
        id: uniqueId,
      });
      // state再設定
      setState({tasks: state.tasks, sequenceId: uniqueId});
  }, [state]);

  /* タスク一覧リセット処理 */
  const resetTodoList = useCallback(() => {
      setState({tasks: [], sequenceId: 0});
  }, [state]);

  return (
      <TodoContext.Provider value={{addTodo: addTodoItem, tasks: state.tasks}}>
        <h1>TODO☆アプリ</h1>
        <button onClick={resetTodoList}>リセット</button>
        <TodoInput />
        <TodoList />
      </TodoContext.Provider>
  );
}
export default App;

import {useContext} from 'react';
import {TodoContext} from "./App";

function TodoList() {
    const todoContext = useContext(TodoContext);

    // tasksの内容から子要素を生成
    const todoItems = todoContext.tasks.map(task => {
        return <li key={task.id}>{task.title}</li>;
    });

    return (
        <div>
            <ul>
                {todoItems}
            </ul>
        </div>
    );
}
export default TodoList;

import {useState, useContext} from 'react';
import {TodoContext} from "./App";

function TodoInput() {
    const todoContext = useContext(TodoContext);

    // state取得
    const [inputValue, setInputValue] = useState('');

    /* テキスト変更時のイベント */
    const inputValueChange = (e) => {
        setInputValue(e.target.value);
    }

    /* ボタン押下時のイベント */
    const addButtonClick = () => {
        todoContext.addTodo(inputValue);
    }

    return (
        <div>
            <input placeholder="タスクを入力するクマ" value={inputValue} onChange={inputValueChange} />
            <button onClick={addButtonClick}>追加</button>
        </div>
    );
}
export default TodoInput;

npm install --save redux react-redux

.
└── src
    ├── actions
    │   └── TodoApp.js
    ├── components
    │   └── TodoApp.js
    ├── reducers
    │   └── TodoApp.js
    └── index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import TodoApp from './components/TodoApp';
import todoAppReducer from "./reducers/TodoApp";

// storeの作成
const store = createStore(todoAppReducer);

ReactDOM.render(
  <Provider store={store}>
    <TodoApp />
  </Provider>,
  document.getElementById('root')
);

import {useDispatch, useSelector} from "react-redux";
import {inputTask, addTask, resetTask} from "../actions/TodoApp";

function TodoApp() {
    const dispatch = useDispatch();
    const task = useSelector(state => state.task);
    const tasks = useSelector(state => state.tasks);

    return (
      <div>
        <h1>TODO☆アプリ</h1>
        <button onClick={() => dispatch(resetTask())}>リセット</button>
        <br/>
        <input placeholder="タスクを入力するクマ"
               onChange={(e) => dispatch(inputTask(e.target.value))} />
        <button onClick={() => dispatch(addTask(task))}>追加</button>
        <ul>
            {
                tasks.map((item, i) => {
                    return <li key={i}>{item}</li>;
                })
            }
        </ul>
      </div>
    );
}
export default TodoApp;

export const inputTask = (task) => ({
    type: 'INPUT_TASK',
    payload: {
        task
    }
});
export const addTask = (task) => ({
    type: 'ADD_TASK',
    payload: {
        task
    }
});
export const resetTask = () => ({
    type: 'RESET_TASK',
    payload: {}
});

const initialState = {
    task: '',
    tasks: []
};
export default function todoAppReducer(state = initialState, action) {
    switch (action.type) {
        case 'INPUT_TASK':
            return {
                ...state,
                task: action.payload.task
            };
        case 'ADD_TASK':
            return {
                ...state,
                tasks: state.tasks.concat([action.payload.task])
            };
        case 'RESET_TASK':
            return {
                ...state,
                tasks: []
            };
        default:
            return state;
    }
}

npm install --save redux-logger redux-thunk

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore, applyMiddleware} from 'redux';
import {Provider} from 'react-redux';
import {logger} from "redux-logger/src";
import TodoApp from './components/TodoApp';
import todoAppReducer from "./reducers/TodoApp";

// storeの作成
const store = createStore(
    todoAppReducer,
    applyMiddleware(logger)
);

ReactDOM.render(
  <Provider store={store}>
    <TodoApp />
  </Provider>,
  document.getElementById('root')
);

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore, applyMiddleware} from 'redux';
import {Provider} from 'react-redux';
import {logger} from "redux-logger/src";
import thunk from "redux-thunk";
import TodoApp from './components/TodoApp';
import todoAppReducer from "./reducers/TodoApp";

// storeの作成
const store = createStore(
    todoAppReducer,
    applyMiddleware(logger, thunk)
);

ReactDOM.render(
  <Provider store={store}>
    <TodoApp />
  </Provider>,
  document.getElementById('root')
);

export const inputTask = (task) => ({
    type: 'INPUT_TASK',
    payload: {
        task
    }
});
export const addTask = (task) => ({
    type: 'ADD_TASK',
    payload: {
        task
    }
});
export const resetTask = () => ({
    type: 'RESET_TASK',
    payload: {}
});

// 非同期Action
// thunkを使うことでdispatchとstateを引数に取ることができる！
export const asyncAddTask = (task) => {
    // 引数にdispatch、getStateを受け取ることができる
    return (dispatch, getState) => {
        setTimeout(() => {
            // 非同期処理が完了後にActionを実行
            dispatch(addTask(task));
        }, 500);
    };
}

import {useDispatch, useSelector} from "react-redux";
import {inputTask, addTask, resetTask, asyncAddTask} from "../actions/TodoApp";

function TodoApp() {
    const dispatch = useDispatch();
    const task = useSelector(state => state.task);
    const tasks = useSelector(state => state.tasks);

    return (
      <div>
        <h1>TODO☆アプリ</h1>
        <button onClick={() => dispatch(resetTask())}>リセット</button>
        <br/>
        <input placeholder="タスクを入力するクマ"
               onChange={(e) => dispatch(inputTask(e.target.value))} />
        <button onClick={() => dispatch(asyncAddTask(task))}>追加</button>
        <ul>
            {
                tasks.map((item, i) => {
                    return <li key={i}>{item}</li>;
                })
            }
        </ul>
      </div>
    );
}
export default TodoApp;