What is a React Component?

As I said, React is a component based Javascript library. So the components are core and fundamental building blocks of React. If we say in a simple way, a component is a piece of code that can be reused anywhere throughout the react application.

Components make the task of building UIs much easier and leads to better code organization, reusability, and maintainability.

Let’s understand the components more better way:

You can see in the above image, I have taken a screenshot of Amazon’s Home page UI. In that UI the items I have marked with red and yellow color, these are all the components.

The search bar on the top is an individual component, the header is a component. Then you can see these three cards, these are not individual components, here a single component rendered 3 times with different data, and these data are dynamically rendered by using react props. This is the importance of components in React.

We will discuss components with props further but for now let’s know the types of React Components.

Types of React Components

In React, there are mainly two types of components, Class components and Functional components. Let’s know more about these components.

Functional Components

Functional components are also known as stateless components. These are simply javascript functions and made with simple JSX code. These components are simple to use and easy to understand.

Let’s understand the functional components through the examples:

First create a folder and give its name “components” inside the `src` folder. Then inside
`src/components` create a new file called `User.js` it will be our functional component.

May your file structure something looks like this:

├── src/
│ ├── components/
│ │ └── User.js
└──...other files and folders

I have added some JSX in `User.js`

import React from 'react'

function User() { 

return (
<h1>Ankit</h1>
)
}

export default User;

Then import this component and render it in `App.js`, Like the below example:

import "./App.css"
import User from "./components/User";

function App() {
 return (
<div className="App">
    <User/>
</div>
);
}

export default App;

Let’s see the output on browser

If you use that component multiple times, the output will also change and render the component multiple times. For example: `App.js`

import "./App.css"
import User from "./components/User";

function App() { return (
<div className="App">
<User/>
<User/>
<User/>
</div>
);
}

export default App;
`App.js`

Browser Output:

Class Components

Class based Components are little different and complex than the Functional Components. Class components are stateful and when react needs to maintain its state, class components can be employed. We can pass data from one Class component to another.
These are widely used in many complex projects.

Class Component Syntax

A class component must include the `extends React.Component` statement. It also requires a `render()` method. Like this:

class Componentname extends React.Component { render() {
return (
<h1>Welcome Text!</h1>;
)
}
}
export default Componentname;

You can write `extends Component` instead of `extends React.Component`, but you have to import `Component` from React first. As example below:

import React, {Component} from 'react'

class Componentname extends Component { render() {
return (
<h1>Welcome Text!</h1>;
)
}
}
export default Componentname;

ProTips: Functional components are the recommended way to write React components since React version 16.8. Class components are still supported, but the React team recommends using functional components for new development as they provide a simpler and more concise way of building React applications