<!DOCTYPE html>
<html lang="en">
<title>myPage</title>
<script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src= "https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<style>
html,body{}
.red{color:red;border:1px solid red}
.blue{color:blue;border:1px solid blue;}
</style>
<body>
<div id="root"></div>
<script type="text/babel">
function NarBar(props){
return (
<div className="blue">
<h1>Nav bar</h1>
<p>{props.children}</p>
</div>
);
}
function SideBar(props){
return (
<div className="red">
<h1>Side bar</h1>
{props.children}
</div>
);
}
function Menu(){
return (
<ul>
<li>Home</li>
<li>About us</li>
<li>Contact</li>
</ul>
);
}
class App extends React.Component{
render(){
return (
<div>
<NarBar><Menu /></NarBar>
<br />
<SideBar><Menu /></SideBar>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
</script>
<div id="root"></div>
</body>
</html>
Wednesday, February 12, 2020
[ReactJs][Example] Containment
This is an example using containment sharing component Meun to SideBar and Navbar component which is using a special prop named "children" to pass children elements directly to the component output:
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment