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

Function Components

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

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

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>
)
}
Looking to contribute?

Learn React on Codecademy