Components

In React, components are pieces of reusable, independent code that make up the user interface (UI) of the application. Each component comes with one or both of the following:

• A state object that contains component data that is expected to change over time.
• A props object with data that can be passed down from parent component to child component.

Class Components

Class components contain a state and use a render() function to return JSX markup. When defined, the class has to be an extension of the React.Component class:

import React from 'react';

class ClassComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      property1: 'A string',
      property2: 1,
      property3: true,
    };
  }

  render() {
    return <div>...</div>;
  }
}

export default ClassComponent;

to clipboard
Copy to clipboard

Function Components

Function components are stateless and only use the return statement. No import statement necessary:

function FunctionComponent(props) {
  return <div>...</div>;
}

to clipboard
Copy to clipboard

Arrow Function

The arrow function is a feature that was introduced in ES6. It uses the = and > characters to define a function like a variable. In React, function components can be defined with this syntax:

const FunctionComponent = (props) => {
  return <div>...</div>;
};

to clipboard
Copy to clipboard