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!

参考資料

その他の拡張機能