【React】入門ガイド

こちらは、React(v18)の入門ガイドとなっております。

Reactに触れる

Reactの動かし方について

まずは、HTML上でReactを読み込んで動かしてみます。以下はこれから記述するコードの全文です。

<!DOCTYPE html>
<html>
  <head>
    <script src="/libs/react.development.js"></script>
    <script src="/libs/react-dom.development.js"></script>
    <script src="/libs/babel-standalone.js"></script>
  </head>

  <body>
    <div id="app"></div>
    <script type="text/babel">
      const appEl = document.querySelector("#app");
      const root = ReactDOM.createRoot(appEl);
      root.render(<h1>こんにちは</h1>);
    </script>
  </body>
</html>

まずは、必要なscriptタグを読み込みます。
Reactの中ではJSXという構文を用います。これをJavaScriptの構文に置き換えるため、Babelを使用します。

<!DOCTYPE html>
<html>
  <head>
    <script src="/libs/react.development.js"></script>
    <script src="/libs/react-dom.development.js"></script>
    <script src="/libs/babel-standalone.js"></script>
  </head>

  <body>
  </body>
</html>

<body>からはReactの構文を書きます。
まず<div id=”app”></div>と記述し、id付きのdivを用意します。この#appに対し、Reactで書いたコードをどんどん追加していきます。

<!DOCTYPE html>
<html>
  <head>
    <script src="/libs/react.development.js"></script>
    <script src="/libs/react-dom.development.js"></script>
    <script src="/libs/babel-standalone.js"></script>
  </head>

  <body>
    <div id="app"></div>
  </body>
</html>

次に<script>を追加し、その中にコードを追加します。

まずは、const appEl = document.querySelector(“#app”);とし、#appを取得します。
次に、const root = ReactDOM.createRoot(appEl);とし、ReactDOMというライブラリからrootというものを作ります。
そして、root.render();で()の中に記述したものが#appの中に挿入されて表示されるようになります。

<!DOCTYPE html>
<html>
  <head>
    <script src="/libs/react.development.js"></script>
    <script src="/libs/react-dom.development.js"></script>
    <script src="/libs/babel-standalone.js"></script>
  </head>

  <body>
    <div id="app"></div>
    <script>
      const appEl = document.querySelector("#app");
      const root = ReactDOM.createRoot(appEl);
      root.render();
    </script>
  </body>
</html>

試しに、render()の中に「こんにちは」という文字を入れてみます。

root.render("こんにちは");

ブラウザを確認すると、画面に「こんにちは」と出力されているかと思います。では、文字をh1タグで挟んでみるとどうなるでしょう。

root.render(<h1>こんにちは</h1>);

先ほど出力されていた「こんにちは」という文字が消えているはずです。コンソールを確認すると、Uncaught SyntaxError: Unexpected token ‘<‘というエラーが発生しているかと思います。「予期せぬトークン（文字列）が渡ってきました」という感じのエラーです。

root.render(<h1>こんにちは</h1>);という書き方は、JSXというReact独自の書き方です。通常のJavaScriptでこの書き方はしません。

ではどうするのかというと、先ほど読み込んだBabelでJavaScriptのコードに変換して使用します。
<script type=”text/babel”>という風にすることで、先ほどの<h1>のコードがJavaScriptに変換され、正常に出力されるようになります。

  <body>
    <div id="app"></div>
    <script>
      const appEl = document.querySelector("#app");
      const root = ReactDOM.createRoot(appEl);
      root.render(<h1>こんにちは</h1>);
    </script>
  </body>

まずはマウントする先(#app)を指定し、そこからReactのrootというものを作成します。このrootのrenderメソッドを呼ぶと、画面上に出力されるという仕組みになっています。

上記のrootを作成し、renderメソッドを呼ぶという方法は、React(v18)からの推奨の書き方です。

コンポーネントを定義する

コンポーネントはJavaScriptの関数として定義します。

以下のようにコンポーネントはJSXを返します。

function Welcome() {
  return <h1>こんにちは</h1>;
}

また、コンポーネントを呼ぶときは、以下のようにJSXの形式で呼びます。

<Welcome />

先ほど「Reactの動かし方について」で使用したコードに書き足すと、以下のようになります。

<!DOCTYPE html>
<html>
  <head>
    <script src="/libs/react.development.js"></script>
    <script src="/libs/react-dom.development.js"></script>
    <script src="/libs/babel-standalone.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      const appEl = document.querySelector("#app");
      const root = ReactDOM.createRoot(appEl);

      const Example = () => <h1>こんにちは</h1>;
      root.render(<Example />);
    </script>
  </body>
</html>

ちなみに、JSXのコードが複数行に渡る場合は、丸かっこでくくるようにします。

const Example = () => {
  return (
    <div>
      <h1>こんにちは</h1>
    </div>
  );
};
タイトルとURLをコピーしました