What is a Component in React?

From the Facebook documentation

Functional

Class

Container

Functional Component

Class Component

state

A few key points

import React, { Component } from 'react';

class Welcome extends Component

class Welcome extends React.Component

render()

Containers

: Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.As plainly stated above, one of the main advantages of components is taking potentially large pieces of code that make up views and break them down in the smaller more manageable pieces that are easier to work with.As mentioned in my post React Basics: Beginning To Learn React , there are 3 main types of components. They are:Some info comes in (props), and some JSX comes out (being displayed). Notice how the syntax looks. It is a standard Javascript function.A component that needs to be aware of its own state In React, when we refer to, we are saying a plain javascript object used to record and react to user events.Each class based component we define has it’s own state based object. Whenever a component state is changed, the component immediately rerenders. It will also rerender its child components Before you use state inside a component, you need to initialize the state object.To set the property state, to a plain js object inside of the class constructor method.While trivial, the following example makes it easy to follow the basics of a class component.1:: This is how you define an ES6 class based component. When declaring, you need to have the following import at the top of your file.Destructuring { Component } from react allows you to define the class like thisInstead of like this2: A class component always needs amethod and always needs to return() something.A container is a class based component that has all the ability of a regular class based component plus it can connect to the redux store via the connect() method.