Functional vs. Class Componets

Introductions

Components play a huge part in React. There are two types of components that exists in React. Class Components and Functional Components. We will find out more information about those two as we go along in our journey, but just know right now its different ways you can use both types of components its simply just how you wanna do it.

Functional

Functional components are functions that returns html. They accept something called props in a function and returns JSX. Solutions can also be given without state in functional components and you will not need a render as you would in a class.

State

In a functional component you can not use set state. If you need state in your component you will have to create a class Component. State can be used in a class component so therefore you can use set state in a class component.

Class

A class component is ES6 classes that extends component from the react library. These can also be called stateful because as i said before you can use state in a class component. It needs a render() method for returning html. Props can also be accessed with this.props in class components.

Props

Props are your key path to get things on the screen through components in react. You can pass down props from parent components and you can call them by this.props if its a class and you just start off with props if it is a functional component.

Conclusion

Props plays a huge part with components as well when it comes to react they just are used differently from functional to class. But at the end of the day it is your personal preference which route you wanna take when it comes to your application in React. React is a very powerful and useful library and components have a big a part in that tool.