Components are JavaScript functions or classes that let you split the UI in reusable pieces.

Components accept arbitrary input named props and return React elements which describe what should appear on the screen.

React component types

Function components

The simplest way to define a component is by writing a function that accepts a single props object as an input parameter and returns the React element that should appear on the screen.

Example implementation of a function component:

import React from 'react';

function LoginBar(props) {
	return 
 Logged in as {props.username} 
}

export default LoginBar;

Class components

The same component can be written as an ES6 JavaScript class.

Example implementation of a class component:

import React, { Component } from 'react';

class LoginBar extends Component{

	render(){
		return(
			
 Logged in as {this.props.username} 
		);
	}
}

export default LoginBar;

The two components are identical from React’s point of view.

Always use component names starting with capital letters. React treats components starting with lowercase letters as DOM tags. As an example the

represents a DOM tag but the

represents a component and requires LoginBar to be in scope.

More details related to rendering React components.

class components function components