This content originally appeared on DEV Community and was authored by Prajwal Jain
what is declarative in terms of react?
if you are new to react then you might have heard about react being declarative.
What exacly does that mean?Lets have a look.
Say we have a button with us and initially a normal text of welcome user.
What we want to do?
We want to display user's name instead of just user as a text when button is clicked.
Lets have a look at the following code.
<h1>sample for showing that react is declarative</h1>
<hr />
<button id="btn-click">Click me</button>
<div>
<h2>welcome <span id="user">user</span></h2>
</div>
Here is what we do in vanilla javascript.
document.querySelector("#btn-click").addEventListener("click", () => {
document.querySelector("#user").innerText = "prajwal";
});
So we need to tell the browser each and every step which are as follows:
- hey browser, give me the button which lies on the document whose id is ....(btn-click) in our case.
- Do something (step 3) when user clicks on that button.
- when user clicks on that button,give me that element which lies on the document and whose id is ....(user in our case)
- set the text as ....(prajwal in our case) on it.
Some crucial points to be noted:
- we are dealing with the browser's DOM to perform our actions.This,is what we dont do in React.We never interact with DOM in React. So after the birth of react this procedure seems more like a donkey work.
- We are telling browser each and every instruction and then it does something for us.
Here is the codepen link if you wish to try your hands on
React has came out with a smarter approach and thats nothing but declarative!
Lets see the react code..
import { useState } from "react";
import "./styles.css";
export default function App() {
let [user, setUser] = useState("user");
return (
<div className="App">
<h1>sample program to show declarative programming</h1>
<hr />
<button
onClick={() => {
user = "prajwal";
setUser(user);
// if you dont use setState line no 19 does not run => function is not called => rerendering does not occur.
console.log("from onclick", user);
}}
>
Click Me{" "}
</button>
{console.log(user)}
<h1>welcome {user}</h1>
</div>
);
}
Here is the code for you to play with.
Again if you dont know about useState you can read this blog.I have tried to explain things in a simpler way with the same example so that it is relatable.I do suggest you to check out this blog.
In this react code,you see we only tell the react..
Hey React,I want to display something... on this element when some one clicks on the button.
Neither we do document.querySelector nor we do .innerText..i.e. We dont deal direclty with browser's DOM.But still the work is done.How?Well,React does all of that for us.
you see,We dont give set of long instructions.
We only tell react what to do..how does react do that is react's look out.
Its more like saying
TL;DR
"suun react,tuze ye element pe ye text dikhana hai..kuch bhi kar kaise bhi kar bass kaam ho jaana chaiye..!"
Thats declarative!
Thank you for reading till the end. If you notice something wrong do suggest me in the comment box.
Do give it a like if it helped you understanding the concept.
This content originally appeared on DEV Community and was authored by Prajwal Jain
Prajwal Jain | Sciencx (2021-05-25T12:16:31+00:00) Declarative in terms of React.. Retrieved from https://www.scien.cx/2021/05/25/declarative-in-terms-of-react/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.