React

【TypeScript】既存のReactアプリ(create-react-app)にTypeScriptを導入する方法

今回は、create-react-appで構築したアプリへTypeScriptを導入する方法を解説していきます。 ※作成済みのアプリがある前提となります。ちなみにcreate-react-appの場合、最初からTypeScriptのサポートが含まれているので、 環境構築の際に以下コマンドを実行…

ReactアプリをGitHub Pagesにデプロイする方法

Reactでリプレイス中のポモドーロタイマーをGitHub Pagesにデプロイしました。GitHubリポジトリの設定を変更するだけでできるだろうと思っていましたが、 少しだけ手間がかかったので、その方法を紹介していきます。※Reactアプリが既に完成した前提で説明を…

【Reactポモドーロアプリ】inputの入力値を別のcomponentで使用する

以前、JavaScriptでポモドーロタイマーを作成しましたが、現在そのアプリをReactへリプレイスしています。React版でもユーザーが作業時間や休憩時間を設定できる機能を追加したのですが 実装までに苦戦したので、記録として残しておきます。ただ、今回紹介す…

Reactでtodoアプリを作ろう③:機能追加

前回まででTodoの追加・表示ができるようになったので 今回は以下2つの便利機能を実装していきます。 ①入力フォームの入力内容をクリア 現状では、Addボタンを押しても入力値がそのままなので Addと同時にフォーム内を空にする。②Todoを削除 終了したTodoを…

Reactでtodoアプリを作ろう②:機能実装(Todoの追加)

前回は見た目を整えるところまで行ったので、今回はTodoリストを追加するプログラムを実装していきます。 どのコンポーネントで何を管理するか Reactのプログラムを書く上で大事なのがStateの管理場所とその内容だと思います。今回は次のように設定します。A…

Reactでtodoアプリを作ろう①:環境構築~コンポーネント作成

今回からReactの学習記録をスタートさせたいと思います。Reactを選んだ理由は、以前作成した「ポモドーロタイマー」を 最終的にReact/Reduxにリプレイスするためです。 そのためには、React自体の理解が必須です。 まずは、簡単なアプリの作成を通して理解を…