DEV Community

Cover image for Week 1 - Counter App
Mohamed Khaled Yousef
Mohamed Khaled Yousef

Posted on • Edited on

5 1

Week 1 - Counter App

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

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

//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
Enter fullscreen mode Exit fullscreen mode
//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
Enter fullscreen mode Exit fullscreen mode

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
Source Code

Thanks for reading!

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay