Table of Content
- Introduction
- What is a React Component?
- Class Component
- Function Component
- Component constructor
- Conclusion
Introduction
In this article, we are going to talk about React Components. In react js component plays a vital role. Components are used to build applications. It's time to explain briefly about React components.
What is a React Component?
dUva6_1LZcAtCVVqw5Q4e0dZkzfospM9v_za8DKZhqtF8mIUW9EP5sCqvXsRJ6miUx2d6MdNBSpU3V5FWcqQS3ixdT5JyzggvxoVe3pIVX80cq
Components are the building blocks of Applications. Heart of React’s application is the Component. Components are like containers or bags. We write functions which return HTML elements. When creating the components we must use Upper case letters.
Eg: function Home(){
}
[Note: Home is the component. For the component first letter should be in upper case]
Note: In those images each menu has individual components.
There are two types of Components.
- Functional Components
- Class Components
Functional Components:
It is a normal function like javascript functions. It returns JSX elements.
JSX - Combination of HTML and Javascript.
Syntax:
function Functionname()
{
return
(
Hello World
)
}
Example:
Output:
Hi, I am also a Car!
Class Components:
It is just different from the functional component.
For the Class component we want to use the extends keyword from the React Component.>
Eg: class Home extends React.Component{
}
Note: Home is the Component Name.
There are many inbuilt classes available in React Packages, so we need to inherit the class component from the React component by using Extends keywords.
This statement creates inheritance and gives access to your React Components.
extends React.Component allow Parent component to access datas, function and trigger it to the child component.
Syntax:
class Classname extends React.Component
{
render()
{
return
(
Hello World
)
}
}
Example:
Output:
Hi, I am a Car!
Component Constructor
React constructor method is used to initialize an object in the class. It is automatically called when the class is created.
In react, when we initialize the constructor method, the state is defined to control the behaviour of our class components.
State is an object that holds some sort of information.
Example:
super()- Used to call the constructor from the Parent component. This is mainly required to access any variable in the parent component.
Props- It is just Properties. Used to Pass Data from Parent component to child component, but we cannot change the data.
State- It controls the behavior of the component. We can change the data by using the setState method.
To know briefly about Props and State, learn the article about [Props and State] in www.achieversit.com Blog.
Example:
import React from "react";>
class App extends React.Component {
constructor(props) {
super(props);
this.state = { change: true };
}
render() {
return (
onClick={() => {
this.setState({ change: !this.state.change });
}}
>
Click Here!
{this.state.change ? (
Welcome to AchieversIT Solutions
) : (
A Computer Science Portal
)}
);
}
}
export default App;
Note:
The browser displays the button (Click Here!) and content (Welcome to AchieversIT Solutions). While onclick the button (Click Here!). The Content (Welcome to AchieversIT Solutions) changed to (A Computer Science Portal). The sample output images are mentioned below.
Output:
Difference between Class and State Component:
Conclusion:
Components are the building blocks of Application. In React, components play a major role to create single page applications easily. Props and State are used to pass and change the data from one component to another component. I hope that this article will help you to understand the React components. The "best practice" is to use functional components whenever possible.There is no need for 'this' keyword, that causes a lot of confusion.
4.png)
