チャプター4

React を使い始める

新しく作成したプロジェクトで React を使用するには、unpkg.com という外部ウェブサイトから 2 つの React スクリプトを読み込みます。

react は React のコアライブラリです。
react-dom は、React を DOM と共に使用できるようにする DOM 固有のメソッドを提供します。

index.html

<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script type="text/javascript">
      const app = document.getElementById('app');
      const header = document.createElement('h1');
      const text = 'Develop. Preview. Ship.';
      const headerContent = document.createTextNode(text);
      header.appendChild(headerContent);
      app.appendChild(header);
    </script>
  </body>
</html>

プレーン JavaScript で DOM を直接操作する代わりに、以前に追加した DOM メソッドを削除し、特定の DOM 要素をターゲットにして React コンポーネントを表示するためのルートを作成する ReactDOM.createRoot() メソッドを追加します。次に、React コードを DOM にレンダリングする root.render() メソッドを追加します。

これは、React に対して #app 要素内に <h1> タイトルをレンダリングするように指示します。

index.html

<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script>
      const app = document.getElementById('app');
      const root = ReactDOM.createRoot(app);
      root.render(<h1>Develop. Preview. Ship.</h1>);
    </script>
  </body>
</html>

このコードをブラウザで実行しようとすると、構文エラーが発生します。

ターミナル

Uncaught SyntaxError: expected expression, got '<'

これは、<h1>...</h1> が有効な Javascript ではないためです。このコードは **JSX** です。

JSX とは？

JSX は JavaScript の構文拡張で、UI を使い慣れた *HTML のような* 構文で記述できます。JSX の優れた点は、3 つの JSX ルールに従う以外に、HTML と JavaScript 以外の新しい記号や構文を学ぶ必要がないことです。

ただし、ブラウザは JSX をそのまま理解できないため、JSX コードを通常の JavaScript に変換するには、Babel などの JavaScript コンパイラが必要です。

プロジェクトに Babel を追加する

プロジェクトに Babel を追加するには、次のスクリプトを `index.html` ファイルにコピーして貼り付けます。

index.html

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

さらに、スクリプトタイプを `type=text/jsx` に変更して、Babel にどのコードを変換するかを知らせる必要があります。

index.html

<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- Babel Script -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/jsx">
      const domNode = document.getElementById('app');
      const root = ReactDOM.createRoot(domNode);
      root.render(<h1>Develop. Preview. Ship.</h1>);
    </script>
  </body>
</html>

正しく動作していることを確認するには、ブラウザで HTML ファイルを開きます。

先ほど記述した**宣言型**の React コードを

index.html

<script type="text/jsx">
  const domNode = document.getElementById("app")
  const root = ReactDOM.createRoot(domNode);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

前のセクションで記述した**命令型**の JavaScript コードと比較すると、

index.html

<script type="text/javascript">
  const app = document.getElementById('app');
  const header = document.createElement('h1');
  const text = 'Develop. Preview. Ship.';
  const headerContent = document.createTextNode(text);
  header.appendChild(headerContent);
  app.appendChild(header);
</script>

React を使用することで、反復的なコードを大幅に削減できることがわかります。

そして、これはまさに React が行うことです。React は、代わりにタスクを実行する再利用可能なコードスニペットを含むライブラリです。この場合は UI の更新です。

追加リソース

React が UI をどのように更新するかを正確に知らなくても使い始めることができますが、詳細を知りたい場合は、追加リソースを以下に示します。

UI ツリー

JSX でマークアップを記述する

React ドキュメントの react-dom/server セクション。

React のための必須 JavaScript

JavaScript と React を同時に学ぶことはできますが、JavaScript に精通していると、React を学ぶプロセスが容易になります。

次のセクションでは、JavaScript の観点から React のいくつかのコアコンセプトを紹介します。言及される JavaScript のトピックの概要は次のとおりです。

このコースでは JavaScript について深く掘り下げませんが、最新バージョンの JavaScript に精通しておくことをお勧めします。ただし、まだ JavaScript に習熟していない場合でも、React での構築を始めることをためらわないでください。

React を使い始める

JSX とは？

プロジェクトに Babel を追加する

React のための必須 JavaScript

チャプター完了4