エンジニアを目指す日常ブログ

日々勉強したことのメモ。独学ですので間違っていたらコメント等で教えてください。

React

React×Typescriptでページ遷移時に値を渡す方法

React×Typescriptでルーティングする際、前画面の値を次の画面に渡す方法を記載する。 ①URLパラメータを使う(パスパラメータ、 クエリパラメータ)② ``コンポーネントにstateを渡す③`useHistory()`を使う

Vagrant上でGatsbyブログのひな型を作成した

Gatsbyでブログを作成してみたい。まずはスターターキットを利用して、型だけ作ってみる。

【React+Node.js/socket.io】チャットアプリに入室機能とユーザ名表示機能を追加する

ReactとNode.js Expressを使って、チャットアプリの超基礎となる部分を作成した。今回は、機能を追加し、さらにチャットアプリに近づける。

Typescriptの特殊な型定義のメモ

型定義が必要なTypescriptを利用しているが、何を定義したらよいか難しい場合があるので、調べた内容を記載する。

react-router-domを使ったルーティング方法メモ

eact-router-domを利用して基本のページ遷移を実施する。 react-router-domは2021/11/3にバージョン6がリリースされたようだが、情報が少なくて独学が難しいのでバージョン5から始める。

React × Typescriptでコンポーネントを書く時のテンプレートメモ

React × TypeScriptでコンポーネントを追加するときに毎回迷うので、基本となる要素をメモ。

ReactでCSSを適用する方法のメモ

ReactでCSSを適用する方法のメモ。ReactでCSSを当てる方法はいくつかある。覚えておけばよさそうなものだけ抜粋してメモ。

【React】関数コンポーネントの外に書いた処理はいつ実行されるのか

Reactでは、コンポーネントを関数で定義しているが、関数の外に書いた処理はいつ実行されているのかよくわからなかったので試してみた。

【React】レンダリングを制御するための関連知識メモ

Reactのレンダリングに関わるuseEffect、memo、useCallback、useMemoに関しての基本事項を記載。

【React/ useState】setState関数の書き方が下手で大量レンダリングが起こった話

Reactを利用してアプリを作っていたところ、予期せぬ大量レンダリングが発生して画面描画が遅くなってしまった。 いろいろ試した結果、useStateのset関数の使い方が悪いことがわかったのでメモ。

React+Node.jsとsocket.ioでチャットアプリの基礎を作成する

ReactとExpressを利用して簡易チャットアプリを作成した。 実施した内容をメモ/紹介する。

画面サーバ(React)とWebサーバ(Node.js)をSocket.ioで接続する方法メモ

チャットアプリの事前準備として、画面サーバ(React)とWebサーバ(Node.js)を別々に構築して、クライアントとWebサーバ間をSocket.ioで接続する。

WEBサーバと画面サーバを作成して相互に通信させる

自分で画面サーバとWebサーバを作成し、通信させる。 具体的には、画面サーバがWebサーバから値を取得して、画面表示する。 また、このときに必要になるCORSについて理解する。

package.jsonとpackage-lock.json とは?(Node.js/React)

ReactアプリやNode.jsのExpressでアプリを作ると自動で作成される`package.json`ファイルの意味をメモ。

npm installでのパッケージインストールが上手くいかないときにやったことメモ

APIで値を取得するHTTP クライアント`axios`をインストールしたところエラーとなった。解決した方法のメモ。

ECS(Fargate)でReactアプリを起動する方法メモ

ECSのコンテナにReactアプリを載せる方法のメモ。ECRを利用。

ReactにおけるCSSの設定方法(styled-components)

React機能の勉強メモ。Reactで作成するアプリにCSSを適用する方法のメモ。今回はstyled-componentsを利用。

React(Java Script)アロー関数の文法と、ハマった罠

ReactでWebアプリを作成したい。dockerやAWS Amplifyも使ってみたい。今回は、アロー関数の罠についてメモ。

VScodeでReact開発をするためにESLintをインストールする方法メモと、VScodeに入れた拡張機能

ReactでWebアプリを作成したい。dockerやAWS Amplifyも使ってみたい。今回はVScodeでESLint(JavaScript のための静的検証ツール)を使えるようにする。その他、必要な拡張機能をインストールする。

作成したReactアプリを編集・ビルド・ホットリロードする方法メモ

ReactでWebアプリを作成したい。dockerやAWS Amplifyも使ってみたい。今回はアプリを編集する。

Reactアプリ(または React×TypeScriptアプリ)を作る方法メモ

ReactでWebアプリを作成したい。dockerやAWS Amplifyも使ってみたい。今回はコンテナ上でReactアプリを作成、起動する。