1. Html code that we push react components
: every react component push inside of <div class="root">
: JS code orders are impotent!
<!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">
<title>First Component</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>
<!--JS orders are Matter!!!!-->
<script src="Hello.js" type="text/jsx"></script>
<script src="NumPicker.js" type="text/jsx"></script>
<script src="index.js" type="text/jsx"></script>
</script>
</body>
</html>
2. index.js file that render other components.
: one component in one file!!!!!! wrap with <div> you have several components, React treats everything in <div> as one component.
: we make App component and render the others in that file.
: this is usually the only thing rendered in index.js
class App extends React.Component {
render() {
return (
<div>
<Hello />
<NumPicker />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
3. Actual React components
class Hello extends React.Component {
render() {
return (
<div>
<h1>Hello there!</h1>
</div>
);
}
}
function getNum() {
return Math.floor(Math.random() * 10) + 1;
}
class NumPicker extends React.Component {
render() {
const num = getNum();
let msg;
if (num === 7) {
msg =
<div>
<p>Lucky!</p>
<img src="https://thumbnail.10x10.co.kr/webimage/image/basic600/176/B001768023-4.jpg?cmd=thumb&w=500&h=500&fit=true&ws=false" />
</div>
} else {
msg = <p>Try again!</p>
}
return (
<div>
<h1>Your number is...{num}</h1>
{msg}
</div>
);
}
}