00:00:00
in this video i want to introduce you to
00:00:02
react and go over the core concepts i
00:00:04
think every react developer should aim
00:00:06
to learn and master when it came to
00:00:08
putting these concepts together i
00:00:10
selected them based on things you'll
00:00:11
need to build out most of the
00:00:13
functionality that you see in websites
00:00:14
today and things somebody interviewing
00:00:17
you would probably expect you to know
00:00:19
but before we get started i want to
00:00:20
quickly mention my react crash course
00:00:22
that's linked to the video description
00:00:24
in this course you will learn more about
00:00:26
the concepts i mentioned here while
00:00:28
building a fun notes application
00:00:30
so what is react
00:00:32
react is a javascript library for
00:00:34
building out user interfaces when you
00:00:36
look at websites like facebook netflix
00:00:38
and airbnb you're looking at uis built
00:00:41
in react react provides us with a set of
00:00:43
tools and structure for building out
00:00:45
these user interfaces and makes this
00:00:47
process much faster and easier
00:00:50
single page applications with react it's
00:00:53
very common to build out single page
00:00:55
applications so before we get into the
00:00:57
react concepts i want to quickly recap
00:01:00
single page applications and how they
00:01:01
work for anybody that's not familiar
00:01:03
with this concept yet so in traditional
00:01:05
websites we have a template for each
00:01:07
page on our website and return that
00:01:09
template back to the user whenever they
00:01:11
request it with single page applications
00:01:13
however we are working with one single
00:01:15
template and are simply updating all the
00:01:17
components within the dom
00:01:19
personally i think the term single page
00:01:21
application is a bit misleading as it
00:01:23
makes me think there is only one page in
00:01:25
our application when really we're just
00:01:27
using one single template and modifying
00:01:29
all the contents within it
00:01:31
components are what make up the visual
00:01:33
layer of our application and let us
00:01:35
split up our ui into independent
00:01:37
reusable pieces while how you build and
00:01:39
structure your application is completely
00:01:41
up to you traditionally each part of our
00:01:44
ui would be built out separately as its
00:01:46
own component and then added into a
00:01:48
parent component making up the ui for a
00:01:50
specific page a component is a
00:01:52
javascript class or function that
00:01:54
returns back some html well this is
00:01:56
actually something called jsx but more
00:01:58
on that in a second one thing to note
00:02:00
about components is that they can be
00:02:02
nested as deep as you want a component
00:02:04
can hold another component and that
00:02:06
component can hold more components
00:02:08
while i do think you should learn both
00:02:10
class-based components and function
00:02:11
based components at some point with the
00:02:13
addition of react hooks the trend is
00:02:15
shifting more towards using functional
00:02:17
components so if you're trying to decide
00:02:19
which to learn first you can probably
00:02:21
start with functional components
00:02:24
jsx instead of writing traditional html
00:02:28
tags we're going to be using something
00:02:29
called jsx which stands for javascript
00:02:32
xml jsx actually looks a lot like html
00:02:35
with some slight syntax differences and
00:02:37
also gives us some added functionality
00:02:39
take a look at this example and you'll
00:02:41
see how you can use the curly braces to
00:02:43
pass in variables and adding javascript
00:02:45
logic directly into your html
00:02:48
jsx tags are actually very similar to
00:02:50
html tags some notable differences are
00:02:53
things like class declarations which are
00:02:55
written as class name and how event
00:02:57
handlers are added browsers can't
00:02:59
actually read jsx so this code will
00:03:01
actually be run through a compiler and
00:03:03
convert it into traditional html and
00:03:05
javascript code once it's output in the
00:03:07
browser
00:03:09
react router
00:03:10
using a react router is how we can have
00:03:12
multiple pages in a single page
00:03:14
application with react we typically
00:03:16
handle url routing with something called
00:03:18
a router that keeps our ui in sync with
00:03:21
a url because we're not actually
00:03:23
changing pages the router will take care
00:03:25
of rendering out components into the dom
00:03:27
based on the current url
00:03:29
props
00:03:31
when you need to pass data down from one
00:03:32
component to another you can pass it
00:03:34
down as a prop a prop can be passed down
00:03:37
like a function parameter once a prop is
00:03:40
passed down into a component you can now
00:03:42
use that prop anywhere in the child
00:03:44
component
00:03:45
props can be passed down multiple layers
00:03:47
if needed the term for this is called
00:03:49
prop drilling prop drilling can get
00:03:51
messy so we'll talk about some solutions
00:03:52
to this in a minute
00:03:54
state
00:03:56
state is simply a javascript object used
00:03:58
to represent information in or about a
00:04:00
particular component traditionally we
00:04:03
use class based components to set our
00:04:04
state and its values but more modernly
00:04:06
we use react hooks like use state to
00:04:09
create a component state
00:04:11
so let's imagine for a second that we
00:04:13
have a list of notes that we want to
00:04:14
render out in our app we can set an
00:04:16
initial state and then map through that
00:04:18
state and output all that data in our
00:04:20
component we can also update our state
00:04:22
in this example we can set our initial
00:04:24
state as an empty array then we request
00:04:26
some data from our api and update that
00:04:29
state with new data this state update
00:04:31
will trigger our component life cycle
00:04:33
effect which we'll talk about next
00:04:36
the component life cycle
00:04:38
understanding the component life cycle
00:04:40
is a must for every react developer and
00:04:42
is probably one of the most common
00:04:44
interview question for junior developers
00:04:46
a react component has a life cycle that
00:04:48
it goes through and there are three main
00:04:50
phases that we need to know about in
00:04:52
this life cycle each component has a
00:04:54
mounting phase for when it's first being
00:04:56
added to the dom an updating phase for
00:04:58
when we are modifying something and that
00:05:00
component needs to update and an
00:05:02
unmounting phase for when this component
00:05:04
will be removed from the dom with class
00:05:07
components we have these three methods
00:05:09
to take care of these life cycle methods
00:05:11
we have component did mount component
00:05:13
did update and component will unmount
00:05:16
with functional components however we
00:05:18
have a method called use effect that
00:05:19
allows us to work with each part of a
00:05:21
component life cycle react hooks
00:05:24
react hooks only apply to functional
00:05:26
components but due to the popularity of
00:05:28
using function based components hooks
00:05:30
have become essential to learn in this
00:05:32
process
00:05:33
hooks let us add state and other
00:05:34
features without using class based
00:05:36
components before hooks functional
00:05:38
components could not hold any state
00:05:41
hooks are simply functions that allow us
00:05:43
to hook into and manage state
00:05:46
the two most common hooks that you'll
00:05:48
probably use when you first start are
00:05:50
going to be used which lets us set and
00:05:52
update our state in a component and use
00:05:54
effect that is simply a function that
00:05:56
allows us to manage our component life
00:05:58
cycle react gives us a whole list of
00:06:00
built-in hooks along with the ability to
00:06:02
create our own custom hooks
00:06:05
state management
00:06:07
while we can create and manage state
00:06:09
inside of our components there will
00:06:10
likely be a time when we need to create
00:06:12
some form of global state to make data
00:06:14
available across multiple components
00:06:16
think of something like holding data for
00:06:18
a logged in user you may need this user
00:06:21
across multiple components like your
00:06:23
header bar or a profile component and
00:06:25
passing this data down through props may
00:06:27
not be practical especially when this
00:06:29
information is updated somewhere inside
00:06:31
of those components we have several
00:06:33
options to handle this like using the
00:06:35
built-in context api or using a
00:06:37
third-party package like redux and many
00:06:40
others out there with these we are able
00:06:42
to create some form of global state and
00:06:44
use it across multiple components in our
00:06:46
component tree without having to deal
00:06:48
with prop drilling
00:06:50
the virtual dom
00:06:52
at some point in the process of learning
00:06:53
react you will want to have an
00:06:55
understanding of how the virtual dom
00:06:56
works understanding this will help you
00:06:58
understand and make sense of how react
00:07:00
builds and updates our dom and the
00:07:02
complete life cycle of a react component
00:07:04
in short react creates something called
00:07:06
a virtual dom which is a virtual
00:07:08
representation of the real dom when
00:07:10
we're updating our components we're
00:07:12
actually updating the virtual dom and
00:07:14
not the real dom using this method react
00:07:17
can find the most efficient way to
00:07:18
update the real dom by updating only
00:07:20
areas where changes have been made
00:07:22
without having to update the entire dom
00:07:25
the key prop
00:07:27
when it comes to rendering out a list of
00:07:29
data in your components there is one
00:07:30
thing you should be aware of and that is
00:07:32
the key prop each item in a dynamically
00:07:35
rendered list should contain the key
00:07:36
prop or else you'll get this annoying
00:07:38
air in the console
00:07:39
this prop should be unique and helps
00:07:41
react identify which items have been
00:07:43
changed added or removed so react knows
00:07:46
which part of the virtual dom to update
00:07:49
event listeners
00:07:50
handling events with react is very
00:07:52
similar to how we would do this in
00:07:54
traditional javascript with a few
00:07:56
differences in react we camelcase event
00:07:59
names and we pass in the function we
00:08:00
want to call directly in line between
00:08:02
two curly braces so there is no need for
00:08:04
methods like add eventlistener because
00:08:06
our javascript code and html are mixed
00:08:09
together
00:08:10
handling forms with react how we handle
00:08:13
forms is a little bit different from the
00:08:15
traditional method because we are trying
00:08:17
to keep all our information in some form
00:08:18
of state inside of our component
00:08:21
html elements such as input text area
00:08:24
and select typically maintain their own
00:08:26
state and update based on a user's input
00:08:28
with react however we typically add in
00:08:31
event listeners to each field and update
00:08:33
our component state whenever any one of
00:08:35
these inputs change so methods like on
00:08:37
change and on submit would directly
00:08:39
update our state and would be controlled
00:08:41
by our own functions instead of letting
00:08:43
the form handle all of this on its own
00:08:46
conditional rendering there is always a
00:08:48
chance that you will need to render out
00:08:50
some content conditionally depending on
00:08:52
other values inside of your application
00:08:54
think of something like a user's name
00:08:56
inside of a navigation bar depending on
00:08:58
the user's authentication status you
00:09:00
will either display the user's name or
00:09:02
display nothing one way we can go about
00:09:04
handling this is using the logical and
00:09:07
operator we can also use the inline if
00:09:10
else conditional operator if we want to
00:09:11
add in some extra logic in both of these
00:09:14
examples the rendered output will depend
00:09:16
on the conditions we provide
00:09:18
common commands there are three main
00:09:20
commands i want to mention here because
00:09:22
these are commands you will use in every
00:09:24
project we have the create react app
00:09:26
command which creates the boilerplate
00:09:28
files for a react application we have
00:09:30
the start command that starts up our
00:09:32
development server so we can view our
00:09:34
project right away and we have the run
00:09:36
build command that builds a directory
00:09:38
for a production build of our app for
00:09:40
deployment alright so that's my list of
00:09:42
core concepts every react developer
00:09:44
should master don't forget to subscribe
00:09:47
if you enjoyed this video and make sure
00:09:49
to check out the react crash course
00:09:50
linked in the video description if you
00:09:52
want to learn more
