The BestJavascriptVueAngularReactJavascriptGrid in the World Add high-performance, feature rich, and fully customisable Data Grids to your application in minutes with our free, open source library.
AG Grid: High-Performance React Grid, Angular Grid, JavaScript Grid
The BestJavascriptVueAngularReactJavascriptGrid in the World Add high-performance, feature rich, and fully customisable Data Grids to your application in minutes with our free, open source library.
MUI: The React component library you always wanted
Ready-to-use foundational React components, free forever.
小手先に見えるテクニックでも、実はReact的に考えられる
皆さんこんにちは。React、使っていますか？ Reactを″正しく”使うことは難しいと感じる方も多いのではないでしょうか。 特に筆者はReactの正しい使い方に厳しく、こんな記事も出しています。熟練のReact使いでもなければ、この記事を読んで難しいと思うのも仕方がありません。 useEffectに関しては、React公式のドキュメントでも「そのエフェクトは不要かも」というページがあり、useEffectを使ってしまいがちだが、useEffectの使用が適していない場面について解説されています。 この記事の目的 上記の公式ドキュメントで解説されている中でもkeyを使うテクニック（あとでこの記事でも説明します）に関しては、今より未熟だった昔の筆者は、あまり良く思っていませんでした。なぜなら、それが 「Reactらしくない、小手先のテクニック」 に見えたからです。 しかし、よくよく考えれば、
React 19.2リリース — 新コンポーネント<Activitiy>やパーシャルプリレンダリングなど改善点多数
10月1日、Reactチームが「React 19.2」を公開した。この記事では、Reactの最新リリースに含まれる新機能や改善点を紹介する。 10月1日、Reactチームが「React 19.2」を公開した。この記事では、Reactの最新リリースに含まれる新機能や改善点を紹介する。 新しいReactの機能 <Activity /> 新コンポーネント<Activity>はアプリを「アクティビティ」に分割して管理できる仕組みである。 これにより、画面上に表示する／隠すだけでなく、効果的にマウントやアンマウント、更新の優先度を制御できる。 // 従来 {isVisible && <Page />} // 新しい書き方 <Activity mode={isVisible ? 'visible' : 'hidden'}> <Page /> </Activity> visible: 子要素を表示し、副
<Activity> – React
When an Activity boundary is hidden, React will visually hide its children using the display: "none" CSS property. It will also destroy their Effects, cleaning up any active subscriptions. While hidden, children still re-render in response to new props, albeit at a lower priority than the rest of the content. When the boundary becomes visible again, React will reveal the children with their previo
Separating Events from Effects – React
Event handlers only re-run when you perform the same interaction again. Unlike event handlers, Effects re-synchronize if some value they read, like a prop or a state variable, is different from what it was during the last render. Sometimes, you also want a mix of both behaviors: an Effect that re-runs in response to some values but not others. This page will teach you how to do that. You will lear
eslint-plugin-react-hooks – React
eslint-plugin-react-hooks provides ESLint rules to enforce the Rules of React. This plugin helps you catch violations of React’s rules at build time, ensuring your components and hooks follow React’s rules for correctness and performance. The lints cover both fundamental React patterns (exhaustive-deps and rules-of-hooks) and issues flagged by React Compiler. React Compiler diagnostics are automat
React 19.2 – React
In React 19.2, Activity supports two modes: visible and hidden. hidden: hides the children, unmounts effects, and defers all updates until React has nothing left to work on. visible: shows the children, mounts effects, and allows updates to be processed normally. This means you can pre-render and keep rendering hidden parts of the app without impacting the performance of anything visible on screen
App Router時代における「大規模React開発」のフォルダ設計術。Colocationによる関心の分離 | レバテックラボ（レバテックLAB）
前回は、フォルダ設計の基礎理論として、フラット構造から技術別分類、そして機能別分類への進化について学びました。特に機能別分類の優位性として、関連ファイルの物理的近接、変更影響範囲の明確化、チーム分業の責任範囲明確化という3つの重要なメリットを確認しました。 今回は、機能別分類の理論を実際のプロジェクトでどう実装するかに焦点を当てます。現代のReact開発で特に有効な具体的なパターン、Next.js App Routerとの組み合わせ方法、そしてプロジェクトの特性に応じた選択指針について詳しく解説していきましょう。 ▲Feature-based Patternのフォルダ階層 機能別分類の理論を理解したところで、実際にどのような構造で実装するかを見ていきましょう。ここでは現代のReact開発で特に有効な2つのパターンを詳しく解説します。 Feature-based Pattern：機能別分類の
Next.js 15.5
Next.js 15.5 includes Turbopack builds in beta, stable Node.js middleware, TypeScript improvements, next lint deprecation, and deprecation warnings for Next.js 16. Highlights for this release include: Turbopack Builds (beta): Production turbopack builds (next build --turbopack) now in beta Node.js Middleware (stable): Node.js runtime support for middleware is now stable TypeScript Improvements: Ty
Reactフォルダ構造の最適解。コンポーネントの数に合わせて選ぶ基本方針 | レバテックラボ（レバテックLAB）
執筆 中川 幸哉 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。新潟県上越市出身。会津大学コンピュータ理工学部卒業後、現在は新潟市に在住。ReactやAndroidを軸に、モバイルアプリ開発やWebサイト制作、Webメディア編集部の業務改善や、プログラミング技術記事の執筆等に携わっている。著書に「たった1日で基本が身に付く! Androidアプリ開発超入門」（技術評論社）、「基礎から学ぶ React Native入門」（翔泳社）他。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「
Pure UI
Pure UI@rauchg|July 13, 2015 (9y ago)689,457 views I recently redesigned and implemented a new version of VideoPress, the WordPress video platform. The process involved, among other things, creating a new UI, ditching the dependency on Flash in favor of HTML5 <video> and introducing new functionality. The particular way in which I implemented it led me to some interesting insights around the growi
How Parcel bundles React Server Components
7/26/2025 Parcel v2.14.0 added support for React Server Components. The release blog post and documentation describe what RSCs are and how to use them with Parcel. This post is a deep dive into the internals: how RSCs integrate with a bundler, what directives like "use client" do internally, how code splitting works and how RSCs improve it, etc. Let's jump in! What does a bundler do? Before we get
【React】フォルダ構成の考え方
はじめに Reactのフォルダ構成は難しい Reactは、フォルダ構成に"意見を持ちません"。 この柔軟性が、フォルダ構成の難しさに繋がっていると思います。 また、フォルダ構成について体系的に書かれている情報が少なく、特に用語の説明がなかったりするため、理解が難しいと感じました。 そこで、フォルダ構成を体系的に理解し、作成できるようになるため、フォルダ構成の考え方についてまとめました。 この記事の目的 フォルダ構成について： 意見を持てるようになる 調べやすくなる そして、リポジトリを見た時に構造化して見えるようになる ことを目的としています。 フォルダ構成の種類 フォルダ構成の種類は、大きく分けて３つに分類できます： type-based feature-based layer-based 「by 〇〇」という呼び方も存在しますが、意味は同じです。 詳細は、〇〇-based以外の呼ばれ方
DifyのReActを用いてナレッジ／記事要約エージェントを作ってみた - Taste of Tech Topics
皆さんこんにちは。バックエンドエンジニアの前田です。 最近は、いよいよ暑さが本気を出してきたので、熱中症対策をしなくては、と考えています。 さて、今回はDifyのv1.0.0で追加されたReActを用いてナレッジ／記事要約エージェントを作成しました。 ナレッジに登録したドキュメントなどをもとに、Web検索もして情報を補足し、文章を要約するエージェントが欲しいと思い、作ってみました。 Difyの環境構築と基本的な使い方については以下の記事を参考にしてみてください。 今回はDifyのv1.6.0を用いて作成しました。 acro-engineer.hatenablog.com 1. DifyにおけるReActとは 2. 今回作成するアプリについて 2.1. 構成 2.2. ナレッジ検索 2.3. エージェントノード 3. 実際に動かしてみる 4. まとめ 1. DifyにおけるReActとは D
2025-07-21のJS: Nuxt 4.0、Next.js 15.4、npmのパッケージメンテナーを狙ったフィッシング
JSer.info #742 - Nuxt 4.0がリリースされました。 Announcing Nuxt 4.0 · Nuxt Blog 新しいプロジェクト構造としてapp/ディレクトリがデフォルトになり、useAsyncDataとuseFetchが同じキーでキャッシュを共有するようになりました。また、TypeScriptの設定ファイルをapp/server/node/shared用にそれぞれ作成し、CLIの改善なども含まれています。 マイグレーションガイドも公開されています。 Upgrade Guide · Get Started with Nuxt v4 Next.js 15.4がリリースされました。 Next.js 15.4 | Next.js Turbopackが全てのIntegration Testを通るようになっていて、次のメジャーアップデートであるNext.js 16でSta
AI Agentのアウトプットに『Next.jsの考え方』を反映するプラクティス
AI Agentの進化は目覚ましく、日々実装の品質も向上しています。しかし、開発者自身に明確な実装イメージがある場合、それをAI Agentに出力させることは難しく、さまざまな工夫を必要とします。Agentに与えるコンテキストやプロンプトを最適化したり、詳細なルールを整備することで精度を高めることができますが、これらには大変な労力を伴います。 筆者がNext.jsアプリケーションを扱う場合、実装イメージは著書『Next.jsの考え方』の内容に沿って生成されるため、「この本をAI Agentに読ませることで、アウトプットの精度を高めることができるのではないか」と考え、様々な検証を行いました。 本稿では検証を通して筆者が得た、AI Agentのアウトプットに『Next.jsの考え方』を反映するプラクティスについて紹介します。 要約 以下の条件を満たすことで、AI Agentのアウトプットに『N
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
react/CHANGELOG.md at main · facebook/react
React 関連の参考になる記事まとめ - Qiita
RSCの時代にReactとフレームワークの境界を探る
