Learn the fundamentals of React, including simple and class components, state, props, and submitting form data.
Conditional rendering
<div id="root"></div> |
class LoginControl extends React.Component { | |
constructor(props) { | |
super(props); | |
this.handleLoginClick = this.handleLoginClick.bind(this); | |
this.handleLogoutClick = this.handleLogoutClick.bind(this); | |
this.state = { | |
isLoggedIn: false | |
}; | |
} | |
handleLoginClick() { | |
this.setState({isLoggedIn: true}); | |
} | |
handleLogoutClick() { | |
this.setState({isLoggedIn: false}); | |
} | |
render() { | |
const isLoggedIn = this.state.isLoggedIn; | |
let button; | |
if (isLoggedIn) { | |
button = <LogoutButton onClick={this.handleLogoutClick} />; | |
} else { | |
button = <LoginButton onClick={this.handleLoginClick} />; | |
} | |
return ( | |
<div> | |
<Greeting isLoggedIn={isLoggedIn} /> | |
{button} | |
</div> | |
); | |
} | |
} | |
function UserGreeting(props) { | |
return <h1>Welcome back!</h1>; | |
} | |
function GuestGreeting(props) { | |
return <h1>Please sign in.</h1>; | |
} | |
function Greeting(props) { | |
const isLoggedIn = props.isLoggedIn; | |
if (isLoggedIn) { | |
return <UserGreeting />; | |
} | |
return <GuestGreeting />; | |
} | |
function LoginButton(props) { | |
return ( | |
<button onClick={props.onClick}> | |
Login | |
</button> | |
); | |
} | |
function LogoutButton(props) { | |
return ( | |
<button onClick={props.onClick}> | |
Logout | |
</button> | |
); | |
} | |
ReactDOM.render( | |
<LoginControl />, | |
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> |