React is a wrapper built on top of HTML, CSS, JS combined.

There are mainly three concepts to be understood:

1. States : The dynamic objects that will be changed in the frontend.
2. Components : Classes that contain and control UI elements, these also may contain the states.
3. React-DOM : The package responsible to connect react to the HTML DOM that does the rendering at the backend.

In layman terms, states are the elements that are to be changed, components is a bag of these elements once you have the bag in your workplace you have all the states and the other dependent UI components and React-DOM is the person that understands what there states and components are and brings them to life.

Let’s dive into it and understand. This is a simple counter App

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

function App() {
  return (
    <div>
      <Counter />
    </div>
    
  )
}

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

  function countIncreaser() {
    setCount(count + 1);
  }
  return(
    <>
      <div>The count is {count}</div>
      <button onClick={countIncreaser}>Increase</button>
    </>
  )
}

export default App;

Here, there are a couple of things going on. Let’s break them down.

• App() : The bucket where all the functional components are added and this main function is exported as the father of all components.
• function Counter() : This is a component, so you now understand that a component is nothing but a function rendering some UI and some logic.
• [count, useCount] : Now, count here is the state variable that we are changing and useCount is the function name that we are using to change the state of the variable count.
• useState(0) : This is a hook, dont worry about this. I shall discuss in the next section.
• <Counter /> : To use the functional component in the main app, this is the syntactical sugar that react developers have created.

There’s a problem in this app though, every time button is pressed the count variable is re-rendered but the button renders again, this happens and you can use react-dev-tools to see this on chrome. I’ll discuss how to solve this in the next sections.