Yesterday I passed my final assessment at Flatiron School on React. I personally found this section to be tough as there was a lot of material to review beforehand. I spent a lot of time mastering the differences between various components, so I thought I would outline it in a blog post.

What is a component and what are the different types of components?
The official React documents on components define it as so:

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

Components contain functions and create presentation of the code. There are two types of components, container and presentational components. There are also two ways to write components, as either functional or class.

Container vs. Presentational

Container components deal with function rather than presentation. They tend to be stateful, and will use the redux store to send data to other containers or presentational components.

Presentational components are used to render views on the frontend. They are stateless and do not have access to redux.

Functional vs. Class

Functional components are written as JavaScript functions an explicitly use return. The return value of the function depends on the props that are passed in. Functional components are used when you are coding presentational components without their own state or access to lifecycle methods.

Class components are a JavaScript class that extends React. Class components have lifecycle methods that are used to fetch data and create objects. They are stateful components that control how state changes.