基礎から学ぶReact/React Hooks学習メモ 6-1 環境構築とアプリ作成準備

6-1 Create React AppでReact開発環境を準備する

参考
基礎から学ぶReact/React Hooks

Create React Appの実行

# nodeのバージョン確認
node -v
# yarnのインストール
npm install -g yarn
# アプリケーションを作成したディレクトリに移動して、create-react-app プロジェクト名
npx create-react-app todo-app
# 作成されたディレクトリに移動
cd todo-app
# アプリ起動
yarn start

Visual Studio Codeを利用する

• インストーラーをダウンロード&インストール

不要ファイルの削除と修正

todo-app/
┣ node_modules/
┣ public/
┣ src/
┃ ┣ App.css  ← 削除
┃ ┣ App.js
┃ ┣ App.test.js  ← 削除
┃ ┣ index.css  ← 削除
┃ ┣ index.js
┃ ┣ logo.svg  ← 削除
┃ ┣ reportWebVitals.js  ← 削除
┃ ┗ setupTests.js  ← 削除
┣ .gitignore
┣ package.json
┣ README.md
┗ yarn.lock

App.js

function App() {
  return <p>これからTODOアプリを実装します！</p>;
}

export default App;

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")
);

ToDoアプリの仕様

• TODOを完了／未完了別にリスト化して表示
• TODOの追加ができる
• TODOの状態（完了／未完了）をボタンクリックで変更できる
• TODOの削除ができる
• モックサーバーでTODO情報を更新管理できる

モックサーバーの準備

db.json

{
  "todos": [
    {
      "id": 1,
      "content": "Create react appをインストールする",
      "done": true
    },
    {
      "id": 2,
      "content": "JSON Server仮のAPIを作成する",
      "done": false
    },
    {
      "id": 3,
      "content": "Chakra UIをインストールする",
      "done": false
    }
  ]
}

• ポート3100番で起動

npx json-server --watch db.json --port 3100

axiosのインストール

yarn add axios

• axiosの使用例

const todoDataUrl = "http://localhost:3100/todos"
// axios.get(URL)でgetリクエスト送信
axios.get(todoDataUrl)

ulidのインストール

• ユニークなIDを付与するために、ulidをインストールする。ソート可能でランダムなIDを生成する。

yarn add ulid