ReactJS Components: JS Components in React are the code blocks representing the UI elements. These blocks are reusable and independent like functions in JavaScript and are responsible for representing the elements on the Web Page.
Prerequisites:
NPM & Node.js
React JS
React JS Class Components
React JS Functional Components
Table of Content:
What are React JS Components
Types of Components in React JS
What are React JS Components ?
A Component is one of the core building blocks of React. In other words, we can say that every application you will develop in React will be made up of pieces called components. Components make the task of building UIs much easier. You can see a UI broken down into multiple individual pieces called components and work on them independently and merge them all in a parent component which will be your final UI.
You can see in the below image we have broken down the UI of GeeksforGeeks’s homepage into individual components and Creating First Component, Class Oriented Components – Functional Oriented Component.
Components in React basically return a piece of JSX code that tells what should be rendered on the screen.
Types of Components in React JS :
In React, we mainly have two types of components
1)Functional Components:
Functional components are simply javascript functions. We can create a functional component in React by writing a javascript function. These functions may or may not receive data as parameters, we will discuss this later in the tutorial. The below example shows a valid functional component in React.
Syntax for Funtional Components:
function demoComponent() {
return ();
}
2)Class Components:
The class components are a little more complex than the functional components. The functional components are not aware of the other components in your program whereas the class components can work with each other. We can pass data from one class component to another class component. We can use JavaScript ES6 classes to create class-based components in React. The below example shows a valid class-based component in React.
Syntax for Class Components:
class Democomponent extends React.Component {
render() {
return;
}
}
The components we created in the above two examples are equivalent, and we also have stated the basic difference between a functional component and a class component. We will learn about more properties of class-based components in further tutorials.
For now, keep in mind that we will use functional components only when we are sure that our component does not require interacting or work with any other component. That is, these components do not require data from other components however we can compose multiple functional components under a single functional component.
We can also use class-based components for this purpose but it is not recommended as using class-based components without need will make your application in-efficient.
