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 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 {
  this.state = {
    property1: "A string",
    property2: 1,
    property3: true
  }

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

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

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

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>
  )
}