useEffectはなぜ使う必要があるのか? document.title = 'title' をラップする理由
答え(結論): レンダリングとエフェクトを分離するため クリーンアップを設定するため useEffect でラップする意味ってなくない? 以下の2つのコードはどちらもレンダリングすると Hello world と表示され、ページタイトルが Hello world になります。 const App1 = () => { useEffect(() => { document.title = 'Hello world'; }); return <h1>Hello world</h1> }; 同じ動作をするのであれば、なぜ useEffect でラップする必要があるのでしょうか? 理由1: レンダリング時に react の内部動作を考慮しなくて済む useEffect を使っていない App2 は、react が DOM 更新している最中に document.title = 'Hello worl
巷の「ReactとNext.jsの比較」はここがおかしい、というか比較すること自体が微妙 - honey32
(WIP まとまったら Qiita とかに上げるかも) TLDR; 「React と Next.js を比較」という記事で、 Next.js と比較できるのは「フレームワークなしで React を使うという選択肢」であって、「React そのもの」ではない。 ✅️ React を使うのに 「フレームワークあり」 vs 「フレームワークなし」 ❌️「React」 vs 「Next.js」 それはそうと、「create-react-app の機能・特徴」のことを、「React の機能・特徴」であるかのように書いてしまっている記事が多い create-react-app 自体が擬似的なフレームワーク（といえそう） そもそも、create-react-app は今は更新されてないので create-vite-app を使うべき フレームワークあり or フレームワークなし 【フレームワークあり】
ssig33: "最近最小限のReactアプリを作るのに使ってるもの についてとりあえずメモしとく。 ##..."
新人声優 +81-9014502501 mail@ssig33.com 0088-7709-7529 it/it. my opinion may be not my own. but my fate is my own. 最近最小限のReactアプリを作るのに使ってるもの についてとりあえずメモしとく。 前提: デカいフレームワークは使わない next.js, Astro, Remixは使わない。next.jsとAstroは大好きなのだが、社内向けとか個人用とか小さいアプリに使うにはあきらかに恐竜であると思う。Remixは大好きではない。 前提: SSRしない SSRもSSGもISGもしない。CSRでいい。SSRしたいならReactをそもそもぶん投げたほうが(個人レベルなら)いいと思ってる。それがほしいならPHPやRails でええ。今更RailsでView書きたくないとか思うかもしれない
【徹底比較】Vue.js と React でレンダリングされる値、されない値
*1. 画面に表示されるがコンソールにエラーが出る。 Warning: Received NaN for the `children` attribute. If this is expected, cast the value to a string. *2. 画面には表示されずコンソールにワーニングが出る。 [Vue warn]: Invalid VNode type: undefined (undefined) *3. Chrome だと以下の形式（実行環境によって異なる可能性あり）。 Mon Jan 01 2024 00:00:00 GMT+0900 (GMT+09:00) *4. ランタイムエラー。 Uncaught Error: Objects are not valid as a React child (found: object with keys {}). If you
SPAセキュリティ超入門 | ドクセル
スライド概要 SPA(Single Page Application)の普及が一層進んでおり、従来型のMPAを知らないウェブ開発者も生まれつつあるようです。SPA対応のフレームワークでは基本的な脆弱性については対策機能が用意されていますが、それにも関わらず、脆弱性診断等で基本的な脆弱性が指摘されるケースはむしろ増えつつあります。 本セッションでは、LaravelとReactで開発したアプリケーションをモデルとして、SQLインジェクション、クロスサイトスクリプティング、認可制御不備等の脆弱性の実例を紹介しながら、現実的な対策について紹介します。LaravelやReact以外のフレームワーク利用者にも役立つ説明を心がけます。 PHPカンファレンス2022での講演資料です。 PHPカンファレンスでの動画URL https://www.youtube.com/watch?v=jZ6sWyGxcCs
React Aria
Bring your own styles. React Aria is style-free out of the box, allowing you to build custom designs to fit your application or design system using any styling and animation solution. Each component is broken down into individual parts with built-in states, render props, and slots that make styling a breeze. Learn more <DatePicker> <Label>Date Planted</Label> <Group> <DateInput> {segment => <DateS
モーダルダイアログの未来はdialog要素で幸せになるか
こんにちは、及川です。 今回のテーマはdialog要素です。みなさん、dialog要素はご存知でしょうか？もう現場で使っているでしょうか？ dialog要素はいわゆるダイアログボックスを描画するための実装で、HTML要素の中では比較的新しめの要素です。このdialog要素の仕様を理解し、モーダルダイアログコンポーネントとしてどのように実装するかを学習することが本記事のゴールです。 dialog要素 ってなに？dialog要素はダイアログボックスを表現するためのHTML要素です。 cf) <dialog>: ダイアログ要素 – HTML: ハイパーテキストマークアップ言語 | MDN dialog要素は新しめとは言うものの意外と長い歴史をもっていて、2012年あたりから今の形でHTMLの草案に追加されたり削除されたりを繰り返し、全てのモダンブラウザで動くようになったのが2022年のことです。
ReactプロダクトにおけるButtonコンポーネント実装の最適解を探し続けた結果
2023/12/13 aria-disabledの付け方を改良 2023/12/11 タイポ修正 2023/12/08 next/linkのhrefにundefinedを渡すとエラーがでるため、disabledにする方法を修正 <Button asChild ref={}>とrefを指定できてしまっていたのを修正 セミコロンをつけないように 2023/12/07 タイポ修正(priamry -> primary) import { cloneElement, forwardRef, isValidElement } from "react" import styles from "./style.module.css" import clsx from "clsx" export type ButtonProps = { variant?: "primary" | "secondary"
Adobe Design System の React Spectrum を理解していく ~ Part 1 概要~
はじめに React を使用したコンポーネントライブラリのコードリーディングをしたいなと思い、Adobe のデザインシステムに組み込まれている React Spectrum を読んでいるので、そのメモを残していく。 1 つの記事にまとめたかったが、コードを読むのに時間がかかるのと、かなり長くなるので分割して残していく。 React Spectrum の概要 本体は Spectrum であり、この思想を生かしたコンポーネントライブラリーとして、React Spectrum がある。 Spectrum の原則は「Rational」、「Human」、「Focused」の 3 つになっており、この原則どおり、アクセシビリティや i18n などを包括的にカバーするように React Spectrum もできている。 React 以外にも CSS だけ取り出してスタイルを当てれるように spectru
react-transition-group - Qiita
react-transition-groupドキュメント react-transition-groupはReactでCSSアニメーションを扱う為のライブラリです。 見栄えのするモーション自体を提供してくれるわけではなく、CSSを適用するタイミングを提供してくれるので、自分でアニメーションのCSSを書いてアニメーションさせます。 下記の4つのコンポーネントが提供されます。 Transition CSSTransition SwitchTransition TransitionGroup 今回はcreate-react-appを使い、CSS(SCSS)はCSSModulesを使っていきます。 ※レンダリング回数削減などパフォーマンス面については扱いません。 インストール # create-react-appのインストール npx create-react-app プロジェクト名 # プロジェク
Next.js に対する Kent C. Dodds の批判と、Lee Robinson のアンサーの要約
Next.js に対する Kent C. Dodds の批判と、Lee Robinson のアンサーの要約 はじめに 10 月 26 日に Next.js Conf が開催されましたが、それと前後して Kent C. Dodds (以下 kentcdodds と呼びます) と Lee Robinson (以下 leerob と呼びます) がそれぞれ という記事を公開しました。前者はタイトルの通り、Testing Library の作者であり、Remix の共同創業者の一人でもある開発者兼教育者 kentcdodds が、Next.js を使わない理由について述べたものです。そして後者は、Vercel の VP of Developer Experience である leerob が、主に前者に対する反論を述べたものです。筆者は両方の記事を公開後すぐに面白く読み、そしてどちらにも頷けるところ
ButtonとLink、どう実装する？
ButtonとLink、どう実装する？ 2023/08/30 Encraft #6 @yoshiko_pg 1
App Router時代のゼロランタイムCSS in JSに何を使えばいいの？
はじめに こんにちは！ 犬専用の音楽アプリ オトとりっぷでエンジニアしています、足立です！ この記事では、Next.jsのReact Server Components(RSC) で使用可能なゼロランタイムCSS in JSライブラリを比較します。 目次 モチベーション 使えるライブラリたち 選定基準 選定結果 比較結果 書き味 パフォーマンス Dynamic Styling 結論 モチベーション みなさん、Next.jsのReact Server ComponentsのStyleをどうやるか問題に悩んでおられますね？ 私もどれを使えばいいのかわからずNext.js公式に見に行くと、App Routerで使用できるものとして、以下のライブラリを上げています。 が、React Server Componentsではnot supportedと記載されており、まだまだ未整備な状況のようです。
なぜReactは標準でComponentをmemo化しないのか？
はじめに 普段はスタートアップでBtoB SaaSの開発をしているtaroと申します。 今回は、Reactのmemo化について考えている中で抱いた 「なんでReactは標準でComponentをmemo化していないんだろう？」 という疑問を解消するために、色々と調べたり考えたりした内容をまとめました！ 途中でrenderのタイミングや、memo化で再renderが抑えられる理由などの前提知識の復習も含めていて、memo化について詳しくない方もmemo化の勉強にもなると思うので、ぜひぜひ読んでみてくださいー！ なぜこんな疑問を抱いたのか？ まずはそもそも僕がタイトルにあるような疑問を抱いた背景です。 疑問を抱くまでの思考プロセスはこんな感じです。 「再renderが余分に走ってて画面が重いから最適化したいなー」 →「React.memo()を使ってComponentをmemo化しよう！」 →
useEffectの挙動をクイズ形式で振り返る
はじめに 普段はスタートアップでBtoB SaaSを作っているtaroと申します！ 今回はuseEffectの挙動をしっかりと理解するために、クイズ形式で振り返っていこうと思います。 普段、何気なーく使っていますが、便利なものって便利がゆえに詳しく調べる機会ってあんまりないですよね。 僕自身、最初は動くことを優先した開発の中でReactを学んできたため、こういった基礎中の基礎の学習が結構おろそかになっています。 なので今回は、useEffectの挙動をクイズ形式で1つ1つ振り返っていこうと思います。 ぜひ1問1問考えながら、楽しく読んでいただければ幸いです！ 言葉の定義 クイズ中に使用する言葉の定義です！ render ここでは関数Componentのreturnを実行して、DOMをブラウザに描画することを指します。 副作用編 最初は副作用が実行されるタイミングのクイズです。 Q1: 第2
ReactMarkdownにシンタックスハイライトを適用する方法
ReactのMarkdownにシンタックスハイライトを適用する方法 ReactMarkdownを使っていてそのcodeに対して、シンタックスハイライト（syntax-highlight）を適用する際に手こずったので、備忘録として残します。（このブログも同様の方法でsytanx highlitを適用しています。） 使うライブラリは、react-syntax-highlighter なので、 まずは、インストールします。 次に下記のコードのようにMarkdownにハイライトするcomponentsを追加すると codeにsyntaxハイライトが適用されるようになります。 また気をつけないといけないのは、import { tomorrow } from 'react-syntax-highlighter/dist/cjs/styles/prism' です。ESMを使っている場合は、import
コンポーネントベースで開発する時の CSS の書き方とコンポーネントの分類 (自己流)
React や Svelte でコンポーネントベースで開発するとき特有の CSS ノウハウってあんまり効かない気がする Twitter に書いたら反響があったので、自己流だけどまとめておく React Component の管理単位と、CSS としてのレイアウトの管理ポリシーは違うよね、みたいな話をマークアップエンジニアに時折されるが、そんな話は無視して完全一致させる。そういう星のもとで開発している コンポーネントの分類 ロジックコンポーネント レイアウトコンポーネント ブロックコンポーネント インラインコンポーネント 定義 ロジックコンポーネント Provider や hooks などのデータ処理だけを扱い、子に渡すコンポーネント 一切の CSS や DOM 実体を持たない レイアウトコンポーネント レイアウトコンポーネントは複数の子ブロックコンポーネント(または slot)を持ち、子ブ
Reactを使うならReact Developer Toolsの再レンダリング時ハイライトくらい設定してくれ
モダンフロントエンドについて初めて書きます。お手柔らかに。 最近 React と Next.js に入門したのですが、入門時点で一番最初に知っておきたかったことについて書きました。 「React 初心者が useState とかを学習する前にまず一番にやることはこれ」っていう内容です。。 タイトルは自分への戒めです。 TL;DR この記事を読むと React Developer Tools の簡単な使い方を知り、useState の再レンダリングについて動きがイメージできるようになると思います React Developer Tools これのこと。React を使った開発をするのであれば、必ず導入しないといけないレベルのもの。 再レンダリング時ハイライトの設定 React Developer Tools をインストールした後、F12 を押下して Component を選択この歯車を押下す
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix
React
