【Reactアプリ作成 JS編 #1】Reactで「気になるものリスト」を作ろう
React初心者向けに、JavaScriptで「気になるものリスト」を作るシリーズです。第1回では、完成する3画面のアプリや管理するデータを確認し、ReactとJavaScriptの役割を整理します。
JavaScriptの記事
JavaScriptに関する記事一覧です。
記事一覧
【Reactアプリ作成 JS編 #2】Reactを動かそう
React初心者向けに、Viteで作成したReactアプリを動かし、複数のJSX要素をdivやFragmentでまとめる方法を解説します。開発者ツールで、divとFragmentの違いも確認します。
【Reactアプリ作成 JS編 #3】Stateで画面を切り替えよう
React初心者向けに、Appコンポーネント内でscreen Stateを使い、一覧・新規登録・編集の表示を切り替える方法を解説します。再レンダリングについても確認します。
【Reactアプリ作成 JS編 #4】一覧画面に1件のデータを表示しよう
React初心者向けに、JavaScriptオブジェクトのプロパティを取り出し、JSXの{}を使って一覧画面に1件分のデータを表示する方法を解説します。
【Reactアプリ作成 JS編 #5】配列を一覧表示しよう
React初心者向けに、複数のJavaScriptオブジェクトを配列で管理し、map()を使ってテーブルへ一覧表示する方法を解説します。Reactのkeyについても確認します。
【Reactアプリ作成 JS編 #6】一覧画面をコンポーネントに分けよう
React初心者向けに、長くなった一覧画面を同じApp.jsx内のコンポーネントへ分け、親から子へ値や関数をpropsで渡す方法を解説します。
【Reactアプリ作成 JS編 #7】コードを役割ごとに整理しよう
React初心者向けに、一覧・新規登録・編集の画面コンポーネントや初期データ、選択肢を役割ごとのファイルへ分け、exportとimportで利用する方法を解説します。
【Reactアプリ作成 JS編 #8】新規登録画面にフォームを作ろう
React初心者向けに、CreateScreenにフォームを作り、StateとonChangeで入力値を管理し、送信時に入力内容から新しいデータを作る方法を解説します。
【Reactアプリ作成 JS編 #9】一覧データをStateで管理しよう
React初心者向けに、AppでitemsをStateとして管理し、CreateScreenから受け取った新しいデータにIDを付けて一覧へ追加する方法を解説します。
【Reactアプリ作成 JS編 #10】編集画面を作ろう
React初心者向けに、編集するデータのIDをStateで管理し、find()で対象データを取得してEditScreenのフォームへ表示する方法を解説します。
【Reactアプリ作成 JS編 #11】編集したデータで更新しよう
React初心者向けに、EditScreenで編集したデータをAppへ渡し、items Stateの対象データを更新する方法を解説します。
【Reactアプリ作成 JS編 #12】データを削除しよう
React初心者向けに、編集画面から削除するデータのIDをAppへ渡し、filter()を使ってitems Stateから対象データを削除する方法を解説します。
【Reactアプリ作成 JS編 #13】カテゴリとステータスで絞り込もう
React初心者向けに、ListScreenでカテゴリとステータスの選択値をStateとして管理し、filter()を使って一覧データを絞り込む方法を解説します。
【Reactアプリ作成 JS編 #14】キーワードで検索しよう
React初心者向けに、ListScreenで検索キーワードをStateとして管理し、filter()とincludes()を使って名前とメモからデータを検索する方法を解説します。
【Reactアプリ作成 JS編 #15】localStorageで保存してアプリを完成させよう！
React初心者向けに、localStorageから一覧データを読み込み、新規登録・更新・削除のタイミングで保存して、ページを再読み込みしてもデータが残るようにする方法を解説します。