ReactJs Hooks with example button click game using useState

 ReactJS Hooks

1. Hooks are the new feature introduced in the React 16.8 version.
2. It allows you to use state and other React features without writing a class. Hooks are the functions which "hook into" React state and lifecycle features from function components.
3. It does not work inside classes.
4. Hooks should always be used at the top level of the React function
5. Node version 6 or above. NPM version 5.2 or above.

App.js

import { useState } from 'react';

import './App.css';

const App = () => {

  const [btn, setBtn] = useState(0);

  const btnClick = () => {

    setBtn(btn + 1);

  }

  return (

    <>

      <h1>{btn}</h1>

      <button onClick={btnClick}>Click me</button>

    </>

  );

}

export default App;

index.css

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  background-color: #d2dbdd;
}
div{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
button{
  padding: 15px 20px;
  background: #9b59b6;
  color: white;
  border: 2px solid #ecf0f1;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 20px;
}