Scribd
Upload
62 views

4.2 React Foundation

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.

Uploaded by

Adesh Kumar chaturvedi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
62 views

4.2 React Foundation

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.

Uploaded by

Adesh Kumar chaturvedi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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