This page is about rendering in React (ie update of the DOM)
To make the UI interactive, you need to be able to trigger changes to your underlying data model.
The root element is the element passed to the ReactDom.render function as argument.
A change of state trigger a changes of UI (ie will render the component again)
For:
setMyVariable("NewValue");
this.setState({ "whatever":"whatever"});
A change of props does not trigger a changes of UI. props define the original state.
In React:
Lifecycle management is different by type of component syntax used. For:
Conditional rendering with control flow statement (such as if, then else, … or the conditional (ternary) operator).
let button = null;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
The component must return null instead of its render output
ReactDOM.render is the main function that renders an element.