What are react components?

Components are the building blocks of any React app and a typical React app will have many of these. Simply put, a component is a JavaScript class or function that optionally accepts inputs i.e. properties(props) and returns a React element that describes how a section of the UI (User Interface) should appear.

Type of components?

  • Stateless Components
  • Stateful component

What is stateless components?

stateless component is just a plain JavaScript function which takes props as an argument and returns a react element. The functional component is also known as function components

What is meaning of stateless components?

A stateless component has no state, it means that you can’t reach `this.state` inside it. It also has no lifecycle so you can’t use componentDidMount and other hooks.

We have two way to create function component

Simple Example

function Greeting() {
  const message = 'This is a Function Component!';

  return <h1>{message}</h1>;
}

Example with Props 

function Greeting(props) {
  return <h1>Hello {props.name}!</h1>;
}

Arrow function

var Greeting = (props) => {
    return <h1>Hello {props.name}!</h1>;
}

Stateful Component

We have two way to write statefull component

  • React createClass Components
  • Class Components

createClass Components

Everything started out with React’s createClass Components. The createClass method provided developers with a factory method to create React class components without using a JavaScript class. It was the status quo for creating React components prior JavaScript ES6, because in JavaScript ES5 there was no class syntax available:

var Greeting = React.createClass({  
    render: function() {
        return (
            <h1>Hello {this.props.name}!</h1>
        );
    }
 })

Class Components

We can also write Components using ES6 classes. Component class is a bit more complicated. It has a state, lifecycle hooks and it is a javascript class which means that React creates instances of it. React should initialise the component class in order to call lifecycle hooks, call a constructor, initialise state and more.

Simple Example

class Greeting extends React.Component {
    render() {
        return <h1>Hello {this.props.name}!</h1>
    }
 }

Click here to learn more about react component lifecycle

If you have found this article useful, share this article with your friends and leave comment if you have any question. Your responses are also highly appreciated.

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *