functional components - good for simple content
class components - good for just about everything else

As an example, imagine we are waiting for some callback, which can take 3 seconds and only after it finish we want to display jsx / html. We are not able to do this with functional component.

Class components

  • easier code organization
  • can use state (easier to handle user input)
  • understands lifecycle events (easier to do things when the app first starts)


  • must be a javascript class
  • must extend React.Component
  • must define a render method that return some amount of JSX

src/index.js

// Import the React and ReactDOM libraries
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
	render() {
		window.navigator.geolocation.getCurrentPosition(
				position => console.log(position),
				err => console.log(err)
		);

		return <div>Latitude: </div>;
	}
}

// Take the react component and show it on the screen
ReactDOM.render(
	<App />,
	document.querySelector('#root')
);