React without JSX

abhi — Sat, 24 Dec 2022 18:16:11 +0000

So here I will show you how to create use react without JSX. when you will go to any tutorial for the first time they will teach you about JSX first and then component and all the cool stuff.

But do you know that when react was created it was using plain JavaScript object to create components and all...

We will see that in this session:-

let's say you have a html file with a div tag like below

now you want to create few element and assign them to root, In plain js will do like this

const h1 = document.createElement("h1");
h1.innerHTML = "Hello world!";
const root = document.getElementById("root");
root.appendChild(h1);

And it will render it on browser perfectly fine.

Now coming to main topic how we will do the same for react using plain javascript


const h1 = React.createElement("h1",{},"Hello world");
const root = ReactDOM.createRoot("root");

root.render(h1);

hurrah we have create one react element using plain js

now if you want to add multiple element to root you can do it by simply doing this

const firstName = React.createElement("h2",{id:fName,"abc"};
const lastName = React.createElement("h2",{id:lName,"xyz"};

root.render([firstName,lastName]);

Don't mind it, Bind it Re

abhi — Tue, 23 Feb 2021 15:45:43 +0000

I have been struggle a lot in order to understand the concept of this,bind,apply and call concepts of javascript.Since I am from Java Background this keyword was bit confusing.

Here I will explain about call method in neat and clean way....
let's say we have array of objects and wants to apply some method on each and every object
in traditional way we will iterate array and call method and pass argument for every object.

var list = [{ length: 20, breadth: 22 }, { length: 5, breadth: 6 },{ length: 12, breadth: 8 }, { length: 13, breadth: 9 }, { length: 7, breadth: 4 }]; function calculateAreaRectangle(length,breadth) { console.log(length * breadth); } list.forEach(element => { calculateAreaRectangle(element.length,element.breadth); })

In this example we are calling calculateAreaRectangle() method on each and every obejct by query every object and getting length and breadth.

It can be done by just passing object which will be refernced as this in calculateAreaRectangle() and inside calculateAreaRectangle use this.length*this.breadth and it will do the same
below example will describe it

var list = [{ length: 20, breadth: 22 }, { length: 5, breadth: 6 },{ length: 12, breadth: 8 }, { length: 13, breadth: 9 },{ length: 7, breadth: 4 }]; function calculateAreaRectangle() { console.log(this.length * this.breadth); } list.forEach(element => { calculateAreaRectangle.call(element); })

Now let's discuss about THIS keyword we are going to use same example along with global variable length and breadth...

THANKS FOR READING

DEV Community: abhi

React without JSX

Don't mind it, Bind it Re