In the lesson we have create our Person component. The question is what is the big advantage of this.
Components are awesome because we can focus our code in each file and hence make it much more maintainable. Not putting everything into the src/App.js file which can really get crowded for bigger apps and the Person component s also reusable and configurable.

Reusable Components

Now coming back to configuring part reusing is quite simple. we can simply copy and paste component multiple times as may time as we want.
Example:

import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person';
class App extends Component {
	render() {
		return (
			<div className="App">
				<h1> Heading</h1>
				<p> Paragraph </p>
				{/* Reusing the same component Multiple time. */}
				<Person />
				<Person />
				<Person />
			</div>
		);
	}
}
export default App;

In browser we get the output multiple time And that is the super easy way of reusing it anywhere in our application. If our Application contains more and more components that will make it super easy to build it up with all these components ans use them wherever we need to use in our app.
<Person /> : this is now effectively our custom HTML element. We also can configure it though before we do that, let’s change something else abou our react code because right now is all static, still we have our custom component but in there we are still using some static HTML in the end.

import React from 'react';
const person = () => {
	return <p> I am a Person</p>;
};
export default person;

Now, oftentimes our template i.e. our JSX code should be dynamic. It should output different thing depending on the state of your applicationor on some user input. We will do this a lot for the course but let’s lay the foundaations for that in the next lesson.

React introduction
React Component