Repo

suvel-the-dev/just_do_react

Let us first remove some extra boiler plate code. This how the code base look after removing those.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
    <App />,
  document.getElementById('root')
);

App.js

import './App.css';

function App() {
  return (
    <div className="App">
      hello world
    </div>
  );
}

export default App;

As our app is all about a button and a counter, now lets add them in the app component.

App.js

import './App.css';
import { useState } from 'react'

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

  const incrementCounter = () => {
    setCount(previousCount => previousCount + 1);
  }

  return (
    <div className="App">
      <div
        className='counter'
      >
        {count}
      </div>
      <button
        className='counter__increment'
        onClick={incrementCounter}
      >
        Click 👆
      </button>
    </div>
  );
}

export default App;

To make the app little cuter 🌸, lets add some CSS to it.

.App {
  display: grid;
  place-content: center;
  height: 100vh;
  width: 100vw;
}
.counter {
  font-size: 64px;
  border: 4px solid;
  width: 200px;
  text-align: center;
}
.counter__increment {
  font-size: xx-large;
}

App output📟

https://codesandbox.io/embed/lucid-nightingale-dj0u8?fontsize=14&hidenavigation=1&theme=light