Every React Concept Explained in 12 Minutes

Code Bootcamp
1.6M views • March 18, 2024

My React course: https://reactbootcamp.dev

Chapters

0:00 - Intro
0:11 - Components
0:29 - JSX
1:02 - Curly Braces
1:29 - Fragments
1:49 - Props
2:20 - Children
2:54 - Keys
3:27 - Rendering
4:34 - Event Handling
5:05 - State
5:54 - Controlled Components
6:31 - Hooks
7:21 - Purity
8:03 - Strict Mode
8:22 - Effects
9:03 - Refs
9:30 - Context
10:10 - Portals
10:41 - Suspense
11:06 - Error Boundaries
11:35 - Learn More

0:00 react is a JavaScript library full of
0:02 fancy terms like reconciliation
0:04 composition and error boundaries what do
0:07 all these terms actually mean let's
0:09 start from the beginning with components
0:11 components are the building blocks of
0:13 every react app they allow us to make
0:15 all the visible parts of our
0:16 applications like buttons inputs or even
0:19 entire Pages just like Legos you can use
0:22 components as many times as you want
0:25 every react component is a JavaScript
0:27 function that returns markup but since
0:29 react is is a JavaScript library react
0:31 components don't return HTML markup they
0:34 actually return something called jsx
0:37 which is Javascript in Disguise jsx is
0:40 optional but the alternative way to make
0:42 user interfaces is with the function
0:44 create element which gets annoying to
0:46 write pretty fast so everyone just uses
0:49 jsx since jsx is Javascript you can't
0:52 write attributes like you would in HTML
0:55 you have to write them in the camel case
0:57 style that means HTML attributes like
1:00 class become class name unlike HTML
1:04 which is static and unchanging the
1:06 benefit of using react is that you can
1:09 use Dynamic JavaScript values in your
1:11 jsx if you have data you can display it
1:14 in your jsx using curly braces curly
1:17 braces accept values like strings and
1:19 numbers directly you can use them to
1:21 make your attributes Dynamic and you can
1:24 style react elements using a JavaScript
1:27 object within the curly braces since
1:29 JavaScript functions can only return one
1:31 thing in react you can only return one
1:34 parent element from a component so you
1:36 can't do this without getting a big
1:38 error we could fix this by wrapping
1:40 these components in a div but maybe you
1:43 don't want to add another element to the
1:44 page instead you can use an empty
1:47 component called a react fragment okay
1:50 but what if I want to pass data into
1:52 another component for that you use
1:54 something called props to make a prop
1:56 create a name on the component you want
1:58 to pass data to and set it equal to some
2:01 value and that's it you can then use
2:03 that prop in the component you passed it
2:05 to props refers to properties on an
2:08 object which is what you get in the
2:10 parameters of each component to use the
2:12 prop take it from the object like a
2:14 normal JavaScript property think of them
2:16 like custom attributes you can add to
2:18 any component so wait can you pass
2:21 anything as a prop yes you can you can
2:24 even pass other components as props
2:26 using the children prop if you make
2:28 opening and closing tags for a component
2:31 you can pass other components in between
2:33 them these pass components are called
2:35 children and you can access them on the
2:38 children promp of the parent component
2:40 and it's great for something called
2:42 composition which is about organizing
2:44 our react components in the most optimal
2:46 way the children prop is really useful
2:48 for creating layout components when you
2:50 want your children to have the same
2:52 common layout the key prop is another
2:55 built-in prop to react and no unlike the
2:58 name implies it doesn't unlock anything
3:00 interesting the key prop is used so
3:03 react can tell one component apart from
3:05 another usually when you're creating a
3:08 list with the map function a key is just
3:11 a unique string or number to identify a
3:13 component you'll usually know when you
3:15 need to add a key because react will
3:17 warn you in the console fortunately if
3:20 you don't have a unique value for each
3:22 item you can always use the current
3:24 index from the map function but how does
3:27 react take all my amazing code and make
3:30 it display something in the browser that
3:32 process is called rendering react does
3:35 this for us but it's important to know
3:37 how it works because sometimes we can do
3:40 a bad thing and cause it to infinitely
3:42 reender which crashes our app the way
3:45 react knows how and when to render our
3:48 application is using something called
3:50 the virtual Dom also known as the vdom
3:54 okay but what does Dom mean Dom stands
3:56 for document object model which is what
3:59 every browser uses to model all the HTML
4:02 elements on a web page and when you draw
4:05 it out it kind of looks like a tree
4:07 here's the complete rendering process in
4:10 react if the state of our react app
4:12 changes then react updates the virtual
4:14 Dom which is quicker to update than the
4:16 real Dom then react uses a process
4:19 called diffing to compare the updated
4:22 virtual Dom to a previous version to see
4:24 what's changed once it sees what's
4:27 different react uses a process called
4:29 reconcil iation to update the real Dom
4:32 with the changes that it found whenever
4:34 someone uses our app tons of events take
4:37 place like clicks Mouse movements and
4:39 key presses many of which we need to
4:42 detect event handling is how we take
4:44 those user events and do something with
4:46 them react has a lot of built-in events
4:48 such as onclick onchange and onsubmit
4:51 these three events are ones you'll
4:53 probably use the most if we want to
4:55 alert users when a button is clicked we
4:58 would add the onclick prop to the button
5:00 and connect it to a function that would
5:03 show that
5:04 alert to manage data in our react apps
5:07 we need to use State not that kind of
5:09 state though state is like a snapshot
5:12 from a camera it's a picture of our app
5:14 at any given time to manage State we
5:17 also can't use JavaScript variables they
5:19 don't cause our app to render instead we
5:22 use special functions like use State and
5:24 use reducer use State takes an argument
5:28 that serves as the starting value value
5:30 of the state variable which is likes in
5:32 this example and returns an array
5:36 containing the state variable and a
5:38 function to update that state using our
5:41 button example we could also update the
5:43 number of times the button's been
5:45 clicked with the update function set
5:47 clicks and display it in the button with
5:51 the state variable
5:53 likes controlled components use State
5:55 values to have more predictable Behavior
5:59 here's an example of a controlled
6:00 component where the value typed into the
6:03 input is being put into State and
6:05 controlled by the state variable value
6:09 here's how it works the user types and
6:11 set value puts what the user typed into
6:13 State the state value is then updated
6:17 and finally the input uses that updated
6:20 State as its value controlled components
6:23 are a great pattern to use because if we
6:25 want to change the component's behavior
6:27 we just need to change the state that
6:29 controls it UST state is an example of a
6:32 react hook which allow us to hook into
6:35 features such as state within function
6:37 components there are five main types of
6:40 hooks State hooks like use State and use
6:42 reducer help you manage state within
6:44 react components context hooks such as
6:47 use context let you Ed data pass through
6:50 react context ref hooks such as use ref
6:54 let you reference things like HTML
6:56 elements effect hooks like use effect
6:59 let you connect with external systems
7:01 like browser apis and performance hooks
7:04 like use memo and use callback which can
7:07 improve performance by preventing
7:08 unnecessary work you'll use all of these
7:11 hooks at some point but the majority of
7:13 the time you'll likely use just three
7:15 hooks in your react components use State
7:18 use effect and use ref when you think of
7:21 the word purity you might think of
7:23 something like purified water Purity is
7:26 a term used to describe how react
7:28 components should work work but this
7:30 type of Purity is more like how
7:32 mathematical formulas are pure pure
7:34 react components mean that the same
7:36 input should always return the same
7:38 output to keep a react component pure
7:41 they should only return their jsx and
7:45 not change any objects or variables that
7:47 existed before rendering the cup
7:49 component in this example is impure
7:52 because it changes the variable count
7:54 during render which exists outside the
7:57 component this leads to the jsx have
7:59 having the wrong output when it is used
8:01 more than once to help make sure we
8:04 don't run into errors like this we can
8:06 use something called strict mode strict
8:08 mode is a special component which tells
8:10 us about mistakes as we develop our
8:12 react apps it's really convenient
8:14 because it's just a component we usually
8:16 wrap around our app component and it'll
8:19 tell us when we really shouldn't do
8:21 something but what if we need to do
8:23 something outside our react app your app
8:26 might need to talk with the browser API
8:28 or make a request to a server if you do
8:31 have an external system you're going to
8:33 need a way to step outside of react
8:36 effects are code that reach outside of
8:38 our react application usually effects
8:41 also known as side effects can be done
8:43 within event handlers for example to
8:45 make an HTTP request when you submit a
8:48 form or click on a button if you can't
8:51 run your effects within an event handler
8:53 then you can run them using the use
8:55 effect hook for example a common pattern
8:58 is to fetch dat data when components
9:00 first load with the use effect hook like
9:04 effects sometimes you want to step
9:05 outside react and work directly with the
9:08 Dom to reference an actual Dom element
9:11 you can use what's called a ref you can
9:13 create a ref with the Ed ref hook and to
9:16 get access to a Dom element use the ref
9:19 prop on any react element for some tasks
9:22 such as focusing an input it's much
9:24 easier to reference the actual Dom
9:26 element instead of attempting to do it
9:28 the react way
9:30 context is a powerful way to pass prop
9:32 data through your apps components most
9:35 react apps have tons of nested
9:37 components to get data down multiple
9:39 levels involves passing the same props
9:42 through components that don't actually
9:44 need it context lets us jump through the
9:47 component tree and use data at any level
9:49 without making props to use context you
9:52 first create context in a parent
9:55 component then wrap your parent
9:57 component in a special context component
9:59 called a context provider put the data
10:02 you want to pass down on the provider
10:05 and finally access that data in any
10:07 child component with the used context
10:10 hook portals on the other hand are kind
10:13 of like context but for components
10:15 portals let you move react components
10:17 into any HTML element you select portals
10:21 are great for components that can't be
10:22 displayed properly because of their
10:24 parents component styles for example for
10:26 displaying modals drop-down menus and
10:29 tool tips to create a portal just use
10:32 the create portal function pass your
10:34 component to it and choose the HTML
10:37 element where you'd like your react
10:39 component to appear suspense is a
10:41 special component that helps you handle
10:43 loading a component or its data suspense
10:46 is helpful for components that take some
10:48 time to fetch data it provides a better
10:51 user experience to show a fallback
10:53 component like a loading spinner until
10:55 the data is available instead of nothing
10:58 suspense is also useful if you're lazily
11:00 loading a component which lets us load a
11:03 component only when it's needed since
11:06 react apps are all JavaScript errors
11:08 that happen during rendering can totally
11:10 break your app airor boundaries are
11:12 components that let you catch app
11:14 breaking errors and show a fallback
11:16 component to tell the user about what
11:18 happened for example our app will crash
11:21 if we run this code because it throws an
11:23 error when there's no user to prevent
11:25 our app from crashing we'll first add an
11:28 error boundary to display a fallback
11:30 component with a more helpful error
11:32 message to be displayed to the user now
11:35 if you really want to dive deep into
11:37 react I've put together a complete boot
11:40 camp to help you master every one of
11:41 these Concepts from front to back you
11:44 can get started now at react boot camp.
11:47 I hope you learned a lot in this video
11:49 and I'll see you in the next one