In this lesson we will dive deeper into React Component, As I explained React is all about creating components custom HTML element we could say which you can then use to construct your application.

As Application will contain multiple different components, typically you render one root component the App component but you can name it what ever you want.

App : React Component

In the app component we can nest all other components your application might need and ofcourse these components can also be nested into each other.

import React, { Component } from 'react';
import './App.css';
function AppComponent() {
	return (
		<div className="App">
			{/* Other Component can be nested here  */}
			<h1>Root Of Application</h1>
		</div>
	);
}
class App extends Component {
	render() {
		return AppComponent();
	}
}
export default App;

But all the way up you only has one root component you could reach out to multiple nodes in your HTML files and mount different root components for different react app all in the same project. That would be possible but it is not what we do here. in the end, you can simply replicate what you learn in this course for multiple applications in one at the same HTML file.
Now let’s just stick to the general or typical usage of react. So we have the App component which is defined as the App.js file.

Declaration of React Component class

So we can see one of two ways of defining a React component we create javascript class with class keyword and then we use the extends keyword to inherit from this component object or class to be precise which is imported up there from the react library.

import React, { Component } from 'react';
class App extends Component {
  // ....
}

Actually we have imported two thing:
1. React : Which is responsible or required for rendering anything to the DOM. We always need to import that in a file where define a component.
2. Component class : A componet class to create a component.

As component class has one method i.e the render() method. It needs to have that because React will call this method to render something to the screen. there is one impotent job that every React component has to do it has to return or render some HTML code which can be rendered to the DOM.

Export That Particular React Component

After declaration and creating a component we need to export that component class as a default export of the file.

import React, { Component } from 'react';
 ...
class App extends Component {
 ...
}
export default App; // default export of this file.

This is an ES6 feature and simply means if you import the whole file you will simply import this App class because it is the default export.

We do use this in the index.js file where we have imported App component.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App'; // imported the default App Class
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

React introduction
React Component