【React】機能の確認をしつつ、サンプル画面を作成する 2024.06.182024.06.29 久し振りにReactを触るので、簡単なアプリで機能を検証しつつ、Reactの事を学んでいきたいと考えています。 最終的な着地点はこの4画面のアプリを作成する予定 ログイン画面 パスワード発行画面 画面A 画面B ■画面遷移 ログイン画面:[再発行]ボタン → パスワード発行画面 パスワード発行画面:[戻る]ボタン → ログイン画面 ログイン画面:[ログイン]ボタン → 画面A 画面A:[メニュー(画面B)] → 画面B 画面B:[閉じる] → 画面A 目次 モダンjavascriptPostgreSQLDjango REST FrameworkReact基礎編 モダンjavascript 【React】モダンjavascript備忘録長らく使っていない言語は、思いの他忘れがちですよね。 これから「React、Vue、Angular、Riot」等を学んでいく方も、久し振りに振り返りを行っていく方も、一緒にモダンjavascriptを学んでいきましょう。 これでモダンjavascriptはバッチリ解決! PostgreSQL 【React】【PostgreSQL】環境構築編今までデータベースはIRIS/Cacheがメインだったのですが、今回は諸事情がありPostgreSQLを採用する事になりました。 備忘を兼ねて、PostgreSQLに関してのアレコレを記事にしたいと思います。 【React】【PostgreSQL】簡易的な実践編前回でPostgreSQLの実行環境が整ったので、今回は下記を「簡単に」実践していきたいと思います。 ※PostgreSQLガッツリリ使うようになったら、各項目毎にもっと深掘りしていければと思います。 Django REST Framework 【React】【Django REST Framework】環境構築編(その1)WebアプリケーションをReact、データベースをPostgreSQLを採用し、その両者をつなげる役割をDjango REST Frameworkにしたいと思います。 今回は、Djangoの環境構築までを行いたいと思います。 【React】【Django REST Framework】環境構築編(その2)WebアプリケーションをReact、データベースをPostgreSQLを採用し、その両者をつなげる役割をDjango REST Frameworkに決定しました。 前回まではDjangoの環境設定を行ったので、今回はDjango REST Frameworkの環境設定を行っていきたいと思います。 React基礎編 【React】Reactを始めるReactのアプリを作りながら、Reactについて理解を深めていくシリーズを始めます。 やはり、動かしながら覚えていくのが一番ですよね。 一通りReactの機能を試しつつ、Reactの知識を深めることを狙いたいと思います。 【React】React基礎編(JSX編)前回、Reactの環境構築を行ったので、今回はReactで抑えておく基礎知識(JSX編)を記載したいと思います。 【React】React基礎編(コンポーネント編)コンポーネントは、ページを構成する部品となります。 部品なので使いまわせるように構成する事を視野に入れると、開発効率が上がります。 → 他言語のオブジェクト指向での構築に近いものがあるのではないでしょうか。 Reactは、このコンポーネントを複数組み合わせる事で、ページを構成していきます。 【React】React基礎編(フック編)フックは、React16.8から導入された機能になります。 フックを知る事で、関数コンポーネントに様々な機能を追加する事ができます。 今回の記事は、普段よく使用するフックを、サンプルを使いつつご紹介したいと思います。