How to create components in React?

ReactJS

As React JS uses components in the GUI designs, then we should learn how to create components in React JS and What are different ways to create components in React JS.

React SPA ( Single page applications) makes use of the GUI components to render the pages of the application. Components are the like the basic blocks of the page that makes the whole page look like the user want it to.

There are two possible ways to create a component in React . We are going to learn both these methods one by one.

  1. Function Components

Function components are the simple components that we can create in React. These are as simple as writing a JavaScript function with some arguments. This is the simplest way to create a React component. Function Components are pure JavaScript functions that accept props object as the first parameter and return React elements.

Let us understand this with this example below:

function Greeting({ message }) {
  return <h1>{`Hello, ${message}`}</h1>

}
  1. Class Components

Another method to Create a react components is by using classes. By using the Javascript language ES6 classes, you can define a component.We can define a react components that is same like function component by using classes.
Here is the example which make the exactly same component which we just did by using function component.

class Greeting extends React.Component {
  render() {
    return <h1>{`Hello, ${this.props.message}`}</h1>
  }
}

When to use a Class Component over a Function Component?

As we learnt, that we have 2 ways to Create react components, then this gives rise to the questions,

  • When to use Function components and when to use class components.
  • Which one is better? Class components of React or Function components of react?

To answer this question,If the react component needs state or lifecycle methods then use the class component otherwise use the function component. However, from React 16.8 with the addition of Hooks, you could use state,lifecycle methods, and other features that were only available in-class component right in your function component.

In React , we can further describe components in many more categories. We have two more categories based on the bahaviour of the components but not on the basis of how they are implemented.

  • Stateless Components.
  • Stateful Components.

What are stateless components?

You can use either a function or a class for creating stateless components, it won’t make a difference because it does not depend on it. It depends on the behavior of these components. If the behavior of the components is independent of their state then it can be a stateless component. But still, you will need to make choice when to use function components and when to use class components for stateless components also. So unless you need to use a lifecycle hook in your components, you should go for function components. There are a lot of benefits if you decide to use function components here; they are easy to write, understand, and test, a little faster, and you can avoid this keyword altogether.

What are stateful components?

Similarly, If the behavior of the react component depends on the state of the component then it is defined as stateful component. These stateful components are always class components and have a state that gets initialized in the constructor.

Here is an example with which we can understand this components:

class App extends Component {
  constructor(props) {
    super(props)
    this.state = { count: 0 }
  }

  render() {
    // ...
  }
}

However with the React 16.8 Update, in which functional components can also support the states & hooks, it is possible for us to use functional components also as stateful components.Hooks let you use state and other React features in functional components also.

So if we wish to write the above class components in to an Equivalent Functional Component, then we can do so as given below:

 import React, {useState} from 'react';

 const App = (props) => {
   const [count, setCount] = useState(0);

   return (
     // JSX
   )
 }

Conclusion

We learnt about React function components and Class components and when we should use those components in our applications. I hope this will help you in your application development.

Related Posts