コンポーネントから
ユーザインターフェースを作成
React ではユーザインターフェースを、コンポーネントと呼ばれる部品を使って構築できます。Thumbnail、LikeButton、Videoといった React コンポーネントを書き、それらを組み合わせて画面やページやアプリの全体を組み立てましょう。
独りで開発していても、数千の開発者と共同開発していても、React の開発体験は同じです。個人、チーム、大規模な組織によって書かれさまざまなコンポーネントを、シームレスに組み合わせながら開発できる。それが React の設計理念です。
マークアップとコードから
コンポーネントを作成
React コンポーネントは単なる JavaScript の関数です。条件によってコンテンツの表示を変えたければ if 文を使いましょう！ リストを表示したいなら配列の map() を使いましょう！ React を学ぶということは、プログラミングを学ぶということなのです。
このマークアップ構文は JSX と呼ばれます。React が普及させた JavaScript の構文拡張です。JSX マークアップは関連するレンダリングロジックのすぐそばに配置できるので、React コンポーネントは簡単に作成、保守、削除ができます。
インタラクティブ機能を
どこでも必要な場所に
React コンポーネントはデータを受け取り、画面に表示するものを返します。入力フィールドへのタイピングなどのユーザ操作によって新しいデータができたら、コンポーネントにそれを渡します。React が新しいデータに基づいて画面を更新します。
ページ全体を React で構築する必要はありません。既存の HTML ページに React を追加すれば、どんな場所にでもインタラクティブな React コンポーネントを表示できます。
フレームワークで
フルスタックな開発を
React はライブラリです。コンポーネントを組み合わせることはできますが、ルーティングやデータフェッチの方法までは指定しません。React でアプリ全体を構築する場合は、Next.js や Remix のようなフルスタックのフレームワークをお勧めします。
confs/[slug].js
import { db } from './database.js';
import { Suspense } from 'react';
async function ConferencePage({ slug }) {
const conf = await db.Confs.find({ slug });
return (
<ConferenceLayout conf={conf}>
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>
</ConferenceLayout>
);
}
async function Talks({ confId }) {
const talks = await db.Talks.findAll({ confId });
const videos = talks.map(talk => talk.video);
return <SearchableVideoList videos={videos} />;
}
19 Videos
React とはアーキテクチャでもあります。フレームワークでは、サーバやビルド時に動作する非同期コンポーネントを使ってデータの取得が可能です。ファイルやデータベースからデータを読み込んで、インタラクティブなコンポーネントに渡しましょう。
あらゆるプラットフォームの
能力を最大限に活用
人々はウェブを愛し、そしてネイティブアプリを愛しています。その理由は様々です。React を使えば、同じスキルを使ってウェブアプリとネイティブアプリの両方を構築できます。各プラットフォームが持つ独自の強みを活かし、どんなプラットフォームにおいても自然なインターフェースを実現します。
ウェブの本質に忠実に
人々はウェブアプリが素早く読み込まれることを期待します。React を使用すれば、サーバ上でデータが取得中でも HTML のストリーミングを開始でき、JavaScript コードが読み込まれる前にコンテンツを段階的にロードすることができます。クライアント側では、React は標準的な Web API を使用して、レンダーの最中でも UI の応答性を保ちます。
真にネイティブな体験を実現
人々はネイティブアプリがそのプラットフォームに見合ったルック＆フィールを持つことを期待します。React Native や Expo を使えば、React で Android、iOS などのアプリを構築できます。ネイティブアプリのように感じるのは、ウェブビューではなく真のネイティブ UI だからです。React コンポーネントは、プラットフォーム固有の、本物の Android や iOS のビューを表示できます。
React を使えば、ウェブ開発者にもネイティブアプリ開発者にもなれるのです。ユーザー体験を犠牲にすることなく、多くのプラットフォームでリリースを行えます。ひとつのプラットフォームに縛られることなく、すべての機能をエンドツーエンドで担当するチームを作れます。
完成した機能だけが
リリースされる
React は開発アプローチの変更に慎重に取り組みます。すべてのコミットは 10 億人以上のユーザによるビジネスクリティカルな環境においてテストされます。Meta にある 10 万以上の React コンポーネントが、すべての移行戦略の検証を支援します。
React チームは、常に React を改善する方法を模索していますが、研究によっては成果が出るまでに何年もかかることもあります。研究のアイデアをリリースするまでの高いハードルを越えた、実証済みのアプローチだけが React の一部となるのです。
数百万人の
コミュニティに参加しよう
あなたは 1 人ではありません。世界中から毎月 200 万人の開発者が React ドキュメントに訪れています。人々とチームが共感できる技術、それが React なのです。
React は単なるライブラリやアーキテクチャ、あるいはエコシステムという以上の存在です。React とはコミュニティです。ヘルプを求め、チャンスを見つけ、新しい友人に会える場所です。開発者やデザイナ、初心者やエキスパート、研究者やアーティスト、教師や学生と出会える場所です。私たちのバックグラウンドはさまざまですが、React を通じて皆でユーザーインターフェースの創造に取り組んでいるのです。