Zli × サイバーエージェント 合同LT 2024/07/14 https://zli.connpass.com/event/319572/ ReactやSwiftUIのような宣言的UIの「原理」を、10分のLTになんとか詰め込んでみました。 Reactフックは名詞起点 = オブジェクト指向…
なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
Zli × サイバーエージェント 合同LT 2024/07/14 https://zli.connpass.com/event/319572/ ReactやSwiftUIのような宣言的UIの「原理」を、10分のLTになんとか詰め込んでみました。 Reactフックは名詞起点 = オブジェクト指向…
はじめに こんにちは@Sicut_study (Watanabe Jin)です。 去年の10月頃にReactのロードマップを投稿しておかげさまで1000いいねもすぐそこになりました そこから私自身も状況がかなり変わり、大好きなReactを使ってプログラミングを教えるスクールを運営しております。 エンジニアになりたい完全未経験の方や、すでにエンジニアだけどもっと自由にプログラミングができるようになりたい人をたくさん教えてきました。 👇メンバーの記事はこちらにあります その中である程度この流れで学習をすすめていけば1-2ヶ月程度でReactで自由にサービスを作れるレベルに再現性をもってレベルアップすることができると確信がもてたので、 実際にやっているカリキュラム(React部分)をすべて紹介します ロードマップは完全未経験でもできるようなものになっていますのでわかる箇所は飛ばしてもOKです。
真にチラつかないダークモードをついに実現したぞ。実現方法と気付きを書く2024/07/14 14:36 nextjsreact このサイトはダークモードに対応しています。なぜならダークモードは基本的人権だからです(要出典)。 しばらく、サイトに訪問した直後ライトモードとダークモードが切り替わってチラつく現象が発生していました。これを改善したので、実装方法と気付いたことを残しておきます。 ダークモードの実装方法一般に、ダークモードの実装方法は3タイプあります。 OSによるモード設定を反映する メディアクエリー@media (prefers-color-scheme: dark)を使うと、OS側でダークモードを指定している時だけ有効になるスタイルを書くことが出来ます。 JavaScriptでも判定が必要な場合はmatchMedia("(prefers-color-scheme: dark)")
国産ヘッドレスCMSとして注目されているmicroCMSとNext.jsを使用したWebサイトのモダンな制作方法を学べる解説書 -モダンWebサイト制作入門
※本ページは、アフィリエイト広告を利用しています。 国産ヘッドレスCMSとして注目されている「microCMS」とJavaScriptフレームワーク「Next.js」を使ったモダンWebサイトの制作について初心者でも分かりやすく解説した入門書を紹介します。 当ブログはWordPressですが、ここ数年ヘッドレスCMSに注目が集まってきています。ヘッドレスCMSって何？という人からNext.jsは使ったことがないという人でも本書でしっかりと学ぶことができます。 著者陣は非常に豪華で、microCMSの開発陣です。開発者と聞くと開発側の目線なのでは？と心配になるかもしれませんが、実装者目線のステップバイステップで架空のコーポーレートサイトを実装しながらmicroCMSとNext.jsを用いたWebサイトのモダンな制作方法を学べます。 WordPressは使ったことがあるけどヘッドレスCMSは初
結局 useEffect はいつ使えばいいのか
useEffectはReactの中でも扱いの難しいフックとして知られています。Reactで開発を行う中でuseEffectを検討するタイミングや適切な使い方について悩んだ経験のある方も多いのではないでしょうか。 本記事では、useEffectの目的を把握し、どのような場合にuseEffectの使用を検討すべきかについて考えていきたいと思います。 コンポーネントの純粋性と副作用 まずuseEffectについて考える前に、コンポーネントの純粋性について理解する必要があります。Reactにおいて純粋性は重要な概念の1つです。 前提として、Reactではすべてのコンポーネントが純関数あることを仮定しています。 Reactは、あなたが書くすべてのコンポーネントが純関数であると仮定しています。 参照：https://ja.react.dev/learn/keeping-components-pure#
【注意喚起】ReactのuseStateの値がすぐに更新されない理由を誤って理解しがちな件について - Qiita
「state 更新 反映されない」を検索するまで Reactにまだ慣れていない段階で開発をしているとuseStateの問題に詰まってこのような検索をする方は多いかなと思います。 私もその一人で、公式のチュートリアルを一通りやったにも関わらずこの問題に詰まってしまったのは忸怩たる思いでございます。 「useStateで定義した値はset関数で更新できて、useStateはフックなので実行すると画面が更新される」というのはまずReactを勉強する最初の段階で理解するでしょう。 そこで、言われた通りにuseStateで値を定義し、ユーザーの操作によって画面を更新させるコードを書きます。 import { useState } from 'react'; export default function Counter() { const [number, setNumber] = useState
React Router v6のルーティング方法を解説 - createBrowserRouterとData APIsの活用法 | DevelopersIO
こんにちは、戸田です。 今回は React Router v6.4 以降を使用する際にどのルーティング方法を使えばいいのか自分の言葉でブログにまとめました。 まず結論 シンプルなルーティングのBrowserRouterかcreateBrowserRouterで迷ったら基本的にcreateBrowserRouterを使いましょう！ 以下がサンプルコードです。 import React from 'react'; import { Outlet, RouterProvider, createBrowserRouter } from 'react-router-dom'; const Parent = () => { return ( <div> <h1>Parent</h1> <Outlet /> </div> ) } const App = () => { const router = cr
GitHub - onlook-dev/studio: The open source, local-first Webflow alternative. Design directly in your live React site and publish your changes to code.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Next.js AppRouterで利用できるReactのServer Actions機能。クライアントからサーバ上の処理を関数で呼び出せるので非常に便利ですが、 "use server"; のことをあまり知らず、誤った使い方をすると意図せず公開したくない関数が外部に公開されてしまうケースがあるので注意です（ほとんどこんなケースはないと思いますが、なくはないので注意喚起です）。 Server Actionsの例 Server Actions用の関数として宣言するためには "use server"; が必要です。それ以外は至って普通の非同期関数で大丈夫です。 "use server"; export async function someAction() { return { message: "Server Action", }; } 次に定義したServer Actionsの関数を呼び出
Modern Emacs Typescript Web (React) Config with lsp-mode, treesitter, tailwind, TSX & more - Ovi Stoica
Table of Contents Introduction Part 1: Treesitter for Typescript & TSX LSP Support Completion setup Linter setup LSP Setup Eslint (Optional) Tailwind LSP Server LSP Performance Emacs LSP Booster Structural editing Formatting buffers with Prettier Other resources Conclusion Introduction I've worked within the JS ecosystem for the past 8 years using editors like Webstorm and VSCode, I started using
昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P
チュートリアル: Yjs, valtio, React で実現する共同編集アプリケーション - ROUTE06 Tech Blog
Yjsは、リアルタイム共同編集を実現するためのアルゴリズムとデータ構造を提供するフレームワークです。Notion や Figma のように、1 つのコンテンツを複数人で同時に更新する体験を提供することができます。 Y.Map, Y.Array, Y.Text といった共有データ型を提供し、それらは JavaScript の Map や Array のように利用できます。さらにそのデータに対する変更は他のクライアントに自動的に配布・同期されます。 Yjs は Conflict-free Replicated Data Types (CRDT) と呼ばれるアルゴリズムの実装であり、複数人が同時にデータを操作してもコンフリクトが発生せず、最終的に全てのクライアントが同じ状態に到達するように設計されています。 クイックスタート Y.Map がクライアント間で自動的に同期されるコード例を見てみましょ
javascripter です。ハローでは、初期メンバーとしてプロダクトのローンチ前からAutoReserve の開発に関わっています。 前回の記事に引き続き、筆者が社内で書いている技術ガイドラインについて紹介します。 はじめに ハローでは、高品質なコードを維持し、開発チームの技術レベル向上を図るため、チーム横断的に、有用な技術Tips、ベストプラクティス・コーディングガイドラインなど情報をNotion上に集約し、自由にエンジニアが閲覧・編集できるようになっています。 この取り組みの目的は以下の通りです： コード品質の向上と統一 開発チームメンバーの技術スキル向上 「どう」直すかでではなく「なぜ」そう修正すべきかまで理解してる人を増やす 効率的な開発プロセスの確立 前回の記事については、こちらを参照下さい。 Reactベストプラクティス: react-hooks/exhaustive-de
こんにちは、エンジニアです。 本記事ではuseMediaQueryを使うべきではない理由を説明します。 useMediaQueryとは window.matchMediaの判定結果を取得するカスタムフックを指します。 window.matchMediaはCSSでできるメディアクエリの判定をJavaScriptでも可能にするブラウザAPIです。それをReact Hooksと組み合わせることで、宣言的に判定を行えるようなカスタムフックとなります。 過去にuseSyncExternalStoreを使って実装する記事を書いたので参考にしてみてください。 上の記事ではuseSyncExternalStoreの使い道を説明するのが目的だったのですが、Reactのフックとしてメディアクエリを使える、使っても良いと捉えられてしまったようで、題材選びを少し反省しています(？) 以下はユーティリティ系ライブラ
無料で使えるSVGアイコンはたくさんありますが、使い勝手がよいシンプルなデザインで、バリエーションも豊富となるとなかなか見つかりません。 WebサイトやスマホアプリのUIでよく使うアイコンが1,470種類、カラー・サイズ・ストロークの変更もサポートしているSVGアイコン素材を紹介します。 Lucide Lucide -GitHub LucideはFeather IconsのForkで、Featherに対する不満が高まったことによりコミュニティ運営で始まったプロジェクトです。FeatherにはたくさんのIssuesやPRが未解決で放置されており、これらの対応はされていません。 Lucideのアイコンは、元のシンプルなデザイン言語に忠実なまま、可能な限りアイコンセットを拡張しています。ライセンスはISC Licenseで、個人でも商用プロジェクトでも無料で利用できます。
昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P
昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P
Reactベストプラクティス: react-hooks/exhaustive-depsのエラーを0にする - Hello Tech
javascripter です。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。 今回は、筆者が社内で書いている技術ガイドラインについて紹介します。 はじめに ハローでは、高品質なコードを維持し、開発チームの技術レベル向上を図るため、社内で継続的に技術Tipsやガイドラインの整備・蓄積を行っています。 チーム横断的に、有用な技術Tips、ベストプラクティス・コーディングガイドラインなど情報をNotion上に集約し、自由にエンジニアが閲覧・編集できるようになっています。 この取り組みの目的は以下の通りです： コード品質の向上と統一 開発チームメンバーの技術スキル向上 「どう」直すかでではなく「なぜ」そう修正すべきかまで理解してる人を増やす 効率的な開発プロセスの確立 新メンバーのオンボーディング支援 今回紹介するドキュメント 今回は、その中から「reac
GitHub - pdfslick/pdfslick: View and Interact with PDFs in React SolidJS, Svelte and JavaScript apps
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Render hooks とは、ReactにおいてカスタムフックからJSX式を返す設計パターンのことです。リンク先は私が当時在籍していた会社のテックブログに書いた記事で、当時の会社でこの設計パターンがハマる箇所に出会ったためアイデアを記事化したものです。ちなみに、Render hooksという命名は私ではなく当時の私の上司です。 私は当時から今までずっとこのパターンを推奨しているのですが、あまり流行る気配がありません。そこで、この記事では皆さんがこのパターンの考え方にもう少し納得できるように、render hooksパターンは普通のコンポーネントの拡張であるという見方をご紹介します。 Render hooksパターンの概要 Render hooksパターンは、UIの実装（JSX）と、そのUIに関連するロジック（たとえばステート）をまとめてカスタムフックから提供することを指します。簡単な例を
Render hooks とは、ReactにおいてカスタムフックからJSX式を返す設計パターンのことです。リンク先は私が当時在籍していた会社のテックブログに書いた記事で、当時の会社でこの設計パターンがハマる箇所に出会ったためアイデアを記事化したものです。ちなみに、Render hooksという命名は私ではなく当時の私の上司です。 私は当時から今までずっとこのパターンを推奨しているのですが、あまり流行る気配がありません。そこで、この記事では皆さんがこのパターンの考え方にもう少し納得できるように、render hooksパターンは普通のコンポーネントの拡張であるという見方をご紹介します。 Render hooksパターンの概要 Render hooksパターンは、UIの実装（JSX）と、そのUIに関連するロジック（たとえばステート）をまとめてカスタムフックから提供することを指します。簡単な例を
はじめに先日、初心者でも簡単に参加できる GitHub チュートリアル 『First Contributions JA』を共同開発しました！ 振り返りも兼ねて、プロジェクトの背景や使用技術について、紹介していきます。 ▼ GitHub のリンク： なぜ First Contributions JA を構築したのか？さて、First Contributions JA には、次のような特徴があります： - React/ Next.js で構築されたWebサイト - 初心者向けのGitHubチュートリアル - オープンソースのプロジェクト 上記を踏まえて、プロジェクトの経緯は、主に２つあります。 （技術スタックは、後で詳しく説明します） 1. JavaScript/ React 学習コミュニティで、共同開発を提案した！以前、 「JavaScript/ React を学習するコミュニティを、期間限
React's core architecture calls the functions you give it (i.e. your components) over and over. This fact both contributed to its popularity by simplifying its mental model, and created a point of possible performance issues. In general, if your functions do expensive things, then your app will be slow. Performance tuning, therefore, became a pain point for devs, as they had to manually tell React
Reactテスト駆動開発に一度挫折した人が、生成AIの力を借りて再挑戦する話 - Insight Edge Tech Blog
はじめに Insight EdgeのLead Engineerの日下です。 弊社ではフロントエンドのスクラッチ開発にReactを採用することが多いのですが、フロントエンドの保守性はしばしば課題となっています。 というのも、要求仕様が曖昧なPoC（Proof of Concept）の段階からMVP（Minimum Viable Product）として開発を進めることも多く、 ビジネス側ユーザの意見にも左右されながらアプリを改善していくため、画面のレイアウトやデザイン、画面遷移の変更が多発するためです。 こうした状況の中でスピードと品質を両立するためには良質なテストコードが不可欠なのはもちろん、 プロダクトコードとテストコードの双方とも、変化に対応しやすく作る必要があります。 過去にテスト駆動開発を挫折した要因 実は、筆者は過去にReactのテスト駆動開発の実践、および社内普及活動に挑戦したこ
【初心者ハンズオン】ReactでTODOアプリを作ってデプロイしよう【Firebase/Shadcn/TailwindCSS】 - Qiita
【初心者ハンズオン】ReactでTODOアプリを作ってデプロイしよう【Firebase/Shadcn/TailwindCSS】TypeScriptFirebaseハンズオンReact はじめに 今回のハンズオンではReactをこれからやっていきたい人に向けてTODOアプリを作りながらReactの基本的な使い方から実際にアプリケーションをデプロイしてユーザーが使えるリリースまでを行えます。 アプリケーションはとてもシンプルなものですので、短時間で学習することが可能です 初心者向けに本記事は書いておりますので、丁寧にセットアップから紹介していきます。 JavaScriptなどの前提知識は不要で、HTMLとCSSの知識があれば行っていただけます またこのハンズオンでは最近人気がでているShadcn/uiを活用しており、学習した後に簡単にカスタマイズをしていただけるはずです。 ハンズオンだけでは使
「State of JavaScript 2023」公開。フロントエンドライブラリ利用率1位はReact、メタフレームワークはNext.jsなど、2万3500人のエンジニアが回答
JavaScriptに興味を持つ世界中のIT技術者2万3540人が回答したアンケートの結果をまとめた「State of JavaScript 2023」が公開されました。 回答者の国別分布を見ると米国が16％、フランスが7％、ドイツも7％、イギリス（UK）が5％、ポーランドが4％、ロシアが3％、カナダが3％などで、日本は2％（回答者280人）でした。 ここでは発表された内容から、多くの読者が興味を持つであろう、JavaScriptライブラリの人気など、結果の一部を紹介してみます。 フロントエンドフレームワークはReactが1位、2位にVue.js フロントエンドフレームワークの利用率ランキングはReactで、2位以下を引き離して8年連続1位、しかも利用率を伸ばしています。2位にはAngularを抜いてVue.jsが初めて入り、3位は昨年よりランクも利用率も落としたAngularとなりました
NLUX with ReactGenerative UI With Next.jsChatGPT-Inspired UI import { AiChat, useAsStreamAdapter } from '@nlux/react'; import '@nlux/themes/nova.css'; import { send } from './send'; import { user, assistantAvatar } from './personas'; export default () => { const adapter = useAsStreamAdapter(send, []); return ( <AiChat adapter={ adapter } personaOptions={{ assistant: { name: "EinAssistant", tagline
この記事は、<strong><a href="https://techfeed.io/events/techfeed-experts-night-31">TechFeed Experts Night#31 〜 フロントエンドアーキテクチャの現状と未来</a></strong>の開催に際し、TechFeedのデータを元に日本語記事ランキングを紹介していくものです。 本記事は、TechFeed Experts Night#31 〜 フロントエンドアーキテクチャの現状と未来のセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 こんにちは、TechFeed CEOの白石です。 この記事は、TechFeed Experts Night#31 〜 フロントエンドアーキテクチャ
こんにちは。アクセシビリティ本部のアクセシビリティエンジニアの五十嵐です。SmartHRでは主にアクセシビリティテスターが見つけた課題を技術的な観点から改善したり、根本的な問題を解決するための仕組みづくりを担当しています。 さて、Meta が開発する UI ライブラリとして長い間人気を博している React ですが、2024年4月に最新版であるバージョン 19 のRC版が公開されており、注目を集めています。 バージョン 19 では "use client" や "use server" でも知られる Server Components を含む様々な機能が含まれる予定ですが、この記事では、そんな React バージョン 19 をアクセシビリティの観点からキャッチアップし、特に便利になりそうな点や、注意が必要になりそうな点などを見ていきます。 forwardRef が不要になった 仮想 DOM
6月19日、The New Stackに「Top 10 JavaScript Libraries To Use in 2024」と題した記事が公開された。この記事では、2024年に利用すべきJavaScriptライブラリのトップ10について紹介されている。 以下に、その内容を簡潔に紹介する。 React 強力なコンポーネントベースのアーキテクチャにより、複雑なユーザーインターフェースの開発が容易。 仮想DOMの実装により、パフォーマンスが向上。 豊富なエコシステムとコミュニティのサポートがあり、継続的な改善が期待できる。 Redux 予測可能な状態コンテナで、アプリケーションの一貫性を確保。 一方向のデータフローにより、状態管理がシンプルになり、デバッグが容易。 大規模なアプリケーションでのスケーラビリティとメンテナンス性を向上。 D3.js データをDOMにバインドし、データ駆動の変換を
【入門】Reactとは？特徴やインストール方法をわかりやすく解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Reactにおいて、useEffectのユースケースとして知られているのが、DOMノードに直接アクセスしなければいけない場合です。useRefでDOMノードをrefオブジェクトに取得し、エフェクト内からDOMノードにアクセスするというのがその場合の基本的なやり方です。 このようなuseRef + useEffect の使い方は、問題ない場合もありますが、実は別の手段を使った方がいい場合もあります。その場合に別の手段として適しているのがrefコールバックという機能です。 そこで、この記事ではどのような場合にuseRef + useEffectよりもrefコールバックが適しているのか、そしてrefコールバックを使う場合の注意点について解説します。 復習: refコールバックとは React DOMでは、組み込み要素（divなどHTMLの要素）に対してrefという特殊なpropを与えることができ
6月18日、Codeminer42が「How React 19 (Almost) Made the Internet Slower」と題した記事を公開した。この記事では、React 19の新しい変更がどのようにしてインターネットの速度を遅くする可能性があったかについて詳しく紹介されている。 React 19が今年の初めに発表され、新機能や開発者体験（DX）の向上が話題となった。しかし、先週、React 19に加えられたある変更が多くのウェブサイトのパフォーマンスを大幅に低下させる可能性があることが明らかになった。 この問題は、Dominik（TkDodo）のツイートから始まった。 https://x.com/TkDodo/status/1800501040766144676 React 19では、同じSuspenseバウンダリ内の兄弟要素の並列レンダリングが無効化された。これにより、兄弟要
API経由でメール送信をするためのサービスといえば、SendGrid, Amazon SES, Postmarkのような名前が出てくるかと思います。 そんな中、弊社(トラストハブ)でも利用しているResendというサービスがとても使いやすいので紹介します。また、記事後半でResendを日本で使うにあたり重要なアップデートがあったので、どんな点が変わったかを紹介します。 そもそもResendとはどんなサービスか Resendは後発サービスなだけあり、開発体験の良さに主眼が置かれて開発されています。テストでメールが送信できていることを確認する機能や、ログを確認する機能など、細かいところが使い勝手が良いなと感じています。 SDK・設定がシンプル 公式でたくさんの言語のSDKが用意されています。また、フレームワークごとに組み込むためのドキュメントも充実しています。 Knowledge Baseを見
React 19 and Suspense - A Drama in 3 Acts16.06.2024 — ReactJs, React Query, Suspense, JavaScript — 7 min read That was quite a roller-coaster last week 🎢. Some things unravelled, some things went down, and in the middle of it: React Summit, the biggest React conference in the world. Let me try to break down what happened, in hopefully the right order, and what we can all learn from it. To do that
この記事は、React 19 RCにおけるSuspenseの問題について、なるべくフラットな立場から現状を解説することを目的としたものです。 この問題の経緯については既に先行の記事が存在します。本記事は、この記事とは別の切り口でまとめ、現在の動向を追加したものとなるよう構成しました。 要約 React公式が正式リリースまでに対応してくれるようなので、大人しく待ちましょう。 概要 以下のように<Suspense>で包まれた、2つの兄弟コンポーネント<Foo>と<Bar>があるとします。 プリレンダリングを走らせる際、React 18では<Foo>と<Bar>は並列にレンダリングされましたが、React 19 RCでは直列にレンダリングされるという変更が適用されました。 なぜ変更を適用したか 直列にレンダリングすることで得られるメリットがあります。それは、レンダリングの途中経過をスタックに保存
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【2024年最新版】0からReactを勉強するならこのロードマップに従え！ - Qiita
真にチラつかないダークモードをついに実現したぞ。実現方法と気付きを書く | stin's Blog
ミニマムな React Web アプリケーションの技術スタックを大公開！ - inSmartBank
"use server"; でexportした関数が意図せず？公開される
UIコンポーネントの大きさは外から制御しよう - Qiita
Reactベストプラクティス2: SWRを正しく使うには - Hello Tech
【React】useMediaQuery は最終手段にしよう
React v19に関する周辺ライブラリへの影響と対応状況について - RevComm Tech Blog
UIデザインに最適！ シンプルなデザインで使いやすく、商用でも無料で利用できるSVGのアイコン素材 -Lucide
UIコンポーネントの大きさは外から制御しよう - Qiita
UIコンポーネントの大きさは外から制御しよう - Qiita
Render hooksをコンポーネントの拡張として理解する - Qiita
Render hooksをコンポーネントの拡張として理解する - Qiita
「GitHub難しい!!」を30分で解決するサイトを共同開発しました🚀｜kazzyfrog
Understanding React Compiler | Tony Alicea
【useEffect】初回にも実行されて困るなら《何をキッカケに、どう更新されるか》を見直せ - Qiita
React Server Componentsを理解したい
The Powerful Conversational AI JavaScript Library | NLUX
【2024年6月版】フロントエンドアーキテクチャ界隈の必読記事まとめ【TechFeed】
React 19 で変わるアクセシビリティ周りの技術 - SmartHR Tech Blog
【海外記事紹介】2024年に使うべきJavaScriptライブラリ10選
そのuseRef+useEffect、refコールバックのほうが良いかも？ - Qiita
React 19に加えられた変更が危うくインターネット全体を遅くするところだった件
メール送信サービスのResendが日本でもまともに使えるようになったので紹介したい
React 19 and Suspense - A Drama in 3 Acts
React 19 RCのSuspenseに関する問題と現状のまとめ