先日Qiitaでみた下記の記事をみてフロントエンドエンジニアになりたい欲がより強くなり、VScode上でhtmlとscssとjsを用意してブラウザに表示させようと思ったら、少しつまずき、思いがけずCreateReactAppに感謝しました。その時の記録を残しておきます。
babelに感謝
htmlを作成し、下記のようにscriptタグでreactとreact-domを読み込み、type属性にtext/javascriptを指定したscriptタグ用意し、その中に上記記事の1選目のコードをcodepenからコピペしてはりつけるとエラーが出て早速つまずきました。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="./style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
//ここにcodepenのコードをコピペ 長いので省略
</script>
</body>
</html>
htmlを表示させているブラウザのコンソールにはUncaught SyntaxError: Unexpected token '<'とエラーがでている。どの行にエラーが出ているか確認すると、JSXを書き恥じた部分の行を示している。これは明らかにJSXが悪さをしているとにらみ、ぐぐるとJSXを使うにはbabelが必要という初歩的な事実を忘れていたことに気づきました。
だって、いっつも、Create React Appでやりよったもん....と伊予弁で本音がポロリしました。
babelにもCreate React Appにも感謝しました。
headタグ内に、下記のコードを追加しbabelを読み込み、
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
text/javascriptだったところを下記のように、text/babelに書き換えると、
<script type="text/babel">
下記のように正しく表示されました。
ちなみに、JSX
ReactでUIを作成する時に多用されているJSXですが,JSXがなくてもReactでUIを作ることはできます。
JSXでコードを書いているということは、知らず知らずのうちにReact.createElement(component, props, ...children)を呼び出しているのです。babelがJSXで書かれたコードを見て、React.createElementに変換してくれてるんですね。ありがとう。
おわりに
CreateReactAppを開発したFacebookに感謝と同時に、頼り過ぎもだめだなと感じました。
初歩的なことでしたが、誰かの役に立てれば幸いです。
さて、1選目のコードいじってみよう。