React で jsx を使うサンプル

こちらのページを参考にしました。
[正真正銘のReactだけの不純物なしでReact入門](https://sbfl.net/blog/2019/02/20/react-only-tutorial/)

次のようなページを作成しました。
![react_feb12_aa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/c1fc5e42-3560-cd21-bd3f-dc9571106b31.png)

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>React Tutorial</title>
</head>

<body>
    <!-- Reactの描画対象を準備しておく -->
<div id="root"></div>


<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone/babel.min.js"></script>
<script type="text/babel" src="main.jsx" defer></script>
</body>
</html>
```

```jsx:main.jsx
function App() {
 const str_out = <div>皆さん、こんにちは<br />
 今日は、良いお天気です。<br />
 晴れています。<br />
</div>
  return str_out
}

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<App/>)
```

サーバーの起動 (index.html のあるフォルダーで）
>コマンドのインストール
>
>```bash
>sudo npm install -g http-server
>```

```text
$ http-server
Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://192.168.1.6:8080
  http://10.64.227.1:8080
Hit CTRL-C to stop the server
```

ブラウザーで、http://127.0.0.1:8080　にアクセス
冒頭の画面が出てきます。

ブラウザーでなく、http や curl だと次のようになります。

```text
$ http http://127.0.0.1:8080
HTTP/1.1 200 OK
Connection: keep-alive
Date: Sat, 12 Feb 2022 00:37:20 GMT
Keep-Alive: timeout=5
cache-control: max-age=3600
content-length: 612
content-type: text/html; charset=UTF-8
etag: W/"589889-612-2022-02-12T00:29:50.630Z"
last-modified: Sat, 12 Feb 2022 00:29:50 GMT
server: ecstatic-3.3.2

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="no-cache">
<title>React Tutorial</title>
</head>

<body>
    <!-- Reactの描画対象を準備しておく -->
<div id="app"></div>


<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone/babel.min.js"></script>
<script type="text/babel" src="main.jsx" defer></script>
</body>
</html>
```

#もう少し複雑なサンプル#

フォルダー構造

```text
$ tree
.
├── Record.jsx
├── index.html
└── main.jsx
```

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="no-cache">
<title>React Tutorial</title>
</head>

<body>
    <!-- Reactの描画対象を準備しておく -->
<div id="root"></div>


<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone/babel.min.js"></script>
<script type="text/babel" src="Record.jsx" defer></script>
<script type="text/babel" src="main.jsx" defer></script>
</body>
</html>
```

```js:main.jsx
function App() {

 const str_out = <div>
	グリムの昔話<br />
	<blockquote>
     <Record khm="21" title="灰かぶり" />
     <Record khm = "53" title="白雪姫" />
     <Record khm = "15" title="ヘンゼルとグレーテル" />
	</blockquote>
	以上。<br />
</div>
  return str_out
}

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<App/>)
```

```js:Record.jsx
function Record(props) {
  const str_out = <div>
	KHM
	&nbsp;
	{props.khm}
	&nbsp;&nbsp;&nbsp;
	{props.title}
	</div>
  return str_out
}
```

ブラウザーでアクセスした結果
![react_feb12_bb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/7752eca2-bf1e-60cd-1663-fd87c4426b1b.png)

## python のサーバーを使う方法 ##

```bash
python -m http.server
```