In this article you will learn about react components. You will learn why a react application is divided into multiple reusable components. What are react components types? You will also learn about the structure of react components.
React Components – Building blocks of a React application
React components are independent functions that help us to divide our application into smaller and reusable pieces. All of the components would be related to each other but they will be working independently.
A component is a JavaScript function or a JavaScript class that returns the HTML to render the piece of UI. There will be some of the optional inputs known as properties that can be provided to the component known as props when working with react.
A question that might arise in our mind would be, why do we need to split our application into separate components that can either be functional components or class components? The main reason is that, helps us to increase the maintainability of the code. For example, if we don’t divide our application into smaller components than the number of lines of code would reach in thousands and when adding any of the feature or working on any of the mistakes it would be challenging to find that particular part of code.
Components follow the tree structure where every component can have its own method, state, and API calls and components can have the parent-child relationship between them but all components merge in a parent component considered as the root component of our application.
Diving into Component reusability
Taking an example of how a page would consist components and what number of sections can be divided into components is given below.
The image above takes an example of the profile page of a single page application. The page has been divided into various sections for example the navigation menu, user’s profile section, Listing section image gallery and the footer. So, let’s start with navigation menu the reason for making the header section a different component is that it needs to be visible to every page so that users can easily navigate through various pages.
The listing section may include the latest updates for the user which can have distinct information but generally is retrieved as list and also expects similar view. Multiple boxes inside the listing section are a single component being reused. From this example we can understand why do we need to divide the components into smaller reusable components. We can create a component that views an item of the list and reuse the component for viewing the rest.
The image gallery section also has multiple items to be viewed but all of them are having the same structure which has the possibility of having the redundant code in the sense copy and pasting the same snippet of code with different values. So rather we create a single component and provide different values (props).
Basically, we can conclude that if any snippet of code needs to be copy-pasted more than twice, we would rather create a separate component and make it a reusable component and use that component by providing props as per requirements.
The name of the react component should start with a capital letter as react treats the component names with a lower case as the HTML tags.
Types of components
There are two types of components in react, functional components and class components:
Functional components
Functional components are known as such because they are literally JavaScript functions.
A simple JavaScript function can be known as functional component when it returns the HTML to be rendered as the part of UI which in simple words can be said as react element. We can optionally provide the data as a property (props) to that function.
Functional components are known as stateless components. The reason for the functional component to be known as stateless components is that it cannot have its own state but the scenario changes after the introduction of hooks in the version 16.8 of react.
Example:
function helloFunction(props){
return <h1>Hello {props.name}, I am a functional component.
Welcome to LetsReact.</h1>
} We can also use the ES6 syntax to define any functional component as shown below:
Const helloFunction = (props) => {
return <h1>Hello {props.name}, I am a functional component. Welcome to
LetsReact.</h1>
}Class components
Class components are JavaScript class functions. A class component is also known as statefull component as we can add the state for that component. Class components are almost similar to the functional components with some of the additional functionalities. Class components can have the lifecycle methods of react. One of the reasons to add the lifecycle methods of react is that we need to free up the resources used by our component when its destroyed.
Example:
Class helloClass extends Component {
constructor(props){
super(props);
this.state = {
name: “LetsReact”
}
}
render() {
return (
<h1>
Hello, I am a class component. Welcome to {this.state.name}.
</h1>
)
}
} Let’s try to understand the structure of the class components. In the constructor we initialize the local state and bind the event handler methods but if we don’t need to use the local state and bind handlers it is not necessary to use the constructor. We need to call super (props) before any other statement or else we can get the error of props being undefined.
Constructor is the only place in the component where we can declare state directly using this.state, in every other section we need to use this.setState(). In contradict we should not call this.setState() in constructor as it may lead to errors.
The that is must to be declared in the class component is the render () method, other methods can be declared but none of them is mandatory. Every class component has several life cycle methods each of them has particular time in the process to be run but we can override those methods.
Summary
In this article, you learned what are components in react and why are components known as building blocks. We are now aware of the types of components in react that are functional components and class components. Now we also have the ability to select the component type based on the requirement.
