ReactJS Components

15 Nov, 2021
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.  
Chapters
descriptions off, selected
captions settings, opens captions settings dialog
captions off, selected
English
This is a modal window.
Beginning of dialog window. Escape will cancel and close the window.
End of dialog window.
Google’s custom search at the top can be seen as an individual component, the navigation bar can be seen as an individual component, the sidebar is an individual component, the list of articles or post is also an individual component and finally, we can merge all of these individual components to make a parent component which will be the final UI for the homepage.Components in React basically return a piece of JSX code that tells what should be rendered on the screen. In React, we mainly have two types of components:  
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. Below example shows a valid functional component in React:  const Democomponent=()=>
{
    return <h1>Welcome Message!</h1>;
}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 other class components. We can use JavaScript ES6 classes to create class-based components in React. Below example shows a valid class-based component in React:  
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. Below example shows a valid functional component in React:  
const Democomponent=()=>
{
    return <h1>Welcome Message!</h1>;
}
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 other class components. We can use JavaScript ES6 classes to create class-based components in React. Below example shows a valid class-based component in React:  
class Democomponent extends React.Component
{
    render(){
          return <h1>Welcome Message!</h1>;
    }
}
The components we created in the above two examples are equivalent, and we also have stated the basic difference between a functional component and 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 component 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. In this post, we will mainly write functional components to make things easier to understand. We will discuss class-based components in detail later in the tutorial.  
Rendering Components
In our previous post on rendering elements in React we have seen how elements initialized with DOM tags are rendered using ReactDOM.render() method. React is also capable of rendering user-defined components. To render a component in React we can initialize an element with a user-defined component and pass this element as the first parameter to ReactDOM.render() or directly pass the component as the first argument to the ReactDOM.render() method. Below syntax shows how to initialize a component to an element:  
const elementName = <ComponentName />;
In the above syntax, the ComponentName is the name of the user-defined component. Note: The name of a component should always start with a capital letter. This is done to differentiate a component tag with html tags.Below example renders a component named Welcome to the screen: 
Open your index.js file from your project directory, and make the given below changes:
src index.js:
javascript
import React from 'react'; import ReactDOM from 'react-dom';   // This is a functional component const Welcome=()=>{         return <h1>Hello World!</h1> }   ReactDOM.render(     <Welcome />,     document.getElementById("root") ); 
Output:  
Let us see step-wise what is happening in the above example: 
We call the ReactDOM.render() as the first parameter.React then calls the component Welcome, which returns <h1>Hello World!</h1>; as the result.Then the ReactDOM efficiently updates the DOM to match with the returned element and renders that element to the DOM element with id as “root”.
We call the ReactDOM.render() as the first parameter.
React then calls the component Welcome, which returns <h1>Hello World!</h1>; as the result.
Then the ReactDOM efficiently updates the DOM to match with the returned element and renders that element to the DOM element with id as “root”.
For more information on component open component set 2Reference: https://reactjs.org/docs/components-and-props.html 
Akanksha_Rai
shubhamyadav4
react-js
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.