メインカテゴリーを選択しなおす
【Hello World】TypeScript + React Native for Web + Webpack
今度はTypeScript + React Native for Web + webpack + github pages templateを作ってみました。
ReactのuseEffectでデータ渡し時の1回だけコンポーネント動作させる
ReactのuseEffectフックは、コンポーネントがマウントされた後や更新された後に特定の副作用を実行するために使用されます。本記事では、useEffectを使ってデータが渡された時に1回だけ動作するコンポーネントの作成方法を紹介します
6月8日にスタートした、大人のコソ勉が180時間を越えました。 大人のコソ勉についてはこちらから↓ ふと思い立って始めましたが、「思っていたよりも難しく」「思うようにコードが動かず」「自分がバカのように感じる」なかなかにフラストレーションが
Reactで確認ダイアログ(confirm)を表示させる3つの方法
ある画面でボタンを押した時や、現在のページから離脱する場合に「本当によろしいですか?」みたいなアラート(警告)表示をよく見かけることがあると思います。今回は、そんな確認ダイアログをReactで表示させる方法をご紹介します! Reactで確認
React: 子コンポーネント内部の関数を、親コンポーネントから操作する(useImperativeHandle)
React、useImperativeHandleの使い方
React.js : create-react-appでアプリを作成することが出来ない場合の解決法
本記事では、React.jsにて、create-react-appコマンドを用いて、新規のアプリを作成しようとした際に発生したエラーの解消法について、何故エラーが発生したのかも含めてご紹介させて頂いております。 特に、少し古い記事などを参考に特定のバージョンでReactの環境を作った方が遭遇しやすいエラーになります。
【React hooks】useState・propsの基礎を習得 – カウンターアプリ
本記事内では、React hooksで提供される関数の一つである「useState」とpropsの基礎的な使い方をカウンターアプリを作成しながら解説していきます。 加えて、公式ページの内容にも少し触れていきたいと思います […]
【React hooks】useReducerの基礎を習得 – カウンターアプリ
※ 本記事は、以下の記事の続きになります。 【React hooks】useState・propsの基礎を習得(カウンターアプリ作成) 【React hooks】useState・propsの基礎を習得 - カウンターア […]
【React hooks】useContextの基礎を習得 – カウンターアプリ
※ 本記事は、以下の記事の続きになります。 【React hooks】useReducerの基礎を習得 – カウンターアプリ作成 【React hooks】useReducerの基礎を習得 - カウンターアプ […]
React + JavaScript – 開発環境構築方法(Windows & Mac)
JavaScriptのライブラリとして、React.jsが2013年に公開されるようになってから現在まで9年以上が経過しましたが、今や多くの現場で使用されているライブラリとなりました。 しかし、まだ扱える人材がJavaや […]
[React] Sass(.scss)を導入する方法 (検証用のサンプルコードあり)
本記事では、Reactの環境へSassを導入する方法についてご紹介してます。 現在のReactのバージョンですと、これまでの方法が非推奨となっているので、これからReactを学んでいかれる方やReactのバージョンを更新するうえで、Sassを適切に使っていきたい方にオススメの内容になっておりますので参考になれば嬉しいです。
[React] Marerial UI – Material Iconsを導入する方法 + 使い方
Reactの現場でもよく用いられているCSSフレームワークは、BootstrapやBulma…など, UIフレームワークといえば、 Chakra UIやMarerial UIが挙げられます。 今回は、その中で […]
[React+Tailwind] Carousel を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Carousel コンポーネントです。 JavaScript ベースの Carousel.js です。 import { forwardRef }...
[React+Tailwind] Flowbite で Carousel を表示してみる 心を無にして始める React
準備 Flowbite が使えるプロジェクトを準備します。 Carousel コンポーネントをつくる ./src/components 配下に Carousel.js を作ります...
[React+Tailwind] Card を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Card コンポーネントです。 JavaScript ベースの Card.js です。 import { forwardRef } from 'r...
[React+Tailwind] Flowbite で Card を表示してみる 心を無にして始める React
準備 Flowbite が使えるプロジェクトを準備します。 Card コンポーネントをつくる ./src/components 配下に Card.js を作ります。 import...
[React+Tailwind] ButtonGroup を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Button コンポーネントです。 JavaScript ベースの Button.js です。 import { forwardRef } fro...
[React+Tailwind] Flowbite で ButtonGroup を表示してみる 心を無にして始める React
準備 Flowbite が使えるプロジェクトを準備します。 ButtonGroup コンポーネントをつくる ./src/components 配下の Button.js を編集し...
[React+Tailwind] Button を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Button コンポーネントです。 JavaScript ベースの Button.js です。 import { forwardRef } fro...
[React+Tailwind] Flowbite で Button を表示してみる 心を無にして始める React
準備 Flowbite が使えるプロジェクトを準備します。 Button コンポーネントをつくる ./src/components 配下に Button.js を作ります。 im...
[React+Tailwind] Breadcrumb を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Breadcrumb コンポーネントです。 JavaScript ベースの Breadcrumb.js です。 import { forwardR...
[React+Tailwind] Flowbite で Breadcrumb を表示してみる 心を無にして始める React
準備 Flowbite が使えるプロジェクトを準備します。 Breadcrumb コンポーネントをつくる ./src/components 配下に Breadcrumb.js を...
[React+Tailwind] Badge を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Badge コンポーネントです。 JavaScript ベースの Badge.js です。 import { forwardRef } from ...
[React+Tailwind] Flowbite で Badge を表示してみる 心を無にして始める React
準備 Flowbite が使えるプロジェクトを準備します。 Badge コンポーネントをつくる ./src/components 配下に Badge.js を作ります。 impo...
[React+Tailwind] Avatar を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Avatar コンポーネントです。 JavaScript ベースの Avatar.js です。 import { forwardRef } fro...
[React+Tailwind] Flowbite で Avatar を表示してみる 心を無にして始める React
準備 Flowbite が使えるプロジェクトを準備します。 Avatar コンポーネントをつくる ./src/components 配下に Avatar.js を作ります。 im...
[React+Tailwind] Accordion を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Accordion コンポーネントです。 JavaScript ベースの Accordion.js です。 import { forwardRef...
[React+Tailwind] Alert を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Alert コンポーネントです。 JavaScript ベースの Alert.js です。 import { forwardRef } from ...
[React+Tailwind] Flowbite で Accordion を表示してみる 心を無にして始める React
準備 Flowbite が使えるプロジェクトを準備します。 Accordion コンポーネントをつくる ./src/components 配下に Accordion.js を作り...
[React+Tailwind] Alert を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Alert コンポーネントです。 JavaScript ベースの Alert.js です。 import { forwardRef } from ...
[React+Tailwind] Flowbite で Alert を表示してみる 心を無にして始める React
準備 Flowbite が使えるプロジェクトを準備します。 Alert コンポーネントをつくる ./src/components 配下に Alert.js を作ります。 impo...
[React] Flowbite を使ってみる@準備回 心を無にして始める React
Flowbite Tailwind CSS ベースのライブラリ。 Build websites even faster with components on top of Tai...
[React] Tailwind CSS を使ってみる@準備回 心を無にして始める React
TailWind CSS Rapidly build modern websites without ever leaving your HTML. Bootstrap とはまた...
[React] ESLint の除外コメント [コピペ用のメモ]
公式 ルールの無効化 対象のソース import { useEffect, useState } from "react" const DebouncedInput = ({ v...
[React] React Table で ソート をしてみる 心を無にして始める React
今回は、前回の ファジー検索 の機能を付けたものに ソート の機能を加えていきます。 準備 TanStack Table v8 で React Table を使うのはこちら (*...
[React] Leader Line で要素同士を線でつないでみる 心を無にして始める React
準備 Leader Line Draw a leader line in your web page. こちらの React版 です。 LeaderLine のインストール np...
[React] react highlight words で検索文字列をハイライトしてみる 心を無にして始める React
準備 react highlight word のインストール npm install react-highlight-words 使ってみる イメージ 入力フォームに入れた文字...
[React] React Table で テーブル内のファジー(あいまい)検索 をしてみる 心を無にして始める React
準備 TanStack Table v8 で React Table を使うのはこちら (*'▽') バックエンドには、いつもの json-server を使います。 検索 イメ...
[React] React 18 から setInterval などの非同期処理で気をつけること
React 18 での変化点(の1つ) コンポーネントがアンマウントされたあとに状態が更新されても、警告が出なくなりました。 でなくなった警告はこれです。 Warning: Ca...
[React] TanStack Table v8 を React で使ってみる 心を無にして始める React
TanStask Table v8 準備 インストール npm install @tanstack/react-table react-table イメージ Table.js を...
[React] Suspense(React 18 の新機能) を Axios と合わせてみる 心を無にして始める React
Suspense サスペンスにより、コンポーネントツリーの一部がまだ表示できない場合に、ロード中という状態を宣言的に記述できるようになります。 いままで state で isLo...
React 18 の新機能をみたら、使いたくなったから今日から React 18 。 インストール 新しく npx create-react-app しましょう。React 18...
[React] Axios で複数の通信を待ち合わせてみる 心を無にして始める React
準備 Axios のインストールと使い方はこちら。 バックエンド 今回も json-server です。 使う json はこちら。 { "cats": [ { "id": 1,...
[React] Canvas で画像を拡大するとき、画像がぼけやるのを防ぐには
今回は React に限った話ではありませんが…、サンプルを React で書いています。HTMLやCSSを準備するよりReactで用意するほうがエコシステムがいろいろ揃えてくれ...
[React] OpenCV で画像の HITMISS(Hit or Miss) をしてみる 心を無にして始める React
この記事は、たぶん優先度が低いです。物体検出なら別の関数使いそうだし…、にわかには使いどころが、思いつかない (。´・ω・) 準備 React で OpenCV.js を使えるよ...
[React] OpenCV で画像のトップハット、ブラックハットをしてみる 心を無にして始める React
この記事は、たぶん優先度が低いです。にわかには使いどころが、思いつかない (。´・ω・) 準備 React で OpenCV.js を使えるようにしておきます。 今回も、形態を変...
[React] OpenCV で画像からエッジ抽出してみる 心を無にして始める React
準備 React で OpenCV.js を使えるようにしておきます。 今回も、形態を変化させるモルフォロジー処理を使っていきます。 OpenCVで定義されるタイプは、膨張、収縮...
[React] OpenCV で画像の簡単なノイズ除去をしてみる 心を無にして始める React
準備 React で OpenCV.js を使えるようにしておきます。 今回も、形態を変化させるモルフォロジー処理を使っていきます。 OpenCVで定義されるタイプは、膨張、収縮...