Manoj Kumar

@vinaymavi

What is ReactJs?

ReactJS history 

ReactJS history 

ReactJS history 

ReactJS history 

"You need to be right before being good."

--Akim Demaille

ReactJS history 

ReactJS history 

ReactJS history 

ReactJS history 

Industry direction with ReactJS

Open source direction with ReactJS

Basic app rendering

Basic app rendering

  1. React library

  2. React DOM library

  3. A react component

  4. A DOM node to modify

Basic app rendering

>

Data flow between parent and child

Data flow

One-Way Data Flow

React apps are organized as a series of nested components. These components are functional in nature: that is, they receive information through arguments (represented in the props attribute) and pass information via their return values (the return value of the render function). This is called unidirectional data flow. Data is passed down from components to their children.

-- Manoj Kumar 😜

Data flow

>

Event handling

Event handling

>

Life cycle

Life cycle

console.log("EXECUTION START");

function helloworld(){
    var greeting = "Hello World"
    console.log(greeting);
}

helloworld();

setTimeout(2000,()=>{
   console.log("EXECUTION END")
})

START

helloworld

END

greeting-scope-start

greeting-scope-end

Life cycle

>

VDOM(Virtual DOM)

VDOM(Virtual DOM)

VDOM(Virtual DOM)

VDOM(Virtual DOM)

VDOM(Virtual DOM)

VDOM(Virtual DOM)

VDOM(Virtual DOM)

VDOM(Virtual DOM)

Element-1

Element-2

Element-3

VDOM(Virtual DOM)

As virtual DOM has an algorithm to diff the tree,

so question is 

how it got input? 

VDOM(Virtual DOM)

{
  "type": "h1",
  "key": null,
  "ref": null,
  "props": { "children": ["Hello ", "React", "!"] },
  "_owner": null,
  "_store": {}
}
{
  "type": "div",
  "key": null,
  "ref": null,
  "props": {
    "children": [
      {
        "type": "button",
        "key": null,
        "ref": null,
        "props": { "children": "Update" },
        "_owner": null,
        "_store": {}
      },
      {
        "type": "div",
        "key": null,
        "ref": null,
        "props": { "className": "friend-list" },
        "_owner": null,
        "_store": {}
      }
    ]
  },
  "_owner": null,
  "_store": {}
}

VDOM(Virtual DOM)

React never reads from the DOM

VDOM(Virtual DOM)

Time to feedback

http://bit.ly/vm-reactjs

ReactJS

By Vinay Mavi

Made with Slides.com

ReactJS

ReactJS training slides contain basic of ReactJS including * Basic app rendering * Data flow between parent and child * Event registration and handling * VDOM(Virtual DOM) working * React 16 vs 15

  • 426

More from Vinay Mavi