React チュートリアル

React はユーザーインターフェースを構築するための JAVASCRIPT ライブラリです。

React は主に UI の構築に使用され、多くの人は React が MVC の V（ビュー）であると考えています。

React は Facebook の内部プロジェクトとして始まり、Instagram のウェブサイトを構築するために使用され、2013年5月にオープンソース化されました。

React は比較的高い性能を備え、コードのロジックは非常にシンプルで、ますます多くの人が注目し、使い始めています。

React の特徴

  • 1. 宣言的設計− Reactは宣言型パラダイムを採用しており、アプリケーションを簡単に記述できます。

  • 2. 高効率− ReactはDOMをシミュレーションすることにより、DOMとのインタラクションを最大限に減らします。

  • 3. 柔軟性− Reactは既知のライブラリやフレームワークとうまく連携できます。

  • 4.JSX− JSX は JavaScript 構文の拡張です。React 開発では必ずしも JSX を使う必要はありませんが、使用することをお勧めします。

  • 5. コンポーネント− React でコンポーネントを構築することにより、コードの再利用が容易になり、大規模プロジェクトの開発にうまく適用できます。

  • 6. 単方向リアクティブデータフロー− React は単方向リアクティブデータフローを実装しており、重複コードを減らし、これが従来のデータバインディングよりもシンプルである理由です。

本チュートリアルを読む前に知っておくべき知識：

React の学習を始める前に、以下の基礎知識が必要です：

React の最初の例

各章では、オンラインで例を編集し、ボタンをクリックして結果を確認できます。

本チュートリアルでは React のバージョン 18.2.0 を使用しています。公式サイトからhttps://react.dev/最新版をダウンロードできます。

React の例

<div id="example"></div> <script type="text/babel">// 簡単な React コンポーネント function App() { return<h1>Hello, React!</h1>; } const root = ReactDOM.createRoot(document.getElementById("example")); // React コンポーネントを DOM にレンダリング root.render(<App />); </script>

試してみる »

外部スクリプトを導入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" ></script>

この3行のコードは、それぞれ React、ReactDOM、Babel Standalone ライブラリを読み込みます。

  • React はユーザーインターフェースの構築に使用されます。
  • ReactDOM はブラウザ内で React コンポーネントをレンダリングするために使用されます。
  • Babel Standalone はブラウザ内で JSX 構文を即座にコンパイルするために使用されます。

または、create-react-app ツール（次の章で説明します）で作成した React 開発環境を使用します：

例

import React from "react";
import ReactDOM from "react-dom/client";

function Hello(props) {
  return <h1>Hello World!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Hello />);

このときブラウザで開くと、http://localhost:3000/次のように出力されます：

Hello World!

参考資料

その他の拡張