Dividing Components - Keeping an Overview
Learn how dividing React components into smaller components makes coding easier.
We'll cover the following...
Let’s look at an example of a Header component that includes a logo, navigation, and a search bar. This is a common example that you will regularly come across in web development:
import React from 'react';
require('./style.css');
import ReactDOM from 'react-dom';
import Header from './app.js';
ReactDOM.render(
<Header />,
document.getElementById('root')
);
We have just learned that React components can easily be composed of other smaller React components. This way of breaking up components is highly encouraged in React. So what can we do with the above code snippet to make it easier for ourselves? That’s right: we can break up our relatively big component into multiple ...