Components in React

Neelakshi Lahiri
Last Updated: May 13, 2022

Introduction

Remember the hustle to finish the syllabus before an exam? 

Source: giphy

 

What did we do then?

We divided our syllabus into different parts based on their weightage. In other words, we handled the dire situation by dividing our work.

Also, while studying, we take notes to use them later on, thereby providing reusability. 

Now, instead of a syllabus, consider a user interface. What if we divided that into separate parts for easy handling and reusability?

Well, that’s exactly what components in React are. 

Apart from this, components in React are independent. To understand this, let us go back to our grade 10 Physics class. 

Remember parallel and series circuits? If one of the components stopped working in a series circuit, the entire circuit would not work, while in parallel circuits, all the components are independent of each other. 

Similarly, in components in React, if one of them has a mistake, it is easier to find and fix s without hampering the working of the rest of the components. 

Thus, to formally define them,

Components in React are used to divide a user interface into independent components that can be handled easily and are reusable. 

Sounds pretty useful, huh?

Then what are we waiting for? Let’s learn about components in React in the article below. 

Types of Components

Before we start learning about components in React, we must know its different types. There are two types of components in React:

  1. Functional Components - They are JavaScript functions.
  2. Class Components - They are components that can work with each other. 

 

Out of these, functional components are easier to deal with, so the basics of components in React are shown with the help of functional components in the rest of the article. 

Creating Components

What is the first thing we need to do when we’re dealing with components?

That’s right! We need to create a component. 

While creating a component in React, the component’s name should always start with an uppercase letter.

Given below is the syntax to create both functional and class components. 

Functional Components

function Animal( )
{
    return <h2> Hello, I'm an animal! </h2>;
}

Class Component

class Animal extends React.Component
{
    render( )
    {   
          return <h2> HelloI'm an animal! </h2>;
    }
}

 

Rendering a Component

To understand what rendering a component means, let us take the example of a simple function in any programming language.

Suppose we write a function sum, which finds the sum of two numbers. To use that function, we call it as shown below:

def sum():
  a,b = input("Enter two numbers ").split()
  a = int(a)
  b = int(b)
  return a+b

c = sum()
print(c)

 

If we try to understand components in React with respect to functions, creating a function is analogous to creating a component, while calling a function is equivalent to rendering a component. 

Now that we know what rendering a component is let’s see the syntax for it. 

ReactDOM.render(<Animal />, document.getElementById('root'));

 

Components with Props

On reading this heading, the first thing that comes to your mind is, what are props?

Props is short for properties, and they are similar to function arguments for components. To understand this, let us consider our previous example of the sum function again. 

def sum(a,b):
  return a+b

a,b = input("Enter two numbers ").split()
a = int(a)
b = int(b)
c = sum(a,b)
print(c)

 

Here, the sum function has two arguments, a and b. Similarly, if we want to pass arguments to a component in React, we’ll use props are shown below:

function Animal(props) 
{
    return <h2>I am a/an {props.name}!</h2>;
}

ReactDOM.render(<Animal name="Panda"/>, document.getElementById('root'));

 

Output:

 

Here, the name “Panda” is passed as an argument to the Animal component, thus giving the output “I am a/an Panda”.

Components in Components

While solving complex programming problems, don’t we make multiple functions and then call one inside another to reuse a portion of the code?

Of course, we do. After all, reusability is an important use of functions. 

Similarly, we can call components inside another component. An example of that is given below.

function Animal(props) 
{
    return <h2>{props.name}!</h2>;
}

function FavAnimal() 
{
    return (<><h1>What in your favorite animal?</h1><Animal name="Panda" /></>);
}

ReactDOM.render(<FavAnimal />, document.getElementById('root'));

 

Output:

 

Components in Files

Do you remember what the main objective behind using components was? 

You’re right! We used it to divide the user interface.

Now, for further division, we may want to divide the components according to their usage and save them in separate folders, but then can we use the component in one folder in a code in another folder?

Of course, we can and doing this is similar to importing a function from a library. Let’s see the code for it to understand how it is done. 

import React from 'react';
import ReactDOM from 'react-dom';
import Animal from './Animal.js';

ReactDOM.render(<Animal />, document.getElementById('root'));

 

Now that we’ve learnt about components in React let us revise by going through some frequently asked questions.

Frequently Asked Questions

1. What are components?

Components in React are used to divide a user interface into independent components that can be handled easily and are reusable. 

2. Why are components used instead of the DOM approach?

Components are used for reusability and easy handling of applications.

3. What are the different types of components?

The two types of components in React are:

  1. Functional Components
  2. Class Components

 

4. What is the syntax to create a functional and class component?

The syntax for creating a functional component is:

function Animal( )
{
    return <h2> Hello, I'm an animal! </h2>;
}

 

The syntax to create a class component is:

class Animal extends React.Component
{
    render( )
    {   
          return <h2> HelloI'm an animal! </h2>;
    }
}

 

5. What do you mean by rendering a component?

Rendering a component means using a component. It is similar to calling functions in any other programming language. 

Key Takeaways

In this article, we learn about the basics of components in React, but did you notice that all the concepts were explained with respect to functional components? 

What are functional components, and since that question arises, what are class components too? So, our next step is to learn about them by reading the articles on functional components and class components.

Apart from this, we can find other articles on JavaScriptReact and various other topics here.

Happy learning!

 

 

Was this article helpful ?
1 upvote

Comments

No comments yet

Be the first to share what you think