React renders HTML using ReactDOM.render().
React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<Header/>
<Content/>
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
</div>
);
}
}
class Content extends React.Component {
render() {
return (
<div>
<h2>Content</h2>
<p>The content text!!!</p>
</div>
);
}
}
export default App;
Root document
The root node is the HTML element where you want to display the result.
ReactDOM.render(
<Providerstore={createStore(allReducers, applyMiddleware(thunk))}>
<React.StrictMode>
<Router>
<Routepath="/"exactcomponent={Home}/>
</Router>
</React.StrictMode>
</Provider>,
document.getElementById('root')
);
<body>
<header id="root"></header>
</body>
function UserWelcome(props) {
return <h1>Welcome back!</h1>;
}
function GuestWelcome(props) {
return <h1>Please sign up.</h1>;
}
class Content extends React.Component {
render() {
if (this.state.isLoggedIn) {
return <UserWelcome />;
}
return <GuestWelcome />;
}
}
export default App;
It’s generally a bad idea to create new functions to pass into props in the render function.
The reason it’s bad to create new functions is for performance: not because functions are expensive to create, but because passing a new function down to a pure component every time it renders means that it will always see “new” props, and therefore always re-render (needlessly).
Avoid creating a new function in render when:
Function components and classes that extend Component are not pure. They will always re-render, even if their props haven’t changed. If a class extends PureComponent instead, though, it is pure and it will skip re-rendering when its props are unchanged. Avoiding needless re-renders is the easiest way to improve performance in a React app.