20230204のReactに関する記事は16件です。

【React】 Stateのリフトアップとは

環境 React 18.2.0 はじめに Reactは双方向バインディングではなく、単方向のデータフローを採用しています。 双方向バインディングだと、データの状態がどのように変更されているかや、状態…
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

MUI(Material UI)のDataGridでセルとヘッダーに独自のコンポーネントを設置する方法【React】

ReactのUIフレームワークであるMUI(Material UI)のDataGridにて、セルとヘッダーに独自のコンポーネントを設置する方法を解説していきます。 セルの中にクリックできるボタンを設…
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Reactとmaterial-uiを用いたアプリでCarouselを実装する方法

はじめに react-material-ui-carouselを用いてCarouselを実装する方法を備忘録として書きます. 使い方 Carouselの説明やインストール方法,基本的な使い方は,「R…
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【React × Typescript】サイドバーの開閉をuseContextで状態管理する

事前準備 こちらの記事を参考にヘッダーまで作成してみましょう! 以下が作成した画面です。(ダークモード設定時) ヘッダー部分とメニューボタンをコンポーネント化 ヘッダーのコンポーネント化 ヘッダーを…
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

YupとReact Hook Formで作る型安全なフォーム

はじめに React Hook FormとYupは、Reactでフォームを作る際によく使われるライブラリの組み合わせです。これらを使用することで、高機能なフォームを簡単に実装することができます。 こ…
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

React Hook FormとYupで作る型安全なフォーム

はじめに React Hook FormとYupは、Reactでフォームを作る際によく使われるライブラリの組み合わせです。これらを使用することで、高機能なフォームを簡単に実装することができます。 こ…
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

ブラウザでの縦書きエディタ

はじめに ブラウザでは基本的に縦書きは不可能である。なぜかというと、縦書きを使用している国は日本と台湾しかないが、主要なブラウザは横書きしか存在しない英語圏で開発されているからである。そこで、縦書き…
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

未経験駆け出しエンジニアはスキルをつけたい

Spring Boot・React・MysqlでTodoアプリを作ってみた エンジニアになって半年くらい経つのですが、 案件先でプログラミングを全くやっておらず、先行きが見えないので少しでもアピール…
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【React】<input type='number'>にマウススクロールでの数値入力を無効にする

サンプル <input type= 'number' /> といった数値入力の入力フォームがあるとします。 画面上でこの入力フォームにフォーカスし、マウスをスクロールすると数値が入力されてしまう場合…
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【React】useState()で入力項目のstateを管理する。

はじめに 昨今、react-hook-formなど入力値を取得〜バリデーションまでしてくれるライブラリが充実していますが、あえてuseState()で入力フォームのStateを管理する方法を書きたい…
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【React/TypeScript】useState()で入力項目を管理する。

はじめに 昨今、react-hook-formなど入力値を取得〜バリデーションまでしてくれるライブラリが充実していますが、あえてuseState()で入力フォームのStateを管理する方法を書きたい…
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Styledで定義したstyled-componentsにcssが適用されないとき

styledを使ってcssを適用したコンポーネントを定義する際、never usedのwarningが出てcssも適用されないときの対処法 問題が出るテストコード import React from…
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

React + MUI v5 でタグのようなUIを作る

Gmail メール作成のアドレス表示のように、入力・選択した文字をタグ表示する方法です。方法を調べると、React UIライブラリのMUIで作れると知り、試作する中で学んだ内容を残すことにしました。…
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

React SPA 〜S3 Web hostingで環境変数を仕込む方法〜

はじめに この記事はcreate-react-appで作ったSPAをAmazon S3のウェブホスティングを使用して外部公開する際の環境変数の設定方法をまとめた記事です。 S3へデプロイしているサー…
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

React.Memoizationとは - useCallBackを使ってリレンダリングを防ぐ

直前の記事に続いて、子供コンポーネントに関数propsを追加して渡せば、どのような状況になるでしょ import React, { useCallback } from 'react' import…
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【TypeScript】Mockdate使って現在日時を固定化

背景 ladle(storybookのようなコンポーネントカタログ)にて、日時表示のバリエーションを持たせたかった。そのためには、現在日時をmock(固定化)する必要があった。 導入 $ npm i…
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む