在 HTML 页面中使用 React 与 Ant Design
·
5 min read
一. 简要概述
我们知道开发react应用需要开发环境，npm安装依赖等一系列步骤，如果想省略这些步骤，直接上手react应用，本文可以简单尝试一下，只需要一个文本编辑器即可，不需要其他任何环境。
假如你想快速体验 react、快速体验 antd，你可以尝试一下，但是不适合生产环境、重度应用开发。
二. 实践操作
快速上手react
你只需要在 html 中引入相应的依赖即可，babel-standalone 用于翻译 react 代码，然后直接使用浏览器打开 index.html 文件看效果。
- index.html
<!DOCTYPE html>
<html>
<head>
<!-- react 依赖 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<!-- babel 翻译 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.22.5/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" data-plugins="transform-modules-umd">
const myClick = (e) => {
console.log(e)
}
const MyButton = () => {
return <button onClick={myClick}>I'm a button</button>
}
const MyApp = () => {
return (
<div style={{ "text-align": 'center' }}>
<MyButton />
</div>
)
}
const container = document.getElementById('root')
const root = ReactDOM.createRoot(container)
root.render(<MyApp />)
</script>
</body>
</html>快速上手antd
注意依赖的引入顺序严格按照下面的顺序引入。
- index.html
<!DOCTYPE html>
<html>
<head>
<!-- react 依赖 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<!-- antd 组件库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.8/dayjs.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/antd/5.6.1/reset.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/5.6.1/antd.min.js"></script>
<!-- babel 翻译 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.22.5/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" data-plugins="transform-modules-umd">
import { Button, Modal, DatePicker } from 'antd'
const onChange = (date, dateString) => {
console.log(date, dateString)
}
const MyApp = () => {
return (
<div style={{ 'text-align': 'center' }}>
<DatePicker onChange={onChange} />
</div>
)
}
const container = document.getElementById('root')
const root = ReactDOM.createRoot(container)
root.render(<MyApp />)
</script>
</body>
</html>独立的 js 文件
你也可以在单独的 js 文件编写 react 代码，新建一个 index.js 文件，把 js 部分放到里面，index.html 文件中用 src 的方式引入。注意：由于要读取 js 文件，所以有跨域的问题，你需要一个 web 服务器存放 这两个文件，否则会报错的。
- index.js
import { Button, Modal, DatePicker } from 'antd'
const onChange = (date, dateString) => {
console.log(date, dateString)
}
const MyApp = () => {
return (
<div style={{ 'text-align': 'center' }}>
<DatePicker onChange={onChange} />
</div>
)
}
const container = document.getElementById('root')
const root = ReactDOM.createRoot(container)
root.render(<MyApp />)- index.html
<!DOCTYPE html>
<html>
<head>
<!-- react 依赖 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<!-- antd 组件库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.8/dayjs.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/antd/5.6.1/reset.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/5.6.1/antd.min.js"></script>
<!-- babel 翻译 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.22.5/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" src="./index.js" data-plugins="transform-modules-umd"></script>
</body>
</html>我使用简单安装一个 serve 服务器，访问 http://localhost:3000
- console
[yzy@yzym nav]$ npm install -g serve
[yzy@yzym nav]$ ll
total 16
-rw-r--r--@ 1 yzy staff 871 Jun 13 17:16 index.html
-rw-r--r--@ 1 yzy staff 399 Jun 13 17:16 index.js
[yzy@yzym nav]$ serve ./
UPDATE The latest version of `serve` is 14.2.0.
┌───────────────────────────────────────────────────┐
│ │
│ Serving! │
│ │
│ - Local: http://localhost:3000 │
│ - On Your Network: http://192.168.1.129:3000 │
│ │
│ Copied local address to clipboard! │
│ │
└───────────────────────────────────────────────────┘
三. 引入 antd 图标
假如你想使用 antd 提供的 icons图标，还需要映入图标的 js 文件，https://cdnjs.cloudflare.com/ajax/libs/ant-design-icons/5.1.4/index.umd.min.js
<!DOCTYPE html>
<html>
<head>
<!-- react 依赖 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<!-- antd 组件库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.8/dayjs.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/antd/5.6.1/reset.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/5.6.1/antd.min.js"></script>
<!-- antd 组件库 图标 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ant-design-icons/5.1.4/index.umd.min.js"></script>
<!-- babel 翻译 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.22.5/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" data-plugins="transform-modules-umd">
import { Button, Modal, DatePicker } from 'antd'
import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons';
const onChange = (date, dateString) => {
console.log(date, dateString)
}
const MyApp = () => {
return (
<div style={{ 'text-align': 'center' }}>
<DatePicker onChange={onChange} />
<StarOutlined />
<StarFilled />
<StarTwoTone twoToneColor="#139e38" style={{ 'fontSize': 30 }} />
</div>
)
}
const container = document.getElementById('root')
const root = ReactDOM.createRoot(container)
root.render(<MyApp />)
</script>
</body>
</html>