チャプター4

React入門

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

react はReactのコアライブラリです。
react-dom は、DOMでReactを使用できるようにする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は<h1>タイトルを#app要素内にレンダリングするように指示されます。

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の構文拡張であり、使い慣れたHTMLライクな構文でUIを記述できます。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