當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

在网页中使用react

發(fā)布時間：2023/12/31 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了在网页中使用react 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

一、使用原生的方式引入

? 完整代碼：

? ?like_button.js

'use strict';const e = React.createElement;class LikeButton extends React.Component {constructor(props) {super(props);this.state = { liked: false };}render() {if (this.state.liked) {return 'You liked this.';}return e('button',{ onClick: () => this.setState({ liked: true }) },'Like');} } const domContainer = document.querySelector('#like_button_container'); ReactDOM.render(e(LikeButton), domContainer);

test_react.html

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>測試react hook</title> </head> <body><div id="like_button_container"></div><script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script><script src="like_button.js"></script> </body> </html>

二、使用?JSX方式

完整代碼：

<!DOCTYPE html> <html><head><meta charset="UTF-8" /><title>Hello World</title><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="https://unpkg.com/@babel/standalone/babel.min.js"></script></head><body><div id="root"></div><script type="text/babel">ReactDOM.render(<h1>Hello, world!</h1>,document.getElementById('root'));</script></body> </html>

總結(jié)

以上是生活随笔為你收集整理的在网页中使用react的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

网页
React