我的第一支React程式，hello world。
在任意目錄建立一個HTML檔，例如index.html並貼上以下內容。在<head>區引入React、ReactDOM及Babel library的CDN連結。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<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>Hello</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel"><!-- 注意是type="text/babel" -->
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
)
</script>
</body>
</html>
在<script type="text/babel>中撰寫JavaScript程式碼，使用ReactDOM.render()把<h1>Hello, world</h1> render到<div id="root> element。
在瀏覽開啟index.html顯示結果如下。
render後的html內容如下。
<html>
<head>
...
</head>
<body>
<div id="root"><h1>Hello, world!</h1></div>
...
</body>
</html>
如果把Babel的CDN拿掉則畫面無法render出Hello, world字樣，這是因為在<script type="text/babel">中撰寫的程式碼其實是JSX，是JavaScript語法擴充，而瀏覽器無法解析JSX，因此需要Babel來幫助瀏覽器"翻譯"為JavaScript。
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
)
React也能不用JSX語法嵌入html，只是寫起來不直觀且麻煩。例如下面未使用JSX語法及Babel，效果同上。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<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>Hello</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript"><!-- 注意是type="text/javascript" -->
ReactDOM.render(
React.createElement("h1", null, "Hello, world!"),
document.getElementById('root'),
console.log("hello world")
)
</script>
</body>
</html>
沒有留言:
張貼留言