react05.html

<!-- Composing Components
Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail. A button, a form, a dialog, a screen: in React apps, all those are commonly expressed as components.
For example, we can create an App component that renders Welcome many times: -->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
			function Welcome(props) {
				return <h1>Hello, {props.name}</h1>;
			}

			function App() {
				return (
					<div>
						<Welcome name="Sara" />
						<Welcome name="Cahal" />
						<Welcome name="Edite" />
					</div>
				);
			}

			ReactDOM.render(
				<App />,
				document.getElementById('root')
			);
		</script>
	 </body>
</html>