React JS -Understanding React Components

Components are the main building blocks of any React app and a typical React app will have many of the components. In a simple manner, a component is a JavaScript class or function that optionally accepts inputs i.e. properties(props), and returns a React element that describes how a section of the UI (User Interface) should appear to client-side react.

The component in the react is an independent, reusable code and it contains HTML + Javascript, both. Components data will be store in the component’s state. This state can be modifies based on user input or other actions. when a component state is modified, React will re-render the component to the browser. you have to implement a render method when about to creating a component.

Let’s see an example in which components are working together as fundamental building blocks s of the application.

above is desktop view of monkelite.com

The 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 Box of each article 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 base component which will be the final UI for our homepage.

Components in React basically return a JSX code which tells us what should be rendered on the UI. In React we have mainly two types of components:

1.Functional components

Functional components are some of the more common components that will come across while developing in React. These are simply JavaScript functions. We can create a functional component to React by writing a code of the JavaScript function. These functions may or may not receive data as parameters given. In the functional Components, the return value is the JSX code to render to the DOM tree.

These components are purely presentational (means they do work only for user UI not contains any backend related code ) and are simply represented by a function that optionally takes props and returns a React element which has to be rendered to the page.
Generally, it is preferred to use functional components whenever it’s possible because of their predictability. Since they are purely presentational, their output is always the same given the same props. You may find functional components referred to as stateless, dumb, or presentational in other places but the meaning of all of them is the same.

Let’s take a peek:


import React from 'react';  
import ReactDOM from 'react-dom';  
  
function Demo() 
{ 
  return <h1>Welcome to Monkelite</h1>; 
} 
  
export default Demo;

output :

There is an absence of a significant amount of features in Functional components as compared to class-based components. The gap between these two types made up with the help of a special ReactJS concept called “hooks”. Hooks are special functions that allow ReactJS features to use in functional components that are specially dedicated to class components.

2.class components

These components are being created using ES6’s class syntax. They have some additional features such as the ability to contain logic (for example methods that handle onClick events), local state, and other useful features to be explore in later sections of our articles.
These class components are a little more complex than the functional components, because of their syntax. The functional components do not contain other components in your program whereas the class components can work with each other proficiently.

We can pass data from parent class components to child class components, and vice-versa. We can use modern Javascript ( ES6) classes to create class-based components in React. Class components have a considerably larger amount of markup than function component. Using them excessively and unnecessarily can negatively affect the performance of the application as well as code readability, maintainability, and testability in React.

Here’s the same component, but written as a class component:

import React from 'react';  
import ReactDOM from 'react-dom';  
  
class Demo extends React.Components() 
{ 
  return <h1>Welcome to Monkelite</h1>; 
} 
  
export default Demo;

The main feature of class components in React that distinguish them from functional components is that they have access to a state which shows the current behavior and appearance of the component. This state can be modified by calling the setState() function. One or more variables, arrays, or objects defined as part of the state can be modified at a time with the setState() function.

How do I choose which component type has to use?

  • Use a class component :
  1. If you need to manage the local state of your React application.
  2. Also, if you need to add lifecycle events to your component.
  3. if you need to add logic for the event handlers that already implemented.

Otherwise, always use a functional component because it increases code readability, maintainability, and testability of React Application. They are also easy to test.Functional components can potentially have a better performance.

When NOT to use Functional Components

Even though functional components are very useful for us, it’s important to remember that not every problem is a nail. Class components are included in React for special reasons.

The general idea I use is to always start with a functional component. If you find out you need lifecycle methods or it makes sense to have a small piece component level state, it’s beneficial to implement a class component. I find this style of writing components keeps me from getting lazy developer.

Composing Components

Read our above article, our first example of a component that we used to explain components? Let’s recall what we have written, we can club all of the individual components to make a parent component. This is what we call composing components. We will now create individual components named Navbar, Sidebar, Songlist, and club them to create a parent component named App and then render this App component.

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

output :

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

If you’ve enjoyed this article, please show some love by sharing it with others. Thank you!

links :

React JS -State (official Documentatation )

Leave a Reply

Your email address will not be published. Required fields are marked *