本投稿は TECOTEC Advent Calendar 2021 の23日目の記事です。
こんにちは、次世代デジタル基盤開発事業部の渡邊です。
今回の記事では、自己学習を目的として「React+Node.js+MySQL」の組み合わせで「マンガ管理アプリ」を作ってみた時に取り組んだことを備忘録として残していきます。
なお、今回の取り組みでは「予めMySQLに登録されたマンガ情報をReactで構築した検索画面から検索して表示させる」ことを目標としています。
イメージとしては以下のようなものを作ります。(かなりシンプルです・・・)
今回の記事は長い記事となりますので、先に構成をご紹介します。
目次
- 目次
- 環境
- 環境構築
- 1.WSL/Ubuntu/Node.js/npmのインストール
- 2.MySQLのインストール
- 接続確認
- 1.React+Node.js
- 2.Node.js+MySQL
- 3.React+Node.js+MySQL
- UIの実装
- 1.Headerコンポーネントの実装
- 2.Formコンポーネントの実装
- 3.Listコンポーネントの実装
- useStateの利用
- POST通信の実装
- 1.React側の修正
- 2.Node.js側の修正
- コンポーネントの表示/非表示切り替え
- 1.Appコンポーネントの修正
- 2.Formコンポーネントの修正
- 3.Listコンポーネントの修正
- まとめ