About
This page is about rendering in React (ie update of the DOM)
Trigger
To make the UI interactive, you need to be able to trigger changes to your underlying data model.
Root
The root element is the element passed to the ReactDom.render function as argument.
Children Component
state
A change of state trigger a changes of UI (ie will render the component again)
For:
- a function component, see State
setMyVariable("NewValue");
- a class component, see State
this.setState({ "whatever":"whatever"});
props
A change of props does not trigger a changes of UI. props define the original state.
Lifeycle
In React:
- Rendering is called mounting
- Removing is called unmounting
- Updating is called updating
Lifecycle management is different by type of component syntax used. For:
Management
Conditional
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} />;
}
No Rendering
The component must return null instead of its render output
Rendering
ReactDOM.render on the browser
ReactDOM.render is the main function that renders an element.
See Reactdom Render
ReactDOMServer on the server
See Ssr