Components

In React, components make up the UI of the application. Components are pieces of code that are reusable and independent. 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 extention 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>
  )
}