Scribd Logo
Upload

Welcome to Scribd!

  • 36 views

    4.2 React Foundation

    Uploaded by

    Adesh Kumar chaturvedi
    This document discusses the challenges of directly manipulating the DOM to build dynamic web applications and how frontend frameworks address these challenges. It introduces state management and shows how frameworks like React make updates efficient by comparing the current DOM to a virtual DOM representation of the desired state rather than re-rendering the entire DOM on every change. It provides an example of building a basic TODO application using direct DOM manipulation versus letting React handle the updates automatically based on state changes.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    4.2 React Foundation

    Uploaded by

    Adesh Kumar chaturvedi
    36 views24 pages
    This document discusses the challenges of directly manipulating the DOM to build dynamic web applications and how frontend frameworks address these challenges. It introduces state management and shows how frameworks like React make updates efficient by comparing the current DOM to a virtual DOM representation of the desired state rather than re-rendering the entire DOM on every change. It provides an example of building a basic TODO application using direct DOM manipulation versus letting React handle the updates automatically based on state changes.

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document discusses the challenges of directly manipulating the DOM to build dynamic web applications and how frontend frameworks address these challenges. It introduces state management and shows how frameworks like React make updates efficient by comparing the current DOM to a virtual DOM representation of the desired state rather than re-rendering the entire DOM on every change. It provides an example of building a basic TODO application using direct DOM manipulation versus letting React handle the updates automatically based on state changes.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    36 views24 pages

    4.2 React Foundation

    Uploaded by

    Adesh Kumar chaturvedi
    This document discusses the challenges of directly manipulating the DOM to build dynamic web applications and how frontend frameworks address these challenges. It introduces state management and shows how frameworks like React make updates efficient by comparing the current DOM to a virtual DOM representation of the desired state rather than re-rendering the entire DOM on every change. It provides an example of building a basic TODO application using direct DOM manipulation versus letting React handle the updates automatically based on state changes.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 24

    4.

    2 - Why frontend frameworks


    Reconcilers and Intro to React
    Jargon - DOM Manipulation
    What happens when you scroll down
    Jargon - DOM Manipulation
    Jargon - DOM Manipulation

    getNextPosts

    New Items get pushed


    to the DOM
    Jargon - DOM Manipulation

    getNextPosts

    New Items get pushed


    to the DOM

    This is called DOM manipulation


    DOM manipulation is very hard to write as a developer
    Making dynamic websites, with the primitives that DOM provides you is very hard
    Let’s try to create a TODO application using DOM manipulation

    document.createElement
    document.appendChild
    element.setAttribute
    element.children

    https://gist.github.com/hkirat/e61655a7d93ce06810488be402adebee
    Let’s try to create a TODO application using DOM manipulation

    JS

    HTML
    Let’s try to create a TODO application using DOM manipulation

    Problem with this approach - Very hard to add and remove elements
    No central State

    What if there is a server where these todos are put


    What if you update a TODO from your mobile app
    You will get back the new array of TODOs on the frontend
    How will you update the DOM then?
    You only have a addTodo function
    You don’t have an updateTodo or removeTodo function yet
    Let’s try to create a TODO application using DOM manipulation

    What do I mean when I say State

    State
    Let’s try to create a TODO application using DOM manipulation

    What do I mean when I say State

    If you can write a function, that takes this state as an input


    and creates the output on the right, that is much more
    powerful that our original approach
    Let’s try to create a TODO application using DOM manipulation

    What do I mean when I say State

    Fn
    Let’s try to create a TODO application using DOM manipulation

    What do I mean when I say State


    Let’s try to create a TODO application using DOM manipulation

    Dumb Solution

    Fn

    1. Clear the parent element


    2. Call addTodo on every element

    https://gist.github.com/hkirat/cb9d7e2f75617ac281427276e20a691c
    Let’s try to create a TODO application using DOM manipulation

    Better Solution

    Don’t clear the DOM upfront, update it based on what has changed.

    Question is, how does it calculate what all has changed?


    Has a todo been marked as complete?
    Has a todo been removed from the backend?
    Let’s try to create a TODO application using DOM manipulation

    Better Solution

    Don’t clear the DOM upfront, update it based on what has changed.

    Question is, how does it calculate what all has changed?


    Has a todo been marked as complete?
    Has a todo been removed from the backend?

    By remembering the old todos in a variable (Virtual DOM)


    Let’s try to create a TODO application using DOM manipulation

    Better Solution (Take home assignment)

    https://gist.github.com/hkirat/ed34df967f162d152e35537cb8215144
    What is the easiest way to create a dynamic frontend website?
    1. Update a state variable
    2. Delegate the task of guring out di to a hefty function
    3. Tell the hefty function how to add, update and remove elements
    fi
    ff
    What is the easiest way to create a dynamic frontend website?
    1. Update a state variable
    2. Delegate the task of guring out di to a hefty function
    3. Tell the hefty function how to add, update and remove elements
    fi
    ff
    What is the easiest way to create a dynamic frontend website?
    1. Update a state variable
    2. Delegate the task of guring out di to a hefty function
    3. Tell the hefty function how to add, update and remove elements
    fi
    ff
    What is the easiest way to create a dynamic frontend website?
    1. Update a state variable
    2. Delegate the task of guring out di to a hefty function
    3. Tell the hefty function how to add, update and remove elements
    fi
    ff
    Usually done by the FE developer

    What is the easiest way to create a dynamic frontend website?


    1. Update a state variable
    2. Delegate the task of guring out di to a hefty function
    3. Tell the hefty function how to add, update and remove elements
    fi
    ff
    Usually done by the React

    What is the easiest way to create a dynamic frontend website?


    1. Update a state variable
    2. Delegate the task of guring out di to a hefty function
    3. Tell the hefty function how to add, update and remove elements
    fi
    ff
    Let’s see how you would do the same thing in React

    npm create vite@latest

    You might also like