01React 入門ガイド：基本構造とJSXの使い方

# 1. React について

React は、宣言型で効率的かつ柔軟なユーザーインターフェースを構築するための JavaScript ライブラリです。

React は、Facebook の内部プロジェクトとして始まりました。当時、市場にある JavaScript MVC フレームワーク全てに不満があったため、Instagram のウェブサイトを構築するために独自のシステムを開発しました。その後、このシステムが非常に使いやすいと分かり、2013 年 5 月にオープンソース化されました。

- 日本語公式サイト: https://ja.react.dev/


---

# 2. 基本構造

```html
<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ドキュメント</title>
<!-- React コアパッケージ -->
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <!-- React DOM 関連パッケージ -->
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- ES6 と JSX のサポートを提供 -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<!-- マウントポイントを提供 -->
  <div id="app"></div>

  <script type="text/babel">
    // 1. マウントポイントの要素を取得
var container = document.getElementById("app");
    // 2. ルートノードを作成し、マウントポイントの要素オブジェクトを引数として受け取る
    var root = ReactDOM.createRoot(container);
    // 3. レンダリングメソッドを呼び出してページをレンダリングする。renderの中にはページの内容（HTMLタグまたはコンポーネント）を配置する
root.render(<h1>私はReactです</h1>); // JSX、HTMLタグには引用符は不要です

    // または次のように省略できます：
    // ReactDOM.createRoot(document.getElementById("app")).render(<h1>React</h1>);
  </script>
</body>
</html>
````

---

# 3. JSX について

いわゆる JSX とは、JavaScript 内で引用符なしで HTML を通常どおり記述できるようにするものです。

```jsx
const element = <h1>Hello, world!</h1>;
```

* JSX を使用すると、UI 構造を HTML に似た形で記述できますが、実際には JavaScript オブジェクトや関数呼び出しにコンパイルされます。
* この JSX は次の JavaScript にコンパイルされます：

```js
const element = React.createElement('h1', null, 'Hello, world!');
```

このような見慣れないタグ構文は、文字列でもHTMLでもありません。これはJSXと呼ばれ、JavaScriptの構文拡張です。Reactでは、ユーザーインターフェースを記述するためにJSXを使用することをお勧めします。

---

## JSX での変数挿入

JSX で変数を記述したい場合、`{}` を使用して変数を挿入できます。
`{}` は JavaScript の実行環境を提供するもので、中括弧の中には任意の JS 式（演算子で接続されたもの）を記述できますが、文（宣言文、if、for など）は記述できません。

---

## 注意事項

1. **最も外側には一つのルート要素しか置けません**

```jsx
let ele = (
<div>
    <p className="box">aaaa</p>
    <h1>こんにちは</h1>
  </div>
);
```

2. **JSX では `class` を `className` に変更する**

```jsx
let ele = (
  <div className="box">
    <p>123</p>
    <p>456</p>
</div>
);
```

3. **JSX では `style` はオブジェクト形式で記述する必要があります**

```jsx
let txt = "Hello World!";
let a = "タイトル";

let ele = (
<div className={a} style={{ color: "red" }}>
    <h1>{txt}</h1>
  </div>
);

let cssStyle = {
  width: "50px",
  height: "50px",
  color: "yellow",
};

let ele2 = (
  <div className={a} style={cssStyle}>
    <h1>{txt}</h1>
</div>
);

let color = "green";
let ele3 = (
<div className={a} style={{ color: color, width: "200px" }}>
    <h1>{txt}</h1>
  </div>
);
```

4. **スタイル内の複数の単語で構成される属性は、ハイフンではなくキャメルケースを使用してください**

```jsx
let ele = (
<div className={a} style={{ color: color, width: "200px", marginLeft: "50px" }}>
    <h1>{txt}</h1>
    <a href={url}>React</a>
  </div>
);
```

5. **スタイルで数字が使われている場合、単位は省略可能**

```jsx
let ele = (
  <div className={a} style={{ color: color, width: 200, marginLeft: 50 }}>
    <h1>{txt}</h1>
    <a href={url}>React</a>
</div>
);
```

6. **JSX 内のタグ配列は自動的に展開されます**

```jsx
let arr = [<h1>111</h1>, <h1>222</h1>];

class Welcome extends React.Component {
  render() {
return (
      <div>
        {arr}
      </div>
);
  }
}
```