More than 1 year has passed since last update.

jsx ファイルをプリコンパイルする方法

Last updated at 2022-03-03Posted at 2022-03-03

こちらで使った jsx ファイルをプリコンパイルします。
React で jsx を使うサンプル (その 3)

コマンドのインストール

sudo npm install -g react-tools

fetch_test.jsx を fetch_test.js にして src に入れます。

ツリー構造

$ tree
.
└── src
    └── fetch_test.js

変換

$ jsx --harmony src/ build/
built Module("fetch_test")
["fetch_test"]

変換後のツリー構造

$ tree
.
├── build
│   └── fetch_test.js
└── src
    └── fetch_test.js

変換前のファイル

src/fetch_test.js

// -----------------------------------------------------------------------
//
//	fetch_test.jsx
//
//					Mar/03/2022
// -----------------------------------------------------------------------
const getCities = async() => {
//	const url = 'http://localhost/tmp/json/tochigi.json'
	const url = './tochigi.json'
	const response = await fetch(url)

	let text = await response.text()

//	console.log(text)
	const dict_aa = JSON.parse(text)

const Example = () =>
	<table id='table_aa'>
	<thead>
	<tr><th>key</th>
	<th>name</th>
	<th>population</th>
	<th>date_mod</th>
	</tr>
	</thead>
	<tbody>
	{
	Object.entries(dict_aa)
	.map( ([key, value]) =>
	<tr key={key}><td>{key}</td>
		<td>{value["name"]}</td>
		<td>{value["population"]}</td>
		<td>{value["date_mod"]}</td>
		</tr> )
  	}
	</tbody></table>

	ReactDOM.render(<Example />, document.getElementById('root'));

}

// -----------------------------------------------------------------------
console.log("*** start ***")


getCities()

console.log("*** end ***")
// -----------------------------------------------------------------------

変換後のファイル

build/fetch_test.js

// -----------------------------------------------------------------------
//
//	fetch_test.jsx
//
//					Mar/03/2022
// -----------------------------------------------------------------------
const getCities = function()  {
//	const url = 'http://localhost/tmp/json/tochigi.json'
	const url = './tochigi.json'
	const response = await fetch(url)

	let text = await response.text()

//	console.log(text)
	const dict_aa = JSON.parse(text)

const Example = function() 
	{return React.createElement("table", {id: "table_aa"}, 
	React.createElement("thead", null, 
	React.createElement("tr", null, React.createElement("th", null, "key"), 
	React.createElement("th", null, "name"), 
	React.createElement("th", null, "population"), 
	React.createElement("th", null, "date_mod")
	)
	), 
	React.createElement("tbody", null, 
	
	Object.entries(dict_aa)
	.map( function($__0 ) 
	{var key=$__0[0],value=$__0[1];return React.createElement("tr", {key: key}, React.createElement("td", null, key), 
		React.createElement("td", null, value["name"]), 
		React.createElement("td", null, value["population"]), 
		React.createElement("td", null, value["date_mod"])
		);})
  	
	));}

	ReactDOM.render(React.createElement(Example, null), document.getElementById('root'));

}

// -----------------------------------------------------------------------
console.log("*** start ***")


getCities()

console.log("*** end ***")
// -----------------------------------------------------------------------

このままだと次のエラーが出ます。

Uncaught SyntaxError: await is only valid in async functions
 and the top level bodies of modules

そこで次のように編集します。

fetch_test.js

const getCities = async function()  {
（省略）

index.html は次のようにします。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>React Elements</title>
</head>
<body>
<div id="root"></div>
<br />
Mar/03/2022<br />
<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="fetch_test.js"></script>
</body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up