Week 1 - Counter App

Mohamed Khaled Yousef — Thu, 31 Mar 2022 04:37:24 +0000

Welcome in Week 1 of React Curve

Hello developer!

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

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

//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!