はてなブックマーク

<div> などすべての組み込みブラウザコンポーネントは、いくつかの共通の props とイベントをサポートしています。 さらに例を見る props これらの特別な React の props はすべての組み込みコンポーネントでサポートされています。 children: React ノード（要素、文字列、数値、ポータル、null や undefined やブーリアンのような空ノード、あるいは他の React ノードの配列）。コンポーネントの内容を指定します。JSX を使用する場合、通常は <div><span /></div> のようにタグをネストすることで props として暗黙的に children を指定します。 dangerouslySetInnerHTML: { __html: '<p>some html</p>' } という形式の、内部に生の HTML 文字列を含んだオブジェク

はじめに React Compiler の機能について知り、React アプリケーションを自動的に最適化して useMemo、useCallback、React.memo による手動メモ化を不要にしてくれる仕組みについて理解しましょう。 インストール React Compiler のインストールを行い、ビルドツールと組み合わせるための設定方法を学びましょう。 段階的な導入 全面的に有効にする準備がまだできていない場合に、既存のコードベースで React Compiler を段階的に導入する戦略を学びましょう。 デバッグとトラブルシューティング 期待通りに動作しない場合はデバッグガイドを参考に、コンパイラエラーとランタイムエラーの違いやよくある失敗パターンを理解しつつ、体系的なデバッグ作業を行いましょう。 設定とリファレンス 詳細な設定オプションと API リファレンスについては以下をご覧く

React 19 に追加された改善にはいくつかの破壊的変更が必要ですが、アップグレードをできるだけスムーズに行えるよう努力しているため、ほとんどのアプリには影響が出ないことを予想しています。 React 18.3 も公開されました React 19 へのアップグレードを容易にするため、react@18.3 リリースを公開しました。これは 18.2 とほぼ同一ですが、非推奨化 API や React 19 に向けて必要なその他の変更に対する警告が追加されています。 React 19 にアップグレードする前に、問題点を見つけるためにまず React 18.3 にアップグレードすることをお勧めします。 18.3 における変更点については、リリースノートをご覧ください。 この投稿では、React 19 にアップグレードする手順をご案内します。 インストール Codemod 破壊的変更 新たな非推奨

様々な概念を表現する方法がプログラミング言語によってそれぞれ異なるように、React にも、理解しやすい方法でパターンを表現し高品質なアプリケーションを産み出すための慣用的な記法、ないしルールが存在します。 このセクションでは、自然な React コードを書くために従うべきルールを説明します。自然な React コードを書くことで、安全で整理されており、組み合わせ可能なアプリケーションを作成することができます。以下に挙げる特性により、アプリは変更に対して頑健になり、他の開発者やライブラリやツールと連携しやすくなります。 以下のルールは React のルールとして知られています。これらを守っていないならアプリにバグがある可能性が高い、という意味で、これらは単なるガイドラインではなくルールです。またこれらを守らない場合、あなたのコードは不自然で、理解や推測が難しいものになるでしょう。 Reac

React Labs 記事では、現在活発に研究・開発が行われているプロジェクトについて述べていきます。前回のアップデートから大きな進展がありましたので、我々が学んだことを共有していきます。 5 月 15 日・16 日にネバダ州ヘンダーソンで React Conf 2024 が開催されます！ 現地で React Conf に参加を希望される方は、2 月 28 日までにチケットの抽選に参加してください。 チケット、無料ストリーミング、スポンサーシップなどの詳細については、React Conf のウェブサイトをご覧ください。 React Compiler React Compiler は、もはや研究プロジェクトではありません。このコンパイラは現在 instagram.com の本番環境で動作しています。Meta の他のプラットフォームにもコンパイラを展開するための作業や、オープンソースとしての初

React は、ユーザインターフェース（UI）を表示するための JavaScript ライブラリです。UI はボタンやテキスト、画像といった小さな要素から構成されています。React ではこれらを、ネストして再利用できるコンポーネントにまとめることができます。ウェブサイトであれ携帯電話アプリであれ、画面上のすべてのものはコンポーネントに分解することができます。この章では、React コンポーネントを作成し、カスタマイズし、条件付きで表示する方法について学びます。 初めてのコンポーネント React アプリケーションはコンポーネントと呼ばれる独立した UI のパーツで構成されています。React コンポーネントとは、マークアップを添えることができる JavaScript 関数です。コンポーネントは、ボタンのような小さなものであることもあれば、ページ全体といった大きなものであることもあります。

React を使って新しいアプリやウェブサイトを作成したい場合は、フレームワークを使って始めることをおすすめします。 あなたのアプリが既存のフレームワークではうまく対応できない制約を有している場合や、自分自身でフレームワークを構築したい場合、または React アプリの基本を学びたい場合は、React アプリをゼロから構築することも可能です。 フルスタックフレームワーク これらの推奨フレームワークは、アプリを本番環境でデプロイしスケールするために必要な、すべての機能をサポートしています。最新の React 機能を統合し、React のアーキテクチャを活用しています。 フルスタックフレームワークは必ずしもサーバを必要としない このページのすべてのフレームワークは、クライアントサイドレンダリング (client-side rendering; CSR)、シングルページアプリケーション (sin

コンポーネントは、画面上に表示される前に React によってレンダーされる必要があります。このプロセスが踏む段階を理解すると、コードがどのように実行されるのか考える際や、コードの振る舞いを説明する際に役立ちます。 このページで学ぶこと React での「レンダー」の意味 いつ、なぜ React はコンポーネントをレンダーするのか 画面上にコンポーネントが表示されるステップ レンダーしたからといって DOM が更新されるとは限らない理由 コンポーネントが料理人として厨房に立ち、食材を調理して美味しい料理を作っている様子をイメージしてみてください。このシナリオにおいて React はウェイターです。お客様の注文を伝えて、できた料理をお客様に渡します。この UI の「注文」と「提供」のプロセスは、次の 3 つのステップからなります： レンダーのトリガ（お客様の注文を厨房に伝える） コンポーネン

React フックとは異なり、use は if のようなループや条件文内でも呼び出すことができます。ただし React フックと同様に、use を呼び出す関数はコンポーネントまたはフック内でなければなりません。 プロミスを引数にして呼び出した場合、use API は Suspense やエラーバウンダリ (error boundary) と協調して動作します。use を呼び出すコンポーネントは、use に渡されたプロミスが保留中 (pending) である間、サスペンド (suspend) します。use を呼び出すコンポーネントがサスペンスバウンダリでラップされている場合、フォールバックが表示されます。プロミスが解決 (resolve) された時点で、サスペンスフォールバックは、use API から返されたデータを使用してレンダーされたコンポーネントの内容に置き換わります。use に渡さ

一部のコンポーネントは外部システムと同期を行う必要があります。例えば、React の state に基づいて非 React 製コンポーネントを制御したり、サーバとの接続を確立したり、コンポーネントが画面に表示されたときに分析用のログを送信したりしたいかもしれません。エフェクト (Effect) を使うことで、レンダー後にコードを実行して、React 外のシステムとコンポーネントを同期させることができます。 このページで学ぶこと エフェクトとは何か エフェクトとイベントの違い コンポーネントでエフェクトを宣言する方法 不要なエフェクト再実行をスキップする方法 開発中にエフェクトが 2 回実行される理由と対処法 エフェクトとは何であり、イベントとどう異なるのか エフェクトについて説明する前に、React コンポーネント内の 2 種類のロジックについて理解しておく必要があります。 レンダーコード

このチュートリアルは、実践しながら学ぶことを好む方や、今すぐ何か具体的に動くものを作ってみたいと考えている方向けに設計されています。一歩ずつ概念を学びたい場合は、UI の記述から始めてください。 このチュートリアルはいくつかのセクションに分かれています。 チュートリアルのセットアップは、以下のチュートリアルを進めていく出発点です。 概要では、React の基礎であるコンポーネント、props、および state を学びます。 ゲームを完成させるでは、React 開発における最も一般的な手法を学びます。 タイムトラベルの追加では、React の独自の強みに関する深い洞察を得ることができます。 チュートリアルで作成するもの このチュートリアルでは、React を使ってインタラクティブな三目並べゲームを作成します。 完成したときにどのような見た目になるか、以下で確認できます。 import {

エフェクトは React のパラダイムからの避難ハッチです。React の外に「踏み出して」、非 React ウィジェット、ネットワーク、またはブラウザ DOM などの外部システムと同期させることができるものです。外部システムが関与していない場合（例えば、props や state の変更に合わせてコンポーネントの state を更新したい場合）、エフェクトは必要ありません。不要なエフェクトを削除することで、コードが読みやすくなり、実行速度が向上し、エラーが発生しにくくなります。 このページで学ぶこと コンポーネントから不要なエフェクトを削除する理由と方法 エフェクトを使わずに高価な計算をキャッシュする方法 エフェクトを使わずにコンポーネントの state をリセットおよび調整する方法 イベントハンドラ間でロジックを共有する方法 イベントハンドラに移動すべきロジック 親コンポーネントに変更

本日、React とそのドキュメントの新しいホームとなる react.dev の立ち上げを発表することができ、大変うれしく思います。この記事では、新しいサイトの見どころをご紹介します。 tl;dr 新しい React サイト (react.dev) では、関数コンポーネントとフックを用いて、モダンな React を学べます。 図解、イラスト、チャレンジ問題、そして 600 以上の新しいインタラクティブなサンプルが含まれています。 これまでの React ドキュメントサイトは、legacy.reactjs.org に移転しました。 新しいサイト、新しいドメイン、新しいホームページ まずは少々事務的なところから。 新しいドキュメントの立ち上げを祝うために、そして何よりも、古いコンテンツと新しいコンテンツを明確に分離するために、より短い react.dev ドメインに移行しました。古い reac

React ドキュメントへようこそ！ このページでは、日々の開発で使用する React のコンセプトのうち 80％ の部分を紹介します。 このページで学ぶこと コンポーネントの作成とネスト マークアップとスタイルの追加 データの表示 条件分岐とリストのレンダー イベントへの応答と画面の更新 コンポーネント間でのデータの共有 コンポーネントの作成とネスト React アプリはコンポーネントで構成されています。コンポーネントとは、独自のロジックと外見を持つ UI（ユーザインターフェース）の部品のことです。コンポーネントは、ボタンのような小さなものである場合も、ページ全体を表す大きなものである場合もあります。 React におけるコンポーネントとは、マークアップを返す JavaScript 関数です。