Getting Started

Before You start learning first read this post where i explained very low level Explaining React like i don't know anything

No need to set up any dev environment for now Just use the Live Editor.

Simple React Component

function HelloWorld(){
  return <h1>Hello World</h1>
}

what above code does is returning the h1 element.

In the above code, we used jsx which look likes html but it’s not html.

Jsx means javascript xml where we write html inside the JavaScript.You can still write React without Jsx it’s just an abstraction to make the code more readable.

This is how we write React without JSX.

function HelloWorld() {
  return React.createElement(
    "h1",
    null,
    "Hello World"
  );
}

What is Virtual Dom

  • Virtual dom the name it says I’m not really it’s just a javascript object.

  • By using the Virtual dom object we are mutating the real dom or creating the real dom.

Play it now.

function HelloWorld(){
 
 return <h1>Hello World</h1>;
 }

Output

Hello World