Explain simple React.JS code line by line (just expain JS code, CSS code explain

Question

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 (

<div className="wrapper">

<div className="number">{this.state.number}</div>

<div className="button">

<button className="add">

+

</button>

<button className="deduct">

-

</button>

</div>

</div>

);

}

}

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.

Explanation / Answer

import React, { Component } from 'react';

We need to import the React and Component to render it to our application(3rd line)

If Component is not exported then we can use it like this: React.Component

import './App.css';

This imports CSS file as per the location of file in the directory.

class App extends Component {

Here we are extending the Component so that we can export the App and see the result in the browser

constructor(props){

This would call the constructor and pass the props to it. The reason constructor is used is that we are assigning some initial value to this.state

super(props);

Here, we can calling the constructor of parent i.e Component constructor and passing it the props argument.

this.state={number: 0};

}

Here, we are setting the state and state is the place where the data comes from. Here, we are assigning an initial value of 0 to number.

add = () => {

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

}

deduct = () => {

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

}

Whenever add() function/method is called then the add would be invoked and what it does is that it uses setState() method to update the state. For add() function, we are fetching the current value of number and adding 1 to it and the same goes for deduct() function except that here we are decreasing the number by 1.

render() {

It would render the HTML code inside it.

return (

We're returning the following content.

<div className="wrapper">

This is just a wrapper div for all other HTML elements.

<div className="number">{this.state.number}</div>

Here, we are showing the number in this div

<div className="button">

<button className="add">

+

</button>

<button className="deduct">

-

</button>

</div>

Here, in this div we're showing two buttons whose onclick attribute is set as the add() and deduct() function i.e these function would be called depending upon the button clicked which would then update the number variable as explained before in the function definition.

After this we're exporting the default App.

If you want to make the component usable in other parts of the app, you need to export it after creation and import it in the file where you want to use it.

Related Questions

Navigate

• Browse (All)
• Browse E
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.