溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

React的Hello World

發(fā)布時(shí)間：2020-06-14 11:42:54 來源：網(wǎng)絡(luò) 閱讀：277 作者：素顏豬 欄目：開發(fā)技術(shù)

1.React官方網(wǎng)址

https://reactjs.org/

2.React的Hello World實(shí)例

示例代碼：

<!DOCTYPE html>

<html>

<head>

<title></title>

<!--  React 的核心庫文件 -->

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>

<!-- 提供與 操作DOM 相關(guān)的功能庫文件 -->

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<!-- 

Babel可以將ES6語法轉(zhuǎn)為ES5語法

Babel內(nèi)嵌了對(duì)JSX的支持

只在開發(fā)時(shí)學(xué)習(xí)使用，生產(chǎn)服務(wù)器上請(qǐng)甚用

-->

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

</head>

<body>

<!-- 定義了html的div標(biāo)簽且該標(biāo)簽的id為example -->

<div id="example"></div>


<!--

type="text/babel":告訴瀏覽器這是JSX的語法，不是JS

<h2>Hello, world!</h2>:這里是JSX的語法格式

document.getElementById('example')：獲取html的id為example的元素對(duì)象

說明：將h2標(biāo)題添加到id為example的元素中，做為子元素存在，通過運(yùn)行代碼查看源代碼來看到結(jié)果

-->

<script type="text/babel">

ReactDOM.render(

    <h2>Hello, world!</h2>,

    document.getElementById('example')

);

</script>

</body>

</html>

代碼截圖：

React的Hello World

React的Hello World

運(yùn)行截圖：

React的Hello World

右擊查看源碼截圖：

React的Hello World

React的Hello World


向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手