Reactのドキュメントを読み始めました。
自前のテキストエディタを使いたい場合は、この HTML ファイルをダウンロード・編集して、ブラウザを使ってからローカルファイルシステムから開くことができます。ランタイムでの遅いコード変換が行われる為、簡単なデモに留めておくことをおすすめします。
とあるので、「このHTMLファイル」を開いてみると下記のようになっていました。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<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>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
<!--
Note: this page is a great way to try React but it's not suitable for production.
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
Read this section for a production-ready setup with JSX:
https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project
In a larger project, you can use an integrated toolchain that includes JSX instead:
https://reactjs.org/docs/create-a-new-react-app.html
You can also use React without JSX, in which case you can remove Babel:
https://reactjs.org/docs/react-without-jsx.html
-->
</body>
</html>
ここでJSXについて知りたいと思い下記を読みました。
構文についての引用:
以下の変数宣言を考えてみましょう:
const element = <h1>Hello, world!</h1>;
このおかしなタグ構文は文字列でも HTML でもありません。これは JSX と呼ばれる JavaScript の構文の拡張です。
JSXについての引用:
The quickest way to try JSX in your project is to add this tag to your page:
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
Now you can use JSX in any tag by adding type="text/babel" attribute to it. Here is an example HTML file with JSX that you can download and play with.This approach is fine for learning and creating simple demos. However, it makes your website slow and isn’t suitable for production. When you’re ready to move forward, remove this new tag and the type="text/babel" attributes you’ve added. Instead, in the next section you will set up a JSX preprocessor to convert all your tags automatically.
なるほど、「babel.min.js
と text/babel
を使うことでいい感じに動くんだな(ただし本番では使わない)」と理解したのですが....
下記のように babel.min.js
を剥がして、JSXだけ書いてもエラーになりません。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
<h1>aaaa</h1>
</script>
</body>
</html>
加えて、下記のように
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
console.log("AA
</script>
</body>
</html>
と明らかに console.log の構文をミスってみてもエラーになりませんでした。
text/babel
を剥がすとどちらのパターンもエラーになりました。
text/babel
とはいったい何でしょうか?
(babelはローカル環境でコンパイルして使ったことしかなかったのでこれは不思議です)
Chromeで試しています。