主题
创建一个应用
使用 CDN
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
const { useState, useEffect } = React
const App = () => {
const [count, setCount] = useState(0)
useEffect(() => {
document.title = `${count} times`
}, [count])
const handleClick = () => setCount(count + 1)
return <button onClick={handleClick}>点击了 {count} 次</button>
}
const root = ReactDOM.createRoot(document.getElementById('app'))
root.render(<App />)
</script>
</body>
</html>使用 Vite
json
{
"name": "react-app",
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@vitejs/plugin-react": "^4.0.0",
"vite": "^4.0.0"
}
}html
<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
<script type="module" src="./main.jsx"></script>
</body>
</html>jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
ReactDOM.createRoot(document.getElementById('app')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)jsx
import React, { useEffect, useState } from 'react'
const App = () => {
const [count, setCount] = useState(0)
useEffect(() => {
document.title = `${count} times`
}, [count])
const handleClick = () => setCount(count + 1)
return <button onClick={handleClick}>点击了 {count} 次</button>
}
export default App