ReactJS | Components – Set 2

In our previous article on ReactJS | Components we had discuss about components, types of components and how to render components. In this article, we will see some more properties of components.

Composing Components

Remember in our previous article, our first example of GeeksforGeeks’s homepage which we used to explain components? Let’s recall what we have told, “we can merge all of these individual components to make a parent component”. This is what we call composing components. We will now create individual components named Navbar, Sidebar, ArticleList and merge them to create a parent component named App and then render this App component.



Below code in the index.js file explains how to do this:

filter_none

edit
close

play_arrow

link
brightness_4
code

import React from 'react';
import ReactDOM from 'react-dom';
  
// Navbar Component
function Navbar()
{
    return <h1>This is Navbar.< /h1>
}
  
// Sidebar Component
function Sidebar() {
    return <h1>This is Sidebar.</h1>
}
  
// Article list Component
function ArticleList()
{
    return <h1>This is Articles List.</h1>
}
  
// App Component
function App()
{
    return(
            <div>
                <Navbar />
                <Sidebar />
                <ArticleList />
            </div>
        );
}
  
ReactDOM.render(
    <App />, 
    document.getElementById("root")
);

chevron_right


Output:

You can see in the above output that everything worked well and we managed to merge all the components into a single component App.

Decomposing Components

Decomposing a Component means breaking down the component into smaller components. We have told the thing about composing smaller components to build a parent component from the very start when we started discussing components repeatedly. Let us see why there is a need to do so. Suppose we want to make a component for an HTML form. Let’s say our form will have two input fields and a submit button. We can create a form component as shown below:

filter_none

edit
close

play_arrow

link
brightness_4
code

import React from 'react';
import ReactDOM from 'react-dom';
  
function Form()
{
    return (
        <div>
            <input type = "text" placeholder = "Enter Text.." />
            <br />
            <br />
            <input type = "text" placeholder = "Enter Text.." />
            <br />
            <br />
            <button type = "submit">Submit</button>
        </div>
    );
}
  
ReactDOM.render(
    <Form />,
    document.getElementById("root")
);

chevron_right


Output:

The above code works well to create a form. But let us say now we need some other form with three input fields. To do this we will have to again write the complete code with three input fields now. But what if we have broken down the Form component into two smaller components, one for input field and another one for the button? This could have increased our code reusability to a great extent. That is why it is recommended in React to break down a component into smallest possible units and then merge them to create a parent component to increase the code modularity and reusability. In the below code the component Form is broken down into smaller components Input and Button.

filter_none

edit
close

play_arrow

link
brightness_4
code

import React from 'react';
import ReactDOM from 'react-dom';
  
// Input field component
function Input()
{
    return(
        <div>
            <input type="text" placeholder="Enter Text.." />
            <br />
            <br />    
        </div>
    );
}
  
// Button Component
function Button()
{
    return <button type = "submit">Submit</button>;    
}
  
// Form component
function Form()
{
    return (
        <div>
            <Input />
            <Input />
            <Button />            
        </div>
    );
}
  
ReactDOM.render(
    <Form />, 
    document.getElementById("root")
);

chevron_right


Output:

Till now we have worked with Components with only static data. That is, we are writing data directly inside a Component. What if, we want to pass some data to our Components? React allows us to do so with the help of another property called props. We will learn about props in details in our next article.



My Personal Notes arrow_drop_up

Senior Technical Content Engineer | GeeksforGeeks

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.