components in React:

Introduction to components:

By far you might have seen it many times in the codes we were working with. There was a frequent usage of-

function App() {
	-----------
	-----------
	-----------
}
export default App();

Here in the first line you see a function being defined. However it is not a regular JavaScript function. Instead it is a component named: App(). Note that this component is being exported at the end. This allows this component to be imported in any other component or file.

To have a clear understanding of components, just take a look at the screenshot of a Facebook news-feed page.

Every individual part as shown in this image is a component. This approach led the Facebook develop its all new interface that was introduced back in 2020. Today around hundreds of popular websites are built on React due to its componentizing feature. You can find a detailed list of sites using React on: https://trends.builtwith.com/websitelist/React

Advantages of using components:

Speed: Components are the individual parts of the interface that load very quickly. It ultimately speeds up the development process. In other words, different developers can write different parts of the interface.
Flexibility: Due to component based structure, React code is easier to maintain. This flexibility, in turn, saves huge amount of time and cost to businesses.
Performance: React JS was designed to provide high performance in mind. The core of the framework offers a virtual DOM program and server-side rendering, which makes complex apps run extremely fast.
Reusability: Another great advantage is that we create a component once but we can use it again and again.

Importing and exporting a component:

In every React file, there are a few Import statements at the very top. An import statement is needed to induce the React code that is written somewhere else.

Very similar to the ethics of import statements, there is also an export statement at the very end of the React file. Export statement ensures that the component is able to be imported somewhere else.

Consider the statements:

import React from 'react';

Here the React library is being imported. All components must import the React Library.

Here an image logo.svg is being imported. Note that ./ refers to that the image is a local file stored in the source folder.

export default App();

Here a component App(); is being exported. Note that it must be imported in index.js file to be rendered on screen.

Creating and running a new component:

To create a new component we’ll first need to create a file in the src directory. Important is to start naming the file with a capital letter and ending with a .js extension. For ex.- India.js

Consider the code that is to be written in India.js –

function India() {
    return (
        <div>India is a great country</div>
    );
}

export default India;

Here in this code, we’re defining a function named India() that will return a div code. Note that we are exporting too the same component so that it can be imported elsewhere.

Now, we’ll have to import this component in our App.js file by adding the following statement:

import India from './India';

After that, we’ll simply type that component under the return( - - - - ) section as: .

The way we just created a component was the most conventional way. We can either use the following code which is as per the ES6 standard:

const India = () => {
    return (
        <div>India is a great country</div>
    );
}

export default India;

However these two methods of creating components are categorised as functional components. There is another convention of creating components called class components.

To create a class component we write the code as follows:

import React, {Component} from "react";

class India extends Component {
    render() {
        return <div>India is a great country</div>;
    }
}

export default India;

Here it must be kept in mind that a class component is actually created by extending the basic React Component, hence this component should also be imported along with React.

Following are the differences between a functional component and a class component: