React
3
Вклад в тег
function App() {
const [number1, setNumber1] = useState(0);
const [number2, setNumber2] = useState(0);
const [total, setTotal] = useState(number1 + number2);
function calculateTotal() {
setTotal(number1 + number2);
}
return (
<div className="App">
<h1>Adding Two Numbers</h1>
<div className="number-inputs">
<input
type="number"
value={number1}
onChange={e => setNumber1(+e.target.value)}
placeholder="0"
/>
<input
type="number"
value={number2}
onChange={e => setNumber2(+e.target.value)}
placeholder="0"
/>
</div>
<button onClick={calculateTotal}>Add Them!</button>
<h2>{total}</h2>
</div>
);
}
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
render(
<Wrapper>
<Title>
Hello World!
</Title>
</Wrapper>
);
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
const useStyles = makeStyles({
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'white',
height: 48,
padding: '0 30px',
},
});
export default function Hook() {
const classes = useStyles();
return <Button className={classes.root}>Hook</Button>;
}