参照したページ 前回の props や state はどうすれば取得できますか？: フックに関するよくある質問 – React サンプルコード const [hoge, setHoge] = React.useState(''); const [prevHoge, setPrevHoge] = React.useState(''); React.useEffect(() => { re…

参照したページ フックに関するよくある質問 – React 前回の props や state はどうすれば取得できますか？ Hooks時代のReactライフサイクル完全理解への道 はじめに この記事は個人的な学習記録です。 useEffectのクリーンアップ関数の駄目な使い方について…

関数コンポーネントの再描画とは 関数が実行されて、HTML文書構造をreturnすることで、対象のDOMが再描画されます。 関数コンポーネントが再描画(再実行)されるタイミング 以下のようなときに再描画(再実行)されます。 stateが変化した時 propsが変化した時 …

参照したページ Introduction – Radix UI はじめに スタイルが適用されていないヘッドレスなUIライブラリが流行ってきているみたいなので、ちょっと @radix-ui を使ってみます。 スタイルを適用してみる 試しにSwitchコンポーネント( Switch – Radix UI )に…

参照したページ Overview - Base UI はじめに スタイルが適用されていないヘッドレスなUIライブラリが流行ってきているみたいなので、ちょっと @mui/base を使ってみます。 2023年4月17日現在では、まだ @mui/base はalpha版しか無いようです。 そのまま使っ…

参照したページ まとめ記事 UIライブラリの「機能」は欲しいけど「見た目」はカスタマイズしたいを叶えるRadix UI | microCMSブログ コンポーネントベース Primitives – Radix UI Overview - Base UI Headless UI - Unstyled, fully accessible UI component…

参照したページ シンタックスハイライト identifier: blanu.vscode-styled-jsx 参考リンク: styled-jsx - Visual Studio Marketplace 入力補完 identifier: Divlo.vscode-styled-jsx-languageserver 参考リンク: styled-jsx Language Server - Visual Studio…

Navigate Between Pages (ページ間を移動する) について ページ遷移にnext/linkコンポーネントを使う import Link from 'next/link'; Assets, Metadata, and CSS (アセット、メタデータ、CSS) について 画像の表示にnext/imageコンポーネントを使う import I…

参考にさせていただいたページ Setup - Create a Next.js App | Learn Next.js Create a Next.js App (Next.jsアプリを作成する) 以下のコマンドでcreateしました。 npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-l…

参考にさせていただいたページ Getting Started | Next.js create next-appする 作業ディレクトリを作成します。 mkdir next-js-sample 公式の「Getting Started」の「Automatic Setup」の通りに以下のコマンドを実行してみます。 yarn create next-app --ty…

はじめに どこかにメモしておこうと思って一旦ここに書いてみました。 ディレクトリ構造 src ├── assets │ ├── css │ │ └── reset.css │ ├── img │ │ ├── example1.png │ │ └── example2.png │ └── scss │ └── base │ ├── default.scss │ └── global-variabl…

参考にさせていただいたページ node.js - How to open a create-react-app from another computer connected to the same network? - Stack Overflow 概要 create-react-appで作成した開発中のローカル環境にスマホなどの別端末からアクセスできるようにしま…

参考にさせていただいたページ node.js - How to open a create-react-app from another computer connected to the same network? - Stack Overflow 概要 create-react-appで作成した開発中のローカル環境にスマホなどの別端末からアクセスできるようにしま…

参考にさせていただいたページ Deployment | Create React App 解決したい事象 以下の手順を実行したときにnetlifyが用意している404ページが表示されてしまいました。 yarn create react-app my-app --template typescript でreactアプリケーションをcreate…

参考にさせていただいたページ create react-appについて Adding TypeScript | Create React App storybookについて storybook/app/react at next · storybookjs/storybook · GitHub 今回使用したバージョン macOS Catalina 10.15.7 node v16.13.1 react 17.…

参考にさせていただいたページ "npx create-react-app my-app" stopped working in 4.0.3 · Issue #10601 · facebook/create-react-app · GitHub 失敗した操作 公式ページの「https://ja.reactjs.org/docs/create-a-new-react-app.html」にならって、以下の…

はじめに create-react-appしてアプリケーションを作りました。 node v16.10.0を使っていて、node-sass v6.0.1をインストールしました。 すると以下のようなエラーメッセージが表示されました。 Failed to compile ./src/index.scss (./node_modules/css-loa…

参考にさせていただいたページ ElementやEventに型をつけよう 型定義と関数定義を別々にやる たぶんこんな感じ import { FocusEventHandler, ChangeEventHandler, CompositionEventHandler } from 'react'; type HandleBlur = FocusEventHandler<HTMLInputElement>; type Handl</htmlinputelement>…

参考にさせていただいたページ React で this.props.children に新しい Props を渡す - 無駄と文化 reactjs - How to assign the correct typing to React.cloneElement when giving properties to children? - Stack Overflow サンプルコード import { clon…

はじめに create-react-appしてアプリケーションを作りました。 node v16.10.0を使っていて、node-sass v6.0.1をインストールしました。 すると以下のようなエラーメッセージが表示されました。 Failed to compile ./src/index.scss (./node_modules/css-loa…

はじめに create-react-appしてアプリケーションを作りました。 node v16.10.0を使っていて、node-sass v6.0.1をインストールしました。 すると以下のようなエラーメッセージが表示されました。 Failed to compile ./src/index.scss (./node_modules/css-loa…

参考にさせていただいたページ CSS Modulesについて 【React】CSS ModulesでCSSとSass(SCSS)のローカルスコープを作る - クモのようにコツコツと 2020年におけるCSS設計の暫定解 | foo-x CSS Modulesの型定義について TypeScript + CSS Modules をWebpackで…

参考にさせていただいたページ VS Code Extensionのインストール ESLint - Visual Studio Marketplace eslintのインストールと設定 主に「りあクト!（第3.1版）」という書籍の第6章を参照しました。 りあクト！ TypeScriptで始めるつらくないReact開発 第3.1…

参考にさせていただいたページ 最新版TypeScript+webpack 5の環境構築まとめ(React, Vue.js, Three.jsのサンプル付き) - ICS MEDIA npmモジュールのインストール webpackとTypeScriptの関連モジュールをインストールします。 yarn add --dev webpack webpack…

参考にさせていただいたページ Create Next App | Next.js コマンド yarn create next-app --typescript 覚書 yarn create next-app --typescriptでプロジェクトを作成しました。 Next.jsはcreate-react-appしたときや、create nuxt-appしたときと違って、プ…