コンポーネントから
ユーザインターフェースを作る
React ではユーザインターフェースを、コンポーネントと呼ばれる部品を使って構築できます。、、といった React コンポーネントを書いていきましょう。そしてそれらを組み合わせて画面やページやアプリの全体を組み立てましょう。
たとえ独りで開発していても、無数の開発者と共同開発をしている時でも、React の開発体験は同じです。個人、チーム、大規模な組織によって書かれさまざまなコンポーネントを、シームレスに組み合わせながら開発できる。それが React の設計理念です。
マークアップとコードから
コンポーネントを作る
React のコンポーネントは単なる JavaScript の関数です。条件によってコンテンツの表示を変えたければ 文を使いましょう！リストを表示したいなら配列の を使いましょう！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 には、研究のアイデアをリリースするまでの高いハードルがあります。実証済みのアプローチだけが React の一部となるのです。
数百万人の
コミュニティに参加しよう
あなたは 1 人ではありません。世界中から毎月 200 万人の開発者が React ドキュメントに訪れています。人々とチームが共感できる技術、それが React なのです。
React は単なるライブラリやアーキテクチャ、あるいはエコシステムという以上の存在です。React とはコミュニティです。ヘルプを求め、チャンスを見つけ、新しい友人と出会える場所です。開発者やデザイナと、初心者やエキスパートと、研究者やアーティストと、教師や学生と、出会える場所です。私たちのバックグラウンドはさまざまですが、React を通じて皆でユーザーインターフェースの創造に取り組んでいるのです。