1. like usual, we can stylie React code using css file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="app.css">
<title>Styling React</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone"></script>
<script src="Machine.js" type="text/jsx"></script>
<script src="index.js" type="text/jsx"></script>
</script>
</body>
</html>
2. css code
.Machine{
border: 2px solid black;
background: yellow;
}
.win{
color: teal;
}
.lose{
color:red;
}
3. app component that render Machine.js component.
class App extends React.Component {
render() {
return (
<div>
<h1>Slot Machines!</h1>
<Machine
s1="●"
s2="●"
s3="●"
/>
<Machine
s1="●"
s2="●"
s3="★"
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
4. we can set winning or losing style using conditional statements in JSX.
class Machine extends React.Component {
render() {
const { s1, s2, s3 } = this.props;
const win = (s1 === s2 && s2 === s3);
const colors = { fontSize: '50px', backgroundColor: 'white' };
// 클래스명 다름
// for 사용 금지
// in-line styling 에 camel case 씀
// 클래스명에 조건문 사용도 가능
return (
<div className="Machine">
<label htmlFor="textInput" />
<p style={colors}>
{s1}{s2}{s3}
</p>
<p className={win ? 'win' : 'lose'}>
{win ? 'win' : 'lose'}
</p>
</div>
);
}
}
'react' 카테고리의 다른 글
| React Events! (0) | 2020.06.13 |
|---|---|
| Introducing State (0) | 2020.06.13 |
| Props : default props (0) | 2020.06.13 |
| Props : looping props (0) | 2020.06.13 |
| Props : slot machine exercise (0) | 2020.06.13 |