Components

Published Jul 29, 2021Updated Oct 12, 2022
Contribute to Docs

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

All contributors

Looking to contribute?

Learn React on Codecademy