React 基礎: React 入門 | Next.js

新しく作成したプロジェクトで 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 メソッドを削除し、ReactDOM.createRoot() メソッドを追加して特定の DOM 要素をターゲットにし、React コンポーネントを表示するためのルートを作成します。次に、root.render() メソッドを追加して、React コードを DOM にレンダリングします。

これにより、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>

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

Terminal

Uncaught SyntaxError: expected expression, got '<'

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

JSX とは？

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

しかし、ブラウザは JSX をそのまま理解できないため、Babel などの JavaScript コンパイラを使用して JSX コードを通常の 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 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 の役割です。再利用可能なコードスニペットを含むライブラリで、この場合は 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 の基礎

On this page