What is a React component?

React components let you break up the user interface into separate pieces that can then be reused and handled independently.

A React component takes an optional input and returns a React element which is rendered on the screen.

A React component can be either “stateful” or “stateless.”

“Stateful” components are of the class type, while “stateless” components are of the function type.

Stateless Component

An example of how this might be executed follows below:

import React from 'react';
require('./style.css');

import ReactDOM from 'react-dom';
import App from './app.js';

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

The above example shows a stateless component named ExampleComponent which is inserted in the <App/> component. The ExampleComponent just comprises of a <h1> element.

Stateful Component

An example of how this might be executed is provided below:

import React from 'react';
require('./style.css');

import ReactDOM from 'react-dom';
import App from './app.js';

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

The above example shows a stateful component named ExampleComponent which is inserted in the <App/> component. The ExampleComponent contains a <h1> and the <h2> element wrapped in a <div>. The <h1> displays data using props while the <h2> takes its data from the internal state of the ExampleComponent.

Props

Props are an optional input, and can be used to send data to the component. They are immutable properties, which makes them read-only. This also makes them come in handy when you want to display fixed values.

State

A React component of class type maintains an internal state which acts as a data store for it. This state can be updated and whenever it is changed, React re-renders that component.

LifeCycle

Every component has “lifecycle methods”. They specify the behavior of the component when it undergoes a phase of its lifecycle.

Some examples of different phases could be: when the component is just about to render on the screen, when it has rendered on the screen, or when it is updated/modified in response to a request.

For example, componentWillMount is executed just before the React Component is about to mount on the DOM and componentDidMount executes after the component mounts​ on the DOM.

The React LifeCycle Diagram ( Taken from http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)
The React LifeCycle Diagram ( Taken from http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)
Copyright ©2024 Educative, Inc. All rights reserved