Reactとは？
Reactは、Webおよびネイティブユーザーインターフェースのためのライブラリです。このチュートリアルシリーズでは、Web向けのReactに焦点を当てます。
Reactは主に2つのことを行います。
- HTMLを表示します。
- ユーザーがアプリケーションを操作したときにHTMLを変更します。
Reactでは、コンポーネントは関数であり、JSXを返します。JSXはJavaScript XMLの略です。JSXはJavaScriptの拡張構文であり、JavaScriptコード内にHTMLのようなコードを直接記述できます。
次の例は、"Hello, World!"というテキストを持つh1タグを表示するAppコンポーネントを作成する方法を示しています。
function App() {
return <h1>Hello, World!</h1>;
}Code language: JavaScript (javascript)ReactはAppコンポーネントからJSXを受け取り、それをJavaScriptに変換し、画面にコンポーネントを表示します。この例では、Reactは画面に<h1>タグをレンダリングします。
通常、Reactアプリには、連携して動作する多くのコンポーネントがあります。各コンポーネントは、ユーザーインターフェース（UI）の一部を表示します。
Reactを迅速に学習するには、簡単なアプリケーションから始めて、徐々に実際のプロジェクトに進むことをお勧めします。
セクション1. Reactの始め方
このセクションでは、Reactの仕組みを説明することで、Reactを迅速に開始できるようにします。
- React Hello World – 簡単なReactアプリを作成しましょう。
- JSX – JSXと、ReactアプリケーションでJSX要素を適切に記述する方法について学びます。
- Props – React Propsシステムを使用して、親コンポーネントから子コンポーネントにデータを渡す方法を学びます。
- Key Prop – key propを使用して、Reactアプリでリストを正しくレンダリングする方法を示します。
- 条件付きレンダリング – 条件に基づいてJSX要素をレンダリングする方法を学びます。
- イベント – マウスクリックやフォーム送信などのイベントをReactイベントを使用して処理する方法を説明します。
- ステート – Reactのステートとイベントを使用して、インタラクティブなReactコンポーネントを作成する方法を示します。
セクション2. APIとのインタラクション
このセクションでは、外部APIを使用するReactアプリを作成する方法を示します。
- React API呼び出し – ReactでWikipedia検索アプリを作成する方法を示します。
セクション3. Todoアプリ
このセクションでは、ReactでTodoアプリの3つのバージョンを段階的に作成します。
- React Todoアプリ – React Todoアプリを作成する手順を段階的に学びます。
- API付きReact Todo – データ永続化のためにAPIを使用するTodoアプリを作成します。
- コンテキスト付きReact Todoアプリ – コンテキストを使用して、Reactアプリ全体でステートを共有します。
セクション4. React Hooksの詳細
- useState – useStateフックを使用してコンポーネントにステート変数を追加する方法を学びます。
- useEffect – コンポーネントで副作用関数を実行する方法を説明します。
- useReducer –
useReducerフックを使用して、複数の密接に関連するステートをより効率的に管理する方法を示します。 - useRef –
useRefフックを使用して、DOM要素に直接アクセスし、再レンダリングを引き起こさずにステートを変更する方法を学びます。
このチュートリアルは役に立ちましたか？
