Week 1 - Counter App
Tags: react, class, function, usestate
Published: 2022-03-16 14:47:39

---
title: Week 1 - Counter App
published: true
description: creating small UI component to build large scale projects
tags: reactjs, class, function, useState
cover_image: https://i.imgur.com/7Ekm1d7.png
key: 1
series: React Curve

---

## Welcome to Week 1 of React Curve

Hello developer!, glad to see you again.

This is react-curve, open source project where I can share and start creating small UI component in the way I understood the concepts to build large scale projects .

## What is ReactJs?
React is a JavaScript library developed by Facebook in 2013 to build interactive User Interface (UI) components for web applications.

There some of the popular companies are using React in their development environment like Facebook that use React in their products (Facebook, Instagram, and WhatsApp), Twitter, Uber, Netflix, Udemy, Paypal, Reddit, Times, BBC and many more.

## Why ReactJs? 
Performance and Flexibility are the mindset of ReactJs in addition to community and job market.
ReactJs is composition and separates concerns that mean react help us thinking in a modular way so we start design small components before compose all components together in the page and this term called componentization. 

ReactJs give us better way to compose user-interfaces or UI components from reusable elements using JavaScript. ReactJs changed the way we think of interface composition is in elements, Things like buttons, lists, links, navigation, and etc. 

ReactJs uses three key concepts, components, props, and state to create small and complex ui interfaces.

----------------

## Counter App
![counter app](https://i.imgur.com/NRtJgfF.gif)

This week we create a counter app in react, it is simple.

To create a counter component, We have to :

* Create a state that hold the count
* Lets start count from 0
* Make a method to increase the count
* Make a method to decrease the count
* On click the increase + button, increase and update the count
* On click the decrease - button, decrease and update the count

## Code
```react
//class component
import React, { Component } from 'react'

class Counter extends Component{
  state = {
    count : 0
  }

  increment = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  decrement = () => {
    this.setState({
      count: this.state.count - 1
    })
  }
  
  render(){
    return (
        <div className="counter">
          <button onClick={this.increment}>Increase + </button>
          <h2>{this.state.count}</h2>
          <button onClick={this.decrement}>Decrease - </button>
        </div>
    )
  }
}

export default Counter
```

```react
//function component
import React, { useState } from 'react';

function Counter () {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
      <div className="counter">
        <button onClick={increment}>Increase + </button>
        <h2>{count}</h2>
        <button onClick={decrement}>Decrease - </button>
      </div>
  )
}

export default Counter
```
Disclaimer: This post comes from my own experience during this lapse, not saying this is the best way to go, nor the worst, What I think were the best practices applied. Maybe you could have a better way to do it or prefer class component rather than function component, any contribution is more than welcome in the threads below!

[Live Preview](https://this-react-curve.vercel.app/counter)
[Source Code](https://github.com/this-mkhy/react-curve)

Thanks for reading!