[React]実際にプロジェクトを作ってみる「メモアプリ」　 #100本ノック

こんにちは、38歳でプログラミング始めてノマド生活を実現できたMalinです。現在はオーストラリアに滞在中。

React JSで実際にプロジェクトを作ってみる。今日のテーマはメモアプリ。入力欄にテキストを入れて保存していくという簡単なアプリ。

機能: メモを追加・編集・削除できる簡単なメモ帳アプリ。
学べること: useStateとuseEffectの活用、ローカルストレージへのデータ保存。

✅今日のゴール

✅実装手順

🎈手順 1: Reactプロジェクトのセットアップ

まずは、Reactの環境をセットアップします。

１）プロジェクトディレクトリの作成 ターミナルを開いて、以下のコマンドで新しいディレクトリを作成し、そこに移動します。

mkdir memo-app
cd memo-app

２）Create React AppでReactプロジェクトを作成 次に、npx create-react-appコマンドを使って、Reactプロジェクトを生成します。

npx create-react-app .

３）開発サーバーの起動 インストールが完了したら、開発サーバーを起動します。

npm start

ブラウザでhttp://localhost:3000を開き、Reactのデフォルト画面が表示されることを確認します。

🎈手順 2: メモアプリの作成

次に、App.jsを編集してメモアプリを作成していきます。

１）src/App.js の編集
プロジェクトのsrc/App.jsファイルを開き、以下のように書き換えます。