Learn the fundamentals of React, including simple and class components, state, props, and submitting form data.
Composition
<div id="root"></div> |
function FancyBorder(props) { | |
return ( | |
<div className={'FancyBorder FancyBorder-' + props.color}> | |
{props.children} | |
</div> | |
); | |
} | |
function Dialog(props) { | |
return ( | |
<FancyBorder color="blue"> | |
<h1 className="Dialog-title"> | |
{props.title} | |
</h1> | |
<p className="Dialog-message"> | |
{props.message} | |
</p> | |
{props.children} | |
</FancyBorder> | |
); | |
} | |
class SignUpDialog extends React.Component { | |
constructor(props) { | |
super(props); | |
this.handleChange = this.handleChange.bind(this); | |
this.handleSignUp = this.handleSignUp.bind(this); | |
this.state = {login: ''}; | |
} | |
render() { | |
return ( | |
<Dialog title="Mars Exploration Program" | |
message="How should we refer to you?"> | |
<input value={this.state.login} | |
onChange={this.handleChange} /> | |
<button onClick={this.handleSignUp}> | |
Sign Me Up! | |
</button> | |
</Dialog> | |
); | |
} | |
handleChange(e) { | |
this.setState({login: e.target.value}); | |
} | |
handleSignUp() { | |
alert(`Welcome aboard, ${this.state.login}!`); | |
} | |
} | |
ReactDOM.render( | |
<SignUpDialog />, | |
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; | |
} |