Michael Jones Michael Jones - 2 months ago 4x
Javascript Question

What in React should actually be rendered

I am currently working on learning React and Redux. Now I am getting a better grasp on what the two do:

  • React - Render components on the page

  • Redux - Keep the state of the page

My question though is: what should I actually be rendering with React? Is React suppose to render the entire page, even the header that won't change? For instance, am I suppose to create a new component for the header (logo and tabs, not changing), or just add that to the HTML file I will be rendering to?


I would suggest adding absolutely everything as a React component. Have a single <div> in your html file that you mount your React app to. I found that when I started using React I would try and avoid writing extra code (sure, writing a component for a header rather than the raw HTML is extra lines).

But this introduces complexity, in a way. Different parts of your app are rendered differently. In the long run, in my experience, consistency and readability is more important than fewer lines of code.

BTW if you're using stateless functional components (which your header would be), it's barely any extra code.

import React from 'react';
export default Header = () => <header>My wonderful app</header>;