HTML、JavaScript は少し触れたことが有る方
私は、HTML、JavaScriptは少し触れたことがある程度ですが、少しでもHTML、JavaScriptの知識があると、Reactの理解度が上がると思います（全体像を把握する程度で問題ないです）
Reactの基礎 今回はhello.htmlを作成し、基本部分を見ていきます。
※私はVs Codeを使用しています。
基本的なHTML まず基本的なhtmlを記述していきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>React</h1>
<div id='root'>ここがReactで変更されます</div>
</body>
</html>
ブラウザで、上記が表示されていればOKです。
Reactを利用する準備 htmlのheadタグに以下を追加
<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>
これは覚える必要ないです。Reactの公式ドキュメント にhtmlのサンプルがあるので、こちらを確認してください。
bodyタグへReactが使用できるようにscriptタグを追加していきます。
【全体】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 追加 -->
<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>
</head>
<body>
<h1>React</h1>
<div id='root'>ここがReactで変更されます</div>
<!-- 追加 -->
<script>
let dom = document.querySelector('#root');
let el = React.createElement(
'p', {}, 'Reactによって変更された内容です。'
)
ReactDOM.render(el, dom);
</script>
</body>
</html>
【追加された部分】
<script>
let dom = document.querySelector('#root');
let el = React.createElement(
'p', {}, 'Reactによって変更された内容です。'
)
ReactDOM.render(el, dom);
</script>
一行ごと見ていきます。
let dom = document.querySelector('#root');
id='root' の情報（<div id='root'>ここがReactで変更されます</div>）を変数domへ代入。
let el = React.createElement(
'p', {}, 'Reactによって変更された内容です。'
)
// 引数の中身
// React.createElement(タグ名, 属性, 中に組み込むもの)
React.createElement 〜の記述順は理解するというより、こういったものだと認識していればOKです。
今回タグ名をpタグにしていますが、h1でも問題ないです。
属性に関しては使用しないので、{} を書くという認識で問題ないです（実際にどう使用するかは調べられていません…）
ReactDOM.render(el, dom);
// 引数の中身
ReactDOM.render(エレメント、DOM);
createElementで作成した情報を、指定したdomに表示させています。
実際に変更されたか確認してみましょう。
JSXを活用 Reactの基礎で、変更したい情報を保存➝新しい情報を作成➝新しい情報を変更したい場所へ返す の流れがありました。
HMTLを学習していたら、「新しい情報を作成」の工程がめんどくさいな…と感じた方は多いのではないでしょうか。
慣れているHTMLのタグを記述できるのがJSXです。
実際の使用方法を見ていきましょう。
※Reactの基礎で使用した「hello.html」を使用
ライブラリを読み込む <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
【全体】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 追加 -->
<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>
<!-- 追加 -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<h1>React</h1>
<div id='root'>ここがReactで変更されます</div>
<script>
let dom = document.querySelector('#root');
let el = React.createElement(
'p', {}, 'Reactによって変更された内容です。'
)
ReactDOM.render(el, dom);
</script>
</body>
</html>
JSXの記述へ変更 <script type="text/babel">
let dom = document.querySelector('#root');
let el = (
<div>
<h2>JXSで変更</h2>
</div>
)
ReactDOM.render(el, dom);
</script>
★ポイント★
書籍では、「Babelというコンパイラによってコンパイラされるようになる」と書かれていますが、正直理解できていませんｗ
ここでは絶対に必要になる呪文として、押さえておけば問題ないです。
<div></div>タグで１つの情報としてまとめないとエラーになります。
何パターンかコードを書いてみて、実際に確認してみると理解が深まります。
// ①<div>タグ無し（エラーにならない）
let el = (
<h2>JXSで変更</h2>
)
// ②<div>タグ無しで、<p>タグを追加（エラーになる）
let el = (
<h2>JXSで変更</h2>
<p>変更できたでしょうか？</p>
)
// ③<div>タグ有り（エラーにならない）
let el = (
<div>
<h2>JXSで変更</h2>
<p>変更できたでしょうか？</p>
</div>
)
②は<h2><p> タグの２つの情報があることでエラーになります。①は<div> タグがなかったとしても、１つの情報だけなのでエラーにはなりません。
<div> タグでまとめることで、１つの情報をとして認識してくれていることが体験できたと思います。
最後に 認識間違いなどがあれば、不明点・改善点がございましたら、ご遠慮なくご指摘ください！
