Components in React are the way to group the independent code and make them reusable in different parts of the program🤠.

Component

Websites or Web Applications developed using react is the combination and interlinking of different Components.

Components let you develop theUI of the website independently and even we can use reusable components to implement a similar UI.

React facilitates the developer with Class Component and Functional Components.

To know in-depth about React Components check out my blog here

So let's understand these two types of components😉

Stateless Functional Component💥

Functional Components are just javascript functions. It can just receive the properties(that are often called props) and return the HTML(JSX) that describes the UI.😲

Creating functional components –

• Create a new file name with <component-name>.jsx extension.

• Write a function that is returning some HTML.

  In our case, let’s consider a function returning the message – “Hello <name>! Welcome to Chhakuli's Blog”.

So the function code looks like this-

import React from 'react';
function Message(props){
    return <p>Hello {props.text}! Welcome to Chhakuli's Blog.</p>;
}
export default Message;

Now in the main React App.js import this Message. And render it, as per requirement.

So in App.js, the code will be imported as –

import React from 'React';
    import Message from './components/Message';
    function App() {
        return (
         <div>
               <Message text='Sam' />
         </div>
           );
    }
    export default App;

After executing this component, the applications should display the content on the page as –

Hello Sam! Welcome to Chhakuli's Blog.

Explanation –

In the function Message that receives the property (props) and the props are used to append the text from the prop and concatenate with the message and export that.

And on the other end, in the main App.js, It is imported and called by giving the props, and the returned message is rendered on the application as many times as required😀.

We have used the default keyword in the export statement in the Message component. But what does that mean?🤯 Actually, using the default keyword allows using of the custom tag name in the imported file. Like we have used <Message text = “Sam”/>.

So instead of Message, we can use any custom tag in this place if the component is exported with the default keyword. The only thing to handle is, during the import statement we need to specify our custom tag.

Like-

import MyCustomTag from ‘./components/Message’;

Note- All React Components are advised to be put in the components folder as per React. Because this makes the code more organized and manageable🙂.

Stateless Class Component

Class Component is basically ES6 (Ecmascript 2015) Classes. Just like the functional component class component also optionally receives props as input and returns the HTML (JSX) as output. And other than this feature, the class component can also maintain a private internal state😲.

In simpler words, a class component can maintain some information that is private to that component. And use that information to describe the user interface.

Creating the Class Component –

• Create a new file name with <component-name>.jsx extension.
• Whenever we are making a class component, then we need to import the Component class from React library. So we need to import that. And then create a class of the component you wish to create by extending the component class.
• Then create a render method with the logic you wish to return.

  import React, { Component } from 'react';
  class Message extends Component{
    render(props){
        return <p>Hello {props.text}! Welcome to Chhakuli's Blogt.</p>;
    }
  }
  export default Message;
  

  Now the class component needs to be imported wherever want in the application to be used. Let’s embed this in the main App.js file.

  import React from 'React';
    import Message from './components/Message';
    function App() {
            return (
            <div>
                <Message text='Sam' />
            </div>
            );
    }
    export default App;
  

  After executing this, the output will be the same as our functional component.

That is –

Hello Sam! Welcome to Chhakuli's Blog.

Explanation –

We have imported the Component class from the react library. But what was that?🤔 Actually, the Component has a render method that needs to be overridden in the custom component class to return the HTML ( JSX ) data. And the default keyword works exactly as we learned in the functional component.

Functional Components vs Class Components

Functional Components

1. It is a simple function.
2. We should try to use functional components as much as possible. Because it has faster execution. And also have some advantages such as –

(a) Absence of ‘this’ keyword. Because this can be wide tricky to handle.

(b) Solution without using states. That helps to debug applications easier.

Functional components don’t contain much complex implementation. That’s why it is also called the stateless/dumb/presentational component.

Class Components

1. It has a bit more feature-rich.
2. This can maintain its own private data usually called a states. This can contain complicated UI logic. So that’s why if there is no large work, then it is not recommended to use in the application. It also provides the feature of React life cycle hooks.
3. Because of this bunch of functions available, It is also called a stateful/smart/container component.

Note- Class components are on the depreciation path. The react team and community suggest the use of Functional components. The Class components functionality is augmented in Functional Components through React Hooks.

Conclusion🙆‍♀️

• React is the open-source javascript library used for building front-end User Interfaces.
• It is based on the components themselves and that makes the development much easier. And as well as the code maintainability will increase.
• With the help of components, the code snippets can be reused on the different parts of the application wherever it is required.

Hope you have learned about the type of component from this blog🤗

Thanks for reading!!