How to create a simple react application. If you are learning ReactJs and want to practice with React Component, React Props and React State then, really this small and simple react application will help you a lot.

In the Below react application example, Directly will create a react. so I expect you already set up the Node environment and create an app folder in your VS code editor. If you need help check React Js tutorial in Detail.

Counter application in ReactJs

Here, I have created 2 components as the Parent Component(Counter) and Child Component(CounterButton). so basically there are three new files 1) Counter.css, 2) counter.jsx, 3) counterButton.jsx. Accordingly will make changes in App.js.

App.js

This is a root component of the application. where we calling our <CounterComponent/>

import React, { Component } from 'react';
import './App.css';
import CounterComponent from './Components/counter/Counter'; 

 
class App extends Component {
  render() {
    return (
      <div className="App">
        <CounterComponent/>     
      </div>
    );
  }
}
export default App;

Counter.jsx

This is a custom Component that will be the Child component of “App.js” and the Parent component of “CounterButton.jsx“.

import React, { Component } from 'react';
import CounterButton from './counterButton';
import './Counter.css';

export default class CounterComponent extends Component{
    constructor(){
        super();

        this.state = {
            counter:0
        }
        this.increment = this.increment.bind(this);    
        this.decrement = this.decrement.bind(this);
        this.reset = this.reset.bind(this);
    }


    render() {
      return (
        <div className="CounterComponent">  
  
          <CounterButton by={1} incrementMethod= {this.increment} decrementMethod={this.decrement}/>
          <CounterButton by={5} incrementMethod= {this.increment} decrementMethod={this.decrement}/>
          <CounterButton by={10} incrementMethod= {this.increment} decrementMethod={this.decrement}/>
          
          <span class="count">{this.state.counter}</span>
         <div> <button class="button resetBtn" onClick= {this.reset}>Reset</button></div>

        </div>
      );
    }

    reset(){
        this.setState({
            counter: 0
        })
    }

    increment(by){
        console.log(`Increment from child ${by}`)
        this.setState({
            counter: this.state.counter + by
        })
    }

    decrement(by){
        this.setState({
            counter:this.state.counter - by
        })
    }

 
  
  }

import React, { Component } from 'react';
import './Counter.css';

export default class CounterButton extends Component{
    constructor(){
        super();
        this.increment = this.increment.bind(this);    
         this.decrement = this.decrement.bind(this);
    }

    render(){
        return(
            <div className="Counter">
              <button class="button" onClick= {this.increment}>+{this.props.by} </button>
              <button class="button button2" onClick= {this.decrement}>-{this.props.by} </button>
            </div>
            );
    } 
    
    increment(){
        this.props.incrementMethod(this.props.by)
    }
    decrement(){
        this.props.decrementMethod(this.props.by)
    }
}
 
  

.button {
    background-color: #4237da; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
  }
.button2{
    margin: 20px;
}

.resetBtn{
    background-color: #598508; /* Green */
    width: 250px;
    margin-top: 20px;
}
  .count{
    font-size: 50px; 
    padding-top: 10px;
    padding: 15px 32px;
  }