Explain simple React.JS code line by line (just expain JS code, CSS code explaination is no need.)

Here is JS file:

import React, { Component } from 'react';

import './App.css';

class App extends Component {

constructor(props) {

super(props);

this.state={number: 0};

}

add = () => {

this.setState({number: this.state.number + 1});

}

deduct = () => {

this.setState({number: this.state.number - 1});

}

render() {

return (

{this.state.number}

+

-

);

}

}

export default App;

Here is CSS file:

.wrapper {

width: 400px;

height: 500px;

border: 1px solid grey;

margin: 50px auto;

text-align: center;

position: relative;

}

.number {

font-size: 80px;

color: lightblue;

position: absolute;

top: 100px;

left: 45%;

}

.button {

position: absolute;

bottom: 0;

width: 100%;

height: 50px;

}

.button button {

width: 50%;

height: 100%;

font-size: 30px;

color: white;

background: lightblue;

}

.button button:hover {

color: lightblue;

background: white;

cursor: pointer;

}

Here is output screenshot

This is a simple counter web application using React, it shows the current number in the counter. it will increase or decrease the counter by after clicking.