Im vorherigen Beispiel wurde die Grundstruktur von React erklärt. Hier nun ein Beispiel, in dem mehrere Components gerendert werden.
index.html
<!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>App Layout Demo</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="Hello.js" type="text/jsx"></script>
<script src="NumPicker.js" type="text/jsx"></script>
<script src="index.js" type="text/jsx"></script>
</body>
</html>Hello.js
class Hello extends React.Component {
render() {
return <h1>Hello There!!!</h1>
}
}NumPicker.js
function getNum() {
return Math.floor(Math.random() * 10) + 1;
}
class NumPicker extends React.Component {
render() {
const num = getNum();
let msg;
if (num === 7) {
msg = <h2>CONGRATS YOU WIN!</h2>
} else {
msg = <p>Sorry, you lose!</p>
}
return (
<div>
<h1>Your number is: {num} </h1>
{msg}
</div>
);
}
}index.js
class App extends React.Component {
render() {
return (
<div>
<Hello />
<NumPicker />
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'));
Gestartet wird alles zusammen über die letzte Zeile in der index.js
Hier wird die Component <App /> in das Element mit der ID „root“ gerendert.
Die Component <App /> beinhaltet aber sowohl die <Hello /> als auch die <NumPicker /> Component. Diese müssen vorher definiert sein bevor das rendern der Components durchgeführt werden kann. Daher die Reihenfolge der JS Dateien in der index.html
Damit erhalten wir folgenden Output:
Bzw. bei der Zahl 7
