In this article you will learn about Components in React.
What are Components
Components helps us in dividing our react application into smaller pieces of code and also reusable.Create a component once and reuse multiple times when needed. All the components may or may not be related to each other but they are operated independently.
It is easy to maintain code and debug while working with Components, lets say we did not have these individual components then the number of lines of code would reach in thousands and when adding any of the feature or working on any of the issues it would be challenging to find that particular part of code.
Components basically serves the same purpose as JavaScript functions and also return HTML using JSX functionality
- As you see in the diagram above components have a tree like structure where each component can have its own functions, states, external api calls. Components will have a Parent-Child relationship between them so that's where we need to pass the data from one component to another and Props and callback functions comes into picture.
There are two types of components, Functional components and Class components.
Functional component example:
A functional component is just a plain JavaScript pure function that accepts props as an argument and returns a React element(JSX).
There is no render method used in functional components.
Class component example:
A class component requires you to extend from React. Component and create a render function which returns a React element.
It must have the render() method returning JSX (which is syntactically similar to HTML)
Top comments (0)