React is all about components. Components are the basic building blocks in react applications. A component is a JavaScript class or function. Optionally component accepts inputs i.e. properties(props) and returns a React element that describes how a section of the UI (User Interface) should appear.
In react there are two types of components:
- Class Component
- Functional Component
Class Components
The class component is a JavaScript ES6 class. We can create class components in React application by extending from React.Component class.
The above is JavaScript class that extends from React Component class. Every class component must have a render method that is going to return the element to be rendered on the UI.
Functional Components
The functional component is simply a JavaScript function. These functions may or may not receive data as parameters.
We can also use Arrow function syntax to write function components.
export default is used to export a class or function from a file. It will allow us to import the component on other files to use them.
The main difference between class and functional components is that class components can make use of component life cycle methods and can have state objects of their own as compared to functional components which do not have dedicated state objects. Functional components can use hooks to use the features of component life cycle.
Subscribe to our Youtube channel for more videos :
