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

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!

Live Preview
Source Code

Thanks for reading!