React For The Relaxation Of Us: The 10 Days of React JS (Day 1)

by birtanpublished on July 3, 2020

[Music]

hello everyone my new premium react

course just launched this morning and to

celebrate I'm going to be sharing the

first chapter here on YouTube so every

day for the next 10 days I'll post a new

lesson and altogether this forms the

first chapter which is called the ten

days of react I hope this series helps

you learn the incredibly in-demand react

library without further ado enjoy day

number one hello everyone in this video

we're going to ask ourselves where do we

begin we're actually going to answer

that by answering two other important

questions so number one what is react

and number two what problem does react

solve so question number one is really

easy to answer

what is react well we can see from the

official react website that react is a

JavaScript library for building user

interfaces so that's what react is and

we know that we want to learn react

because it's incredibly popular and

companies that are hiring developers

want us to know it but why why do they

want us to know it why is react so

popular well that brings us to the

actual crucial question that we're going

to spend this entire video on and that

is what problem does react solve this

question is so important because if you

don't know what problem a tool is

solving you're setting yourself up for

failure from the very beginning you

fundamentally will not understand the

tool I've seen this time and time again

if a student doesn't begin by seeing why

we use react they'll usually give up

learning it because it seems like too

much work for no real payoff you'll see

this a lot with burnt out or frustrated

developers they talk negatively about

react

but when you hear them try to describe

why the industry uses react in the first

place you can tell they have no clue

what they're talking about so of course

they're not going to understand or enjoy

react and that's not their fault it's

the fault of teachers and learning

materials but this course is designed

from the ground up to be different we

take the time to understand why we're

doing what we're doing and this allows

people who might have otherwise

struggled with react to finally

understand it hence the name of the

course react for the rest of us because

you don't need to be a genius to get

react you just need an actual teacher

instead of someone reading off

microwavable popcorn instructions to you

so in this first video we are not going

to actually touch react at all instead

we're going to look at two different

ways we can create user interfaces with

JavaScript without react or without a

library whatsoever right just plain

vanilla JavaScript we're going to look

at the pros and cons for both of these

coding approaches and then walk through

how react fits into this picture and how

react gives us the pros of both

approaches without the cons of either

approach this will show us the problem

that react is solving and seeing that

will make learning react 100 times

easier not only because you'll have a

frame of reference in a context for

everything but because by seeing why

react is so special you'll have a

motivation and reason to power through

the challenge of learning it right

you'll feel compelled to take advantage

of react in your projects so by the end

of this video we'll have a general idea

of why react is useful and then in our

very next video we can actually get our

hands dirty and start using react at

this point let's jump into the real

action of this lesson so the to coding

approaches that we're going to look at

are what I would call the Dom focused

approach and the data or declarative

view approach now I've actually set up a

working code pettings

ample for each one of these approaches

if you'd like to dig through my example

code you can find the links to these

code pens and the resources for this

lesson but you do not need to do that

you can just watch me talk about the

code in this very video so in this tab

here's one approach in this tab here's

the other approach and the actual

application is identical so you can see

down here I can fill out this form and

say walk the dog and create that item I

can create another item feed the cat buy

vegetables and then if I want to delete

one if I want to delete feed the cat you

just click delete if I want to update

one I can say buy vegetables and fruits

you get the idea and then the same thing

is true for this coding approach as well

right this is the exact same application

it's just coded in a different fashion

so I can say feed the cat walk the dog

buy groceries so the application itself

is the same but they were created using

very different philosophies or

approaches and consequently they each

have their own unique set of pros and

cons or strengths and weaknesses the key

point here is that neither approach is

ideal so let's take this first example

what I'm calling the Dom focused

approach and let's break down its

problems by the way Dom stands for

document object model and that just

refers to the web browsers model of the

actual content or elements on the page

so with this coding approach these

actual Li or list item elements these

are the source of truth or source of

data for our application so for example

this javascript code let me scroll down

a bit this listens for the form element

being submitted right when you create a

new item and instead of adding that new

item to a raw JavaScript array of data

well this Dom focused approach literally

just adds a new li list item element to

this unordered list or UL element and

the same is true for when you click on

one of the delete buttons instead of

remove

item from a raw JavaScript array of data

we are just literally removing that li

element from this ul element and then

because I want to persist our data even

if you reload or refresh the page right

so even if I click refresh you can see

that our two items are still here to

make that happen I'm using the web

browsers local storage feature so each

time you create a new item or edit or

delete an existing item I'm saving all

of our data into local storage and then

when you first load up this page or

refresh the page I'm loading or pulling

that data from local storage now this

need to save and load data begins to

really show the problems with this Dom

focused approach because we don't want

to save the actual HTML for this entire

li or list item element right we only

want to save the actual text values for

each item so you can see in our Java

Script I'm performing this weird awkward

dance with the Dom I'm saying let's

begin with our list our unordered list

select all of its list items and then

I'm going to loop through each one of

them and I'm going to look for the span

element inside of them that has a class

of value and that's gonna get me just

this actual piece of the element instead

of the entire element and then I need to

say grab the inner HTML right the actual

text or value for that item and then

that way I actually do have an array of

the items and I can save those into

local storage now technically this

approach works but it's a nightmare for

so many different reasons primarily

because working with the Dom is

relatively slow even on the fastest

computers in the world whereas even on

older slow computers the browser's

ability to work with raw JavaScript data

is blazing fast so whenever possible if

we can avoid working with the Dom we

absolutely should avoid working with it

so it sort of goes without saying that

it's not ideal for the Dom to be our

source of truth or source of data so

that's the first problem with this

approach the second huge problem is

that the code that makes up our user

interface is fragmented all over the

place right some of its here some of its

here some of its here and we end up

having to babysit tons of different

elements manually instead of just having

one convenient centrally located place

for our interface now yes this approach

does work for very very simple

applications but as soon as the

complexity of your project grows at all

it becomes a nightmare to have to

mentally keep track of where you are

manually babysitting each element in

different locations throughout your code

it's just a recipe for messy spaghetti

code and an unnecessarily stressed out

life for you as a developer so that's

the first of the two approaches that

we're going to look at in this lesson

now let's change gears and look at the

second approach or the data or

declarative view approach and again

remember that neither of these two

approaches are using react or any

library they are both just plain vanilla

JavaScript so in this approach we can

see how it gets its name around line

number 19 or 20 so I've created this

function named render and then here in

one centralized location in the code our

entire user interface is declared

alright we have the form with the input

field we have the unordered list inside

the unordered list we're looping through

our data and we're outputting a Li or

list item element for each to-do item

and when the user tries to create a new

item with this form or when this form is

submitted

you can see I'm calling a function named

submit handler so if we go take a look

at that function you can see that this

function does not babysit the Dom or

directly worried about modifying the Dom

in any way all it does is take a raw

JavaScript array of data and push a new

item on to that array right and then

once we've done that I'm calling a

function named save data which is going

to save it to local storage but then

also the save data function is going to

call the render function

and I'm taking the same approach for

when someone clicks on the delete button

for one of the items instead of manually

babysitting any of the elements I'm just

going to remove that item from our raw

array of data and then run the render

function again so the idea is that

whenever we modify our apps data we call

that render function and render has our

entire user interface declared in one

convenient location now at first glance

this approach might seem way better than

the first approach the Dom based

approach right this data or declared a

view approach lets us keep things more

organized and we don't have to do any

awkward dancing with the Dom because the

Dom is not our source of truth our raw

JavaScript data is the source of truth

however there is one huge problem with

this approach that is even bigger than

any of the problems with the first Dom

based approach so yes it's nice and

convenient to have our interface defined

in this one centralized place but that

convenience comes at a price

because now whenever any data changes in

our app we are rear-ending the entire

application and remember that working

with the DOM and telling the Dom to

re-render or repaint content is very

slow so even if we really only need to

update the text for one item or just

delete one of these items our entire

application including the form and

potentially hundreds of items they're

all going to get rear-ended and that is

a performance and speed nightmare and

it's going to result in an application

that feels slow unresponsive and just

weird for the end user now if we

contrast this with our first approach

the Dom focused approach in this case

when we added a new element we only

rendered that one specific new element

or when we deleted an element we

actually just removed that one Li list

item from the page right we only

manipulated the one tiny piece of the

Dom that actually needed to be

manipulated because it was now different

that is what we want to do that's what

creates fast and responsive feeling

front

and applications however that's really

the only area where this Dom focused

approach excelled everything else about

this approach feels messy and

unorganized so at this point we're

conflicted because aside from that one

huge performance issue with the second

approach it seems like the second

approach is the clear winner so the

question becomes is there any way that

we can get the best of both worlds of

these two approaches is there any way

that we can have our cake and eat it –

well yes we can and this is exactly

where react comes into play react is

closer to the second or the data

declarative view approach so with react

imagine if we could declare our

interface in one centralized place and

then whenever the data for our app

changed instead of the entire interface

getting rear-ended somehow magically

only the exact tiny pieces of the Dom

that actually need to display new or

changed content only those little pieces

actually get manipulated in the DOM well

that's react in a nutshell now yes

react is not the only library that does

this there are many libraries that offer

us this same approach like angular and

view j/s but in my opinion react is the

most beautifully simple solution I mean

it's even in the very name of the

library react we can just worry about

our apps data and our user interface

will automatically react to that data so

big picture that's the problem that

react solves it lets us keep our data

outside of the Dom so that working with

the data is simple and blazingly fast

and as our data changes it reacts by

rear-ending only the exact tiny pieces

of the Dom that actually need to be

rear-ended because they are now

different trust me it might not seem

like much but this is an incredibly

powerful approach and yes it will take

some time and practice but throughout

this course we are going to wrap our

minds around this react way of doing

things and it's going to completely

change the way we build interfaces for

the better so now that we have a frame

of reference for why we should use react

other than just because it's popular we

are in a great position to move forward

and in our very next lesson we are going

to get our hands dirty and actually

start using react together step by step

let's keep things rolling I'm so excited

to get started with you and I'll see you

in the next lesson to get immediate and

lifetime access to the full 15 hour

video course you can find a heavily

discounted coupon link in the

description for this video thank you so

much for watching and take care

[Music]

Be the first to comment “React For The Relaxation Of Us: The 10 Days of React JS (Day 1)”

Your email address will not be published.

There are no comments yet.