<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>React Example</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root">
</div>
</body>
<script type="text/babel">
//创建一个Counter的组件
function Counter(){
const [count,setCount]=React.useState(0);//使用useState Hook来处处状态
function increment(){
setCount(count+1);//点击加一
}
function decrement(){
setCount(count-1);//点击减一
}
return(
<div>
<h1>Counter:{count}</h1>
<button onClick={increment}>➕</button>
<button onClick={increment}>➖</button>
</div>
);
}
//渲染Counter组件到页面
ReactDOM.render(<Counter/>,document.getElementById('root'));
</script>
</html>
上述基础react加一减一操作