Posted by The concept of the components and the props are a game changer for React. A component is nothing but an independent block of code that can be reused as much time as we want. There are basically two types of components in React, one is the Functional component and another is the Class component. On the other hand, Props stands for properties and it is used to pass data from one component to another.
In this tutorial, we are going to deep dive into the React components and props. This tutorial is going to build the foundation in React and at the end of this tutorial, you will have a clear understanding of how these things work.
Things You will learn from this tutorial
We will cover the following topics in this tutorial and the topic’s names are given in the below section:
- Brief Overview of React Elements
- Functional Components and Props
- Class Components and Props
- Conclusion
Brief Overview of React Elements
In general, elements in React are considered the core building block and it only recognizes its elements. Let’s think about the browser. Normally, when we write HTML code, such as <div> <img> and so on. The Browser simply parses them and makes something like a tree that is known as the DOM. So that we can manipulate them by using JavaScript.
Normally, you may think that react elements are as similar as the HTML elements. But they are not. In React world, everything is considered a valid JavaScript Object. Because react is built on Vanilla JavaScript and there is the main difference between the HTML element and the React element. Let’s see the below code example to understand this concept more clearly:
import ReactDom from 'react-dom'
setInterval(()=>{
const element = (
<h1 className='heading'>
<span>Time : {new Date().toLocaleTimeString()}</span>
</h1>
);
ReactDom.render(element, document.getElementById('root'))
}, 2000)
// Output: Time : 9:45:46 PMHere, you can see that we have created a react element <h1> Now, you may get confused because it exactly looks like the HTML elements. Let me prove to you that it is a react element. When we created a react element, it simply goes here:
const element = React.createElement('h1', {className: 'heading'}, 'Hello World!')Finally, this returns an Object to us. See the below example of what the Object will look like.
element = {
type : 'h1',
props : {
className : 'heading',
tabIndex : 0,
children : {
type : 'h1'
}
}
}This is the Object representation of the <h1> element in React. Finally, when we will pass this element to the ReactDom.render() function, it will automatically create a Virtual Dom for itself and keep comparing it with the previous JavaScript Object. While doing so, if it finds any differences then simply update that difference part to the DOM.
If you notice, you may be able to see that we have added an external function to change the react element. The main reason behind it is that react element does not provide us to change its elements. This is the core concept of the react element.
You can notice that this element is not dynamic and we can not reuse this element. To deal with such situations, React comes with the concept named components and in the next section, we are going to explore the core concept of the functional component in React.
Functional Components and Props
In React, functional components are referred to as simple JavaScript functions that can accept props and also return a React element. Let’s think in the JavaScript way first. What if we want to make our previous code functional. To do so, see the below code example:
import ReactDom from 'react-dom'
function Clock(){
return (
<h1>
<span>Time : {new Date().toLocaleTimeString()}</span>
</h1>
);
}
ReactDom.render(Clock(), document.getElementById('root'))
// Output: Time : 9:55:36 PMHere, you can see that we have tweaked our code a little bit. At first, we created a function and inside that function, we simply return the React element. As we have already known that every React element is a valid JavaScript expression.
Now if you notice carefully, you may be able to see that our program has become functional now. In a normal JavaScript function, we can create a function and reuse it as many times as we want. Here, our program achieves that functionality. Though we can call it a functional component, there’s a better way to write this component in React, and lets it in the below section:
import ReactDom from 'react-dom'
function Clock(){
return (
<h1>
<span>Time : {new Date().toLocaleTimeString()}</span>
</h1>
);
}
ReactDom.render(< Clock />, document.getElementById('root'))
// Output: Time : 9:58:46 PMHere, you can see that we have used <Clock/> instead of Clock() If React finds anything like this, it will consider it as a function and simply call that function. Here, the function Clock() is considered as the Component, and the returned portion from this code is considered as the React element.
Let me assume that now you get the idea about what is React component and what is React element is and also find out the difference between them.
Let’s think in React way now. In HTML, we can use a tag as many times as we want. Let’s say the <img> tag. If we need to use this tag 100 times in our project we can do it. Similarly, now we can use our <Clock/> as many times as we want. This is the benefit of the components in React.
Props in Functional component: In the earlier section of this tutorial, we said that props stand for properties and it is used to pass data from one component to another. Let’s say we are working on a Korean project and we need to provide the Korean language in our time component. To do so, do we need to write the whole new program from the scratch? No! We don’t. We can simply pass a parameter to our component and this concept is known as the props. Let’s quickly see the below code example of how we can use the props in our functional component.
import ReactDom from 'react-dom'
function Clock({locale}){
return (
<h1>
<span>Time : {new Date().toLocaleTimeString(locale)}</span>
</h1>
);
}
ReactDom.render(< Clock locale='ko-KR' />, document.getElementById('root'))
// Output: Time : 오후 10:22:14 Here, you can see that we have passed a parameter named locale from the outside and our component receives it in this {locale: 'ko-KR'} format. But we have used Object destructuring method to keep it shorter and simply access it in our Date parameter. This is the concept of props and by following this approach we can use props in the functional components.
Class Components and Props
Besides, the functional approach to create a component in React, there’s another syntax for performing this action and its name is the Class syntax or Class component. You may ask, if we can create a component in a functional way, then why do we need to use Class syntax for creating a component?
The answer is simple. We will use the Class syntax for creating a component because it is a stateful component. As previously, let’s create a React component using Class syntax in the Pure JavaScript way at first.
import ReactDom from 'react-dom'
class Clock {
showTime() {
return(
<h1>
<span>Time : {new Date().toLocaleTimeString()}</span>
</h1>
)
};
}
const ClockComponent = new Clock()
ReactDom.render(ClockComponent.showTime(), document.getElementById('root'))
// Output: Time : 10:20:12 PMLet’s break the code into chunks and see what we have done here. Here, at first, we have created a class and named it Clock then inside that object we have taken a method named showTime() We have returned the react element from that method. After that, we created a new Object and named it ClockComponent, and finally pass the method for rendering.
This is the JavaScript way. But we want to use it in a react way. To do so, see the below code example:
import React from 'react'
import ReactDom from 'react-dom'
class Clock extends React.Component{
render() {
return(
<h1>
<span>Time : {new Date().toLocaleTimeString()}</span>
</h1>
)
};
}
ReactDom.render(<Clock/>, document.getElementById('root'))
// Output: Time : 10:26:42 PMHere, at first, we have extends the Reacts superclass named React.Component from React. This class has its own method named render() so, we need to follow this convention. Finally, when we have used the component like <Clock/> then it can recognize those methods and shows us the actual output.
Props in Class component: Passing a parameter in a React Class component is a bit different from the Functional component. Let’s see the previous example but using the Class syntax first in the below section:
import React from 'react'
import ReactDom from 'react-dom'
class Clock extends React.Component{
render() {
return(
<h1>
<span>Time : {new Date().toLocaleTimeString(this.props.locale)}</span>
</h1>
)
};
}
ReactDom.render(<Clock locale='ko-KR'/>, document.getElementById('root'))
// Output: Time : 오후 10:32:14 What happens here? We know that to access any Object properties we need to use the Dot(.) sign. Here, when we have passed a parameter, the React.Component class automatically sets this parameter to its property named props As a result, we can easily access it by using the this.props.locale Here, this refers to its Component Class. This is what happens behind the scene when you use props in a class component.
Conclusion
If you have come this far then Congratulate yourself. Because now you have already known about the React elements, Functional component, and Class component in react. Not only at the surface level but also from the deep inside.
The purpose of this tutorial is to help you think in a React way and to do so, we have also demonstrated everything in JavaScript at first and then in React so that you can understand how things are happening in React.
Finally, Components and Props are the most important thing in React. You can say it is the heart of a React project. The more you understand these concepts the more you will become a better Front End Developer. There was also a myth or misunderstanding about the React Element and Component. We try to explain the difference between them. If you start your React journey then this tutorial may help you to build your foundation strongly in React.