コンポーネントからユーザーインターフェースを作成する
Reactでは、コンポーネントと呼ばれる個々のパーツからユーザーインターフェースを構築できます。次のような独自のReactコンポーネントを作成します。 サムネイル, いいねボタン、そして 動画。次に、それらを組み合わせて、画面全体、ページ、およびアプリにします。
一人で作業する場合でも、何千人もの他の開発者と作業する場合でも、Reactの使用感は同じです。独立した人々、チーム、組織によって書かれたコンポーネントをシームレスに組み合わせることができるように設計されています。
コードとマークアップでコンポーネントを作成する
ReactコンポーネントはJavaScript関数です。コンテンツを条件付きで表示したいですか？if文を使用します。リストを表示しますか？配列のmap()を試してください。Reactを学ぶことはプログラミングを学ぶことです。
このマークアップ構文はJSXと呼ばれます。これはReactによって普及したJavaScriptの構文拡張です。JSXマークアップを関連するレンダリングロジックの近くに置くことで、Reactコンポーネントの作成、保守、削除が容易になります。
必要な場所にインタラクティビティを追加する
Reactコンポーネントはデータを受け取り、画面に表示されるものを返します。ユーザーが入力するときのように、インタラクションに応じて新しいデータを渡すことができます。Reactは、新しいデータに合わせて画面を更新します。
ページ全体をReactで構築する必要はありません。既存のHTMLページにReactを追加し、そのページの任意の場所にインタラクティブなReactコンポーネントをレンダリングします。
フルスタックになる
フレームワークを使用する
Reactはライブラリです。コンポーネントをまとめることができますが、ルーティングやデータフェッチの方法については規定していません。Reactでアプリ全体を構築するには、Next.jsのようなフルスタックReactフレームワークをお勧めします。または 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個の動画
Reactはアーキテクチャでもあります。Reactを実装するフレームワークでは、サーバー上、またはビルド中に実行される非同期コンポーネントでデータを取得できます。ファイルやデータベースからデータを読み込み、インタラクティブなコンポーネントに渡すことができます。
すべてのプラットフォームから最高のものを利用する
人々がウェブアプリやネイティブアプリを好む理由はそれぞれ異なります。Reactでは、同じスキルを使ってウェブアプリとネイティブアプリの両方を構築できます。各プラットフォームのユニークな強みを生かし、すべてのプラットフォームでインターフェースが適切に感じられるようにします。
ウェブに忠実に
人々はウェブアプリのページが速く読み込まれることを期待します。サーバー側では、Reactを使用すると、データの取得中であってもHTMLのストリーミングを開始し、JavaScriptコードが読み込まれる前に残りのコンテンツを段階的に埋めることができます。クライアント側では、Reactは標準のWeb APIを使用して、レンダリング中でもUIの応答性を維持できます。
真のネイティブへ
人々はネイティブアプリがプラットフォームの見た目や操作感に似ていることを期待します。 React Native および Expo を使用すると、Android、iOSなどのReactでアプリを構築できます。これらのUIは 実際に ネイティブであるため、ネイティブに見え、ネイティブのように感じます。Webビューではありません。Reactコンポーネントは、プラットフォームによって提供される実際のAndroidおよびiOSビューをレンダリングします。
Reactを使用すると、Webとネイティブの両方の開発者になることができます。あなたのチームは、ユーザーエクスペリエンスを犠牲にすることなく、多くのプラットフォームに配信できます。あなたの組織は、プラットフォームのサイロを橋渡しし、機能全体をエンドツーエンドで所有するチームを編成できます。
未来の準備ができたらアップグレード
Reactは注意深く変更に対応します。すべてのReactコミットは、10億人以上のユーザーがいるビジネスに不可欠な環境でテストされています。Metaの10万を超えるReactコンポーネントが、すべての移行戦略の検証に役立っています。
Reactチームは常にReactを改善する方法を研究しています。一部の研究は成果を上げるまでに数年かかることがあります。Reactは、研究アイデアを本番環境に導入するためのハードルが高く設定されています。実証済みの方法のみがReactの一部になります。
コミュニティに参加する
何百万人もの
あなたは一人ではありません。世界中の200万人の開発者が毎月Reactのドキュメントにアクセスしています。Reactは、人々やチームが合意できるものです。
これが、Reactが単なるライブラリ、アーキテクチャ、さらにはエコシステム以上の存在である理由です。Reactはコミュニティです。そこでは、助けを求めたり、機会を見つけたり、新しい友達に出会ったりできます。開発者とデザイナー、初心者と専門家、研究者とアーティスト、教師と学生の両方に出会うでしょう。私たちのバックグラウンドは大きく異なるかもしれませんが、Reactを使用することで、私たち全員が一緒にユーザーインターフェースを作成できます。
