React components

Components are reusable code divided into pieces. They are used to serve the purpose same as functions. Therefore we can say that there are two ways to write React Component.

But recently functional components are being liked and becoming more popular

Components are used to divide into two different classes, as follows:-

• Class Components
• Functional Components.

This article tried to explain the Components,

First of all, tried to explain the Class component:-

     Class Components:

Class components must extend react.component at the starting of creation, as it creates inheritance to react components.

One more important factor to keep in mind is, that this component requires to render function, as it returns HTML.

The illustration was done via an example:

class Father extends React. component {

render() {

return <h1>Hi, i m Hari shankar sharma</h1>;

} }; 

Functional Components:

Functional Components are nothing just like plain javascript functions that are used to return JSX(Javascript XML).JSX helps write HTML in Javascript files.

The illustration was done via an example:

import react from 'react'
const functional = () => {
return <h1> "Hello World"</h1>
 };

Clearly Stated, the functional component is just a simple function used to return JSX with the help of the ‘arrow function’ introduced in EcmaScript 2016.

In react, there are various different ways to display the data, one way is known to be as props.

Let’s see how they are written in functional and class components, such as we are passing props of the name:

<Component name="love" />

So, in the functional component, the representation will be like this:

const FunctionalComponent = ({ name }) => {
 return <h1>Hello, {name}</h1>;
};

Here we are destructuring props in argument only,in case don’t know detailing about destructuring there is an alternative :

const FunctionalComponent = (props) => {
 return <h1>Hello, {props.name}</h1>;
};

And in Class Component, the representation will be like :

class ClassComponent extends React.Component {
  render() {
    const { name } = this.props;
    return <h1>Hello, { name }</h1>;
 }
}

It’s simple in-a-class component to pass props, the thing to remember is to use the “this” keyword.

Another way is handing of state in functional as well as class-based components

Now we all know that we cannot avoid dealing with state variables in a React project. Handling state was only doable in a class component until recently, but from React 16.8, React Hook “useState” was introduced to allow developers to write stateful functional components.  Here we are going to make a simple counter that starts from 0, and the one-click on the button will increment the count by 1.

Handling state in class components

const FunctionalComponent = () => {
 const [count, setCount] = React.useState(0);

 return (
   <div>
     <p>count: {count}</p>
     <button onClick={() => setCount(count + 1)}>Click</button>
   </div>
 );
};

To use state variables in a functional component, we need to use the “useState” Hook, which takes an argument of the initial state.

As it is functional component in which we are defining hook->useState, So, firstly import it too.

In this case, we start with 0 clicks so the initial state of the count will be 0.

Of course, you can have more variety of initial states including null, string, or even object – any type that JavaScript allows! And on the left side, as useState returns the current state and a function that updates it, we are destructuring the array like this. If you are a bit confused about the two elements of the array, you can consider them as a state and its setter. In this example, we named them to count and setCount to make it easy to understand the connection between the both.

Handling state in class components

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

 render() {
   return (
     <div>
       <p>count: {this.state.count} times</p>
       <button onClick={() => this.setState({ count: this.state.count + 1 })}>
         Click
       </button>
     </div>
   );
 }
}

The idea is still the same but a class component handles the state a bit differently. Firstly, we need to understand the importance of the react. component constructor.

“The constructor for a React component is called before mounting. When implementing the constructor for a React. Component subclass, you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor, which can lead to bugs.”

Basically, without implementing the constructor and calling the super keyword with (props), all the state variables that you are trying to use will be undefined. So let’s define the constructor first. Inside the constructor, you will make a state object with a state key and initial value. And inside JSX, we use this.state.count to access the value of the state key we defined in the constructor to display the count. The setter is pretty much the same, just with a different syntax.

Alternatively, you can write an onClick function. Remember, the setState function takes argument(s) of state, props(optional) if needed.

onClick={() =>
  this.setState((state) => {
    return { count: state.count + 1 };
  })
}