In this article, we will learn about components and different types of components in react js.

In the very first article, we had a brief overview of the react component-based architecture. In this article, we will get into the details of react components.

In. this article, we discuss what are components and different types of components in reactjs. It covers the following topics:

Contents

  • What are components?
  • Types of components?
  • Summary

Alright, let's get started.

1. What are the components in reactjs?

In reactjs, a component represents a part of the user interface.

Let’s, go back to the example from the previous article, you could say that our application has 5 components, one for header, one for side nav, one for the main content, one for the footer, and finally one component to contain every other component, the containing component is the root component and we usually called this as app component.


In your application, all the four nested components describe only a part of the user interface. However, all the components that come together make up the entire application.

Components are also reusable, the same component can be used with different properties to display different information.

For example, the SIDENAV component can be the left side nav as well as the right side nav.


As already mentioned, components can also contain other components. For example, the app component contains the other components. 

Now, how does a component translate the code in our application? the component code is usually placed in a JavaScript file. For example, the app component is placed in app.js.


You can also have a component file with a .jsx extension but we stick to the simple .js extension. 

The component is basically the code inside a .js file, but what does that code look like? 
that depends on the type of the component in reactjs.

2. Types of components in Reactjs

We have two types of components
 1. Functional component 
 2. Class component 

Functional components are literally JavaScript functions, functional components return HTML which describes the UI. For example, below is a Home functional component, which returns an h1 tag that says hello world. 
import React from 'react';

function Home() {
  return <h1>Hello, world</h1>
}

Now I know the HTML doesn't say that but for simplicity just assume we are returning regular HTML. 

Class components on the other hand our regular es6 classes that extend the component class from the reactive library. Class components must contain a render method that returns HTML. For example, the below Home class component extends React. Component and the class contains a render method that returns an h1 tag that says hello world. 
import React from 'react';

class Home extends React.Component {

  render() {

    return <h1>Hellow, world</h1>

  }

}

Now, what is the difference and when to use one over the other, we will discuss in the next few articles. 

But make a note of the two types of components functional components and class components. Now,  we have some understanding of react components.

 Now, we will examine the app component in our hello world application.



In the above screenshot, the first thing to notice is the file extension .js, so it is a JavaScript file.  If you take a look at the code, you can clearly see that this is a functional component and not a class component, the function is named as the app and returns some HTML.

This is a simple hello world application and hence we have just one component you can have tens, hundreds, or even thousands of components.  Facebook, I believe has over 25,000 components, the more complex the application more the number of components.

3. Summary


Alright, let me quickly summarize what we have learned about components.

Components describe a part of the user interface, they are reusable and can be nested inside other components.

There are two types of components class components and functional components

Components are the building blocks of any react application so it is important to get a good understanding of the two types of components. We will start with functional components in the next article

Thank you for reading this article.  I'll see you guys in the next one.