1.直接添加到网站的方式
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<h2>Add React in One Minute</h2>
<p>This page demonstrates using React with no build tooling.</p>
<p>React is loaded as a script tag.</p>
<!-- 我们将把React组件嵌入到这个div中 -->
<div id="like_button_container"></div>
<!-- 加载 React -->
<!-- 注意: 部署时，将 "development.js" 替换为压缩过以后的 "production.min.js" -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- 加载我们的 React 组件 -->
<script src="like_button.js"></script>
</body>
</html>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);压缩 like_button.js 代码
确保计算机已安装Node.js，然后在项目文件夹下运行如下命令：
npm init -y
npm install terser
npx terser -c -m -o like_button.min.js -- like_button.js安装 JSX 预处理器(Babel)
以下这两段代码是等价的。
//浏览器原生支持
const e = React.createElement;
// 显示一个 "Like" <button>
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);//JSX
// 显示一个 "Like" <button>
return (
<button onClick={() => this.setState({ liked: true })}>
Like
</button>
);若想支持JSX，需要安装 JSX 预处理器(Babel)。确保计算机已安装Node.js，然后在项目文件夹下运行如下命令：
npm init -y
npm install babel-cli@6 babel-preset-react-app@3以下命令会创建一个名为 src 的文件夹并启动了一个对 JSX 的自动监听器。
//运行 JSX 预处理器
npx babel --watch src --out-dir . --presets react-app/prod2.搭建一个 Vite 项目的方式
原创文章，作者：huoxiaoqiang，如若转载，请注明出处：https://www.huoxiaoqiang.com/javascript/react/9702.html
微信扫一扫 
支付宝扫一扫