What is React?

If you are here you must be a JavaScript developer or if you are not this article will let you start with your React journey the word which currently has boom in the market right now.

So let's start with your React journey😎.

So there are mainly 3 things that is responsible for a website HTML, CSS, JavaScript.

• HTML - Structure of a website.

• CSS - Styling & design for a website to make it beautiful.

• JavaScript - To have interactivity in website.

let btn = document.querySelector("#btn");
let counterVal = document.querySelector("#counter-val");
let val = 0;
function increaseCounterVal() {
  val = val + 1;
  counterVal.innerText = val;
}

btn.addEventListener("click", increaseCounterVal);

As you can see how much code we need to write

• First we need to create HTML
• We need to reference each & every part of DOM from HTML world to JS world.
• we need to add event listener to the referenced element.
• we need to tell in our callback function what needs to be done & where it needs to update the value.

Just for a basic counter example think of a large application where we need to do a lot of DOM manipulation there telling everything ourselves what to do and where to do. This type of programming is called imperative programming.

So here comes React🚀 for the rescue.

So what React actually is?🤔

• React is a JavaScript library which is used to create interactive User Interfaces.

• Declarative: means we don't need to tell where to do the changes. We will deep dive into this. Hold on for now.

• Component Based Approach: You can break your bigger app into smaller smaller components & then combined them to make a complex web app.

• JSX: you can write JavaScript inside HTML tags.

So let's deep dive into this & write our same logic in react for our counter example.

export default function App() {
  const [counter, setCounter] = useState(0);

  function incrementCounterVal() {
    setCounter((prev) => prev + 1);
  }
  return (
    <div className="App">
      <h1>{counter}</h1>
      <button onClick={incrementCounterVal}>Click me</button>
    </div>
  );
}

Look at the above code how simple it is to create a basic counter in react rather than in vanillaJS.

So how react works is:

• There is something known as state in react think it of as a variable which can be used to update our UI.

• So we need to use useState hook which is provided by "react" to us what is does is it returns a state & a setter function through which we can update our state. const [counter,setCounter] = useState(0)

• That's what is happening in the above example we have counter as state variable taking default value as 0 & setCounter as our setter function.

• We have then our HTML tags as similar to that we used in vanillaJS code but here is the catch. JSX is used over here to update our view i.e the updated value of counter means its dynamic value. <h1>{counter}</h1>

• We don't need to tell react that we need to update the value here we just simply use our state variable in JSX & it will update our view accordingly. This is known as declarative programming.

• We have then similar button through which we can update our value via passing an onClick event. It is a synthetic event used in react as similar to that of click event in vanillaJS. <button onClick={incrementCounterVal}>Click me</button>

• We need to pass our callback also in JSX. This means what is inside that curly braces is JavaScript.

• On clicking of button our function incrementCounterVal_will be called then our setter function _setCOunter will update the counter value by 1 than what it is previous. function incrementCounterVal() {
setCounter((prev) => prev + 1);
}

• What setCounter is doing here is that it is updating our counter variable as well as it triggers our component to re-render because our state variable value has changed now so it should get updated into our UI as well.

Important Note & Analogy

• Keep always this thing in mind like in Maths we write function as f(x) = x + 1 means value of function depends upon x. So x is a dependent variable here. That concludes if value of x changes function output will change.

• In the similar manner in React f(S) = view here view means our User Interface whatever we use to see on the screen. So our view is dependent upon the state variable as soon as our state changes our view will going to change.

This is the whole catch how react works under the hood & makes our life easier to build UI.

You can play around with both codes used in example shown above:
https://codesandbox.io/s/inspiring-gagarin-rm77j6 (vanillaJS)
https://codesandbox.io/s/angry-shannon-zr0m6g (React)

Hope you have fun reading this article & you can start your React journey now 🚀

Thanks for reading! Catch you next time !

PS: Do share your reviews & feedbacks.