初学者がReactの開発環境を整える

# はじめに
JavaScriptでWebアプリ開発する際のフレームワーク__React__を勉強し始めたので忘れないように記録する。
今回はReactでWeb上で`Hello World!`と表示させる手順ついて記録する。
間違っているところがありましたらご指摘していただけると幸いです。

# 事前準備
[React公式サイト][link-1]
[link-1]:(https://ja.reactjs.org/)

## Chromeの拡張機能
Chromeでreact developer toolsと調べるか下記のURLから拡張機能を追加しておく。
[React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ja)
さらにReact Developer Toolsの拡張機能の設定で`ファイルの URL へのアクセスを許可する`をONにする必要がある。
![スクリーンショット (30).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2001115/1180d0ad-7deb-c268-fd4e-670de4df1111.png)

# 開発
## React読み込み
[公式サイト][link-1]から`Doc`→`Getting Started`→`Web上で試せるオンラインエディタ`の__`このHTMLファイル`__を開きheadタグ内のScriptタグ2つを自身のhtmlファイルのhead内へコピペする。
[公式サイト][link-1]から`Doc`→`既存のウェブサイトにReacrを追加する`→`JSXを手軽に試してみる`のScriptタグを自身のhtmlファイルのhead内へコピペする。
または、下記の3つのコードをコピペする。

```html:react_load
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
```

:::note warn
下記のScriptタグは本番環境では使用しないでください。
:::

```html:react_load
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
```

1番目がReact本体のScriptタグ、2番目がReactの結果をブラウザのDOMに反映させるためのScriptタグ、3番目がJSXなどの
やJavaScriptの新しい文法を使うための`BAbel`というライブラリのScriptタグである。

## 自分のScriptコードを書くための準備
scriptタグはReactの読み込みで出てきた`Babel`を使って変換していくので、type属性を付ける。

::: note warn
ローカルファイルでの開発は自身のscriptを別ファイルにするとエラーになる
:::

```html:my_script
    <script type="text/babel"></script>
```

# Hello World!と表示させる
<details><summary>現在のhtmlファイル内のコード</summary><div>

```html:react_practice
    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="UTF-8">
      <title>React Practice</title>
      <link rel="stylesheet" href="css/styles.css">
      <!-- react読み込み -->
      <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
      <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
      <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>
    <body>
      <script type="text/babel">
      </script>
    </body>
    </html>
```

</div></details>

## Reactを使ってUIを表示させる。
まず、UIを表示させるための領域を生成する。
JavaScriptで部品を判別するために`id`を付け、`id`は`root`とする。

```html:place_create
    <body>
      <!-- UI表示のためのdiv -->
      <div id="root"></div>
      <script type="text/babel">
      </script>
    </body>
    </html>
```

この`div`にReactで作った部品を描画させる。

即時関数で囲いたいのでアロー関数式を記述する。

```html:arrow
    <script type="text/babel">
      (() => {

      })();
    </script>
```

`ReactDOM.render`とし、第一引数に描画したいUIをJSXという記法で書く。

```html:ui_display
    <script type="text/babel">
      (() => {
        ReactDOM.render(
          <h1>Hello World!</h1>,
        );
      })();
    </script>
```

第二引数にはUIをどこに描画するかを指定する。
今回は`id`が`root`の場所に描画する。

```html:ui_display
    <script type="text/babel">
      (() => {
        ReactDOM.render(
          <h1>Hello World!</h1>,
          document.getElementByID('root')
        );
      })();
    </script>
```

<details><summary>現在のhtmlファイル内のコード</summary><div>

```html:react_practice
    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="UTF-8">
      <title>React Practice</title>
      <link rel="stylesheet" href="css/styles.css">
      <!-- react読み込み -->
      <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
      <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
      <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>
    <body>
      <div id="root"></div>
      <script type="text/babel">
        (() => {
          ReactDOM.render(
            <h1>Hello World!</h1>,
            document.getElementByID('root')
        );
        })();
      </script>
    </body>
    </html>
```

</div></details>

ここまでのファイルをWeb上で表示させると`Hello World!`と表示される。
これで開発環境が整えられた。
![スクリーンショット (33).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2001115/5d7d63d5-6982-5d71-82df-0ecb897c8327.png)

# 参考
https://ja.reactjs.org/

https://dotinstall.com/lessons/basic_reactjs