AdSense

網頁

2021/7/19

React 我的第一支React - Hello World

我的第一支React程式,hello world。


在任意目錄建立一個HTML檔,例如index.html並貼上以下內容。在<head>區引入React、ReactDOMBabel 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>


沒有留言:

AdSense