JSとJSXでそれぞれどのようにReactで書くのか試してみました。
JSXとは？
- Javascriptの文法を拡張したもの
- HTMLのタグを値として直接記述できるようにしたもの
ソースの用意
エディタのみで書いていきます。
JSXを使わない書き方
- 6, 7行目でReactを読み込みします。
- 15行目でReactでHTMLを形成しています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<title>React</title>
</head>
<body>
<h1 class="bg-primary text-white display-4">React</h1>
<div class="container mt-3">
<div id="root">wait...</div>
</div>
<script src="./script.js"></script>
</body>
</html>
let dom = document.querySelector('#root')
let element = React.createElement(
'div', {}, [
React.createElement('h2', {}, 'Hello!'),
React.createElement('h4', {className: 'alert alert-primary'}, 'React sample page.'),
React.createElement('ul', {className: 'list-group'}, [
React.createElement('li', {className: 'list-group-item'}, 'First item.'),
React.createElement('li', {className: 'list-group-item'}, 'Second item'),
React.createElement('li', {className: 'list-group-item'}, 'Third item.'),
])
]
)
ReactDOM.render(element, dom)JSXを使った書き方
- 8行目でJSXな書き方をJavascriptの古い仕様に変換してくれるBebelを読み込みます。
- 16行目のtype=”text/babel”指定がないと、コンパイルエラーになるので入れます。
- 19～27行目のようにHTMLで書くことができるのがJSX。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<title>React</title>
</head>
<body>
<h1 class="bg-primary text-white display-4">React</h1>
<div class="container mt-3">
<div id="root">wait...</div>
</div>
<script type="text/babel">
let dom = document.querySelector('#root')
let el = (
<div>
<h2>Hello JSX</h2>
<h4 className='alert alert-primary'>React sample page.</h4>
<ul className='list-group'>
<li className='list-group-item'>First item.</li>
<li className='list-group-item'>Second item.</li>
<li className='list-group-item'>Third item.</li>
</ul>
</div>
)
ReactDOM.render(el, dom)
</script>
</body>
</html>あとがき
JSXはただHTMLが書けるだけではないのですが、また別の記事で記載したいと思います。
コメントを残す