Learn the fundamentals of React, including simple and class components, state, props, and submitting form data.
Containment
<div id="root"></div> |
function FancyBorder(props) { | |
return( | |
<div className={'FancyBorder FancyBorder-' + props.color}> | |
{props.children} | |
</div> | |
); | |
} | |
function WelcomeDialog() { | |
return( | |
<FancyBorder color="blue"> | |
<h1 className="Dialog-title">Welcome</h1> | |
<p className="Dialog-message">Thank you for visiting our spacecraft!</p> | |
</FancyBorder> | |
); | |
} | |
ReactDOM.render( | |
<WelcomeDialog />, | |
document.getElementById("root") | |
); |
<script src="https://unpkg.com/react/umd/react.development.js"></script> | |
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> |
.FancyBorder { | |
padding: 10px 10px; | |
border: 10px solid; | |
} | |
.FancyBorder-blue { | |
border-color: blue; | |
} | |
.Dialog-title { | |
margin: 0; | |
font-family: sans-serif; | |
} | |
.Dialog-message { | |
font-size: larger; | |
} |