What is React? – DEV Community

If you’re right here you have to be a JavaScript developer or in case you are not this text will allow you to begin along with your React journey the phrase which at present has growth available in the market proper now.

So let’s begin along with your React journey😎.

So there are primarily 3 issues that’s accountable for an internet site HTML, CSS, JavaScript.

  • HTML – Construction of an internet site.

  • CSS – Styling & design for an internet site to make it stunning.

  • JavaScript – To have interactivity in web site.

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

btn.addEventListener("click on", increaseCounterVal);
Enter fullscreen mode

Exit fullscreen mode

As you’ll be able to see how a lot code we have to write

  • First we have to create HTML
  • We have to reference every & each a part of DOM from HTML world to JS world.
  • we have to add occasion listener to the referenced factor.
  • we have to inform in our callback perform what must be achieved & the place it must replace the worth.

Only for a fundamental counter instance assume of a big software the place we have to do a variety of DOM manipulation there telling all the pieces ourselves what to do and the place to do. Any such programming known as crucial programming.

So right here comes React🚀 for the rescue.



So what React truly is?🤔

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

  • Declarative: means we needn’t inform the place to do the modifications. We are going to deep dive into this. Maintain on for now.

  • Element Based mostly Strategy: You’ll be able to break your greater app into smaller smaller parts & then mixed them to make a fancy internet app.

  • JSX: you’ll be able to write JavaScript inside HTML tags.

So let’s deep dive into this & write our identical logic in react for our counter instance.

Image description

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

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

Exit fullscreen mode

Have a look at the above code how easy it’s to create a fundamental counter in react quite than in vanillaJS.

So how react works is:

  • There’s something generally known as state in react assume it of as a variable which can be utilized to replace our UI.

  • So we have to use useState hook which is supplied by “react” to us what’s does is it returns a state & a setter perform via which we will replace our state. const [counter,setCounter] = useState(0)

  • That is what is going on within the above instance we’ve counter as state variable taking default worth as 0 & setCounter as our setter perform.

  • We now have then our HTML tags as much like that we utilized in vanillaJS code however right here is the catch. JSX is used over right here to replace our view i.e the up to date worth of counter means its dynamic worth. <h1>{counter}</h1>

  • We needn’t inform react that we have to replace the worth right here we simply merely use our state variable in JSX & it should replace our view accordingly. This is called declarative programming.

  • We now have then comparable button via which we will replace our worth through passing an onClick occasion. It’s a artificial occasion utilized in react as much like that of click on occasion in vanillaJS. <button onClick={incrementCounterVal}>Click on me</button>

  • We have to go our callback additionally in JSX. This implies what’s inside that curly braces is JavaScript.

  • On clicking of button our perform incrementCounterVal_will be known as then our setter perform _setCOunter will replace the counter worth by 1 than what it’s earlier. perform incrementCounterVal() {
    setCounter((prev) => prev + 1);
    }

  • What setCounter is doing right here is that it’s updating our counter variable in addition to it triggers our element to re-render as a result of our state variable worth has modified now so it ought to get up to date into our UI as effectively.



Necessary Word & Analogy

  • Hold at all times this factor in thoughts like in Maths we write perform as f(x) = x + 1 means worth of perform relies upon upon x. So x is a dependent variable right here. That concludes if worth of x modifications perform output will change.

  • In the same method in React f(S) = view right here view means our Consumer Interface no matter we use to see on the display screen. So our view depends upon the state variable as quickly as our state modifications our view will going to alter.

That is the entire catch how react works beneath the hood & makes our life simpler to construct UI.

You’ll be able to mess around with each codes utilized in instance proven above:
https://codesandbox.io/s/inspiring-gagarin-rm77j6 (vanillaJS)
https://codesandbox.io/s/angry-shannon-zr0m6g (React)

Hope you’ve got enjoyable studying this text & you can begin your React journey now 🚀

Thanks for studying! Catch you subsequent time !

PS: Do share your opinions & feedbacks.

Add a Comment

Your email address will not be published. Required fields are marked *