index.html
<!DOCTYPE html>
<html>
<body>
<div id = "root"></div>
</body>
<script src="<https://unpkg.com/[email protected]/umd/react.development.js>"></script>
<script src="<https://unpkg.com/[email protected]/umd/react-dom.production.min.js>"></script>
<script src="<https://unpkg.com/[email protected]/prop-types.js>"></script>
<script src="<https://unpkg.com/@babel/standalone/babel.min.js>"></script>
<script type="text/babel">
function Btn({text, fontSize = 14, onClick}) {
return (
<button
onClick={onClick}
style={{
backgroundColor: "coral",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
fontSize
}}>
{text}
</button>
);
}
const MemorizedBtn = React.memo(Btn);
MemorizedBtn.propTypes = {
text: PropTypes.string.isRequired,
fontSize: PropTypes.number,
onClick: PropTypes.func,
}
function App() {
const [value, setValue] = React.useState("click me");
const changeValue = (event) => {
setValue("don't click me");
};
return (
<div>
<MemorizedBtn text={value} fontSize={20} onClick={changeValue}/>
<MemorizedBtn text="nothing" />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>