Every React Concept Explained in 12 Minutes

react is a JavaScript library full of

fancy terms like reconciliation

composition and error boundaries what do

all these terms actually mean let's

start from the beginning with components

components are the building blocks of

every react app they allow us to make

all the visible parts of our

applications like buttons inputs or even

entire Pages just like Legos you can use

components as many times as you want

every react component is a JavaScript

function that returns markup but since

react is is a JavaScript library react

components don't return HTML markup they

actually return something called jsx

which is Javascript in Disguise jsx is

optional but the alternative way to make

user interfaces is with the function

create element which gets annoying to

write pretty fast so everyone just uses

jsx since jsx is Javascript you can't

write attributes like you would in HTML

you have to write them in the camel case

style that means HTML attributes like

class become class name unlike HTML

which is static and unchanging the

benefit of using react is that you can

use Dynamic JavaScript values in your

jsx if you have data you can display it

in your jsx using curly braces curly

braces accept values like strings and

numbers directly you can use them to

make your attributes Dynamic and you can

style react elements using a JavaScript

object within the curly braces since

JavaScript functions can only return one

thing in react you can only return one

parent element from a component so you

can't do this without getting a big

error we could fix this by wrapping

these components in a div but maybe you

don't want to add another element to the

page instead you can use an empty

component called a react fragment okay

but what if I want to pass data into

another component for that you use

something called props to make a prop

create a name on the component you want

to pass data to and set it equal to some

value and that's it you can then use

that prop in the component you passed it

to props refers to properties on an

object which is what you get in the

parameters of each component to use the

prop take it from the object like a

normal JavaScript property think of them

like custom attributes you can add to

any component so wait can you pass

anything as a prop yes you can you can

even pass other components as props

using the children prop if you make

opening and closing tags for a component

you can pass other components in between

them these pass components are called

children and you can access them on the

children promp of the parent component

and it's great for something called

composition which is about organizing

our react components in the most optimal

way the children prop is really useful

for creating layout components when you

want your children to have the same

common layout the key prop is another

built-in prop to react and no unlike the

name implies it doesn't unlock anything

interesting the key prop is used so

react can tell one component apart from

another usually when you're creating a

list with the map function a key is just

a unique string or number to identify a

component you'll usually know when you

need to add a key because react will

warn you in the console fortunately if

you don't have a unique value for each

item you can always use the current

index from the map function but how does

react take all my amazing code and make

it display something in the browser that

process is called rendering react does

this for us but it's important to know

how it works because sometimes we can do

a bad thing and cause it to infinitely

reender which crashes our app the way

react knows how and when to render our

application is using something called

the virtual Dom also known as the vdom

okay but what does Dom mean Dom stands

for document object model which is what

every browser uses to model all the HTML

elements on a web page and when you draw

it out it kind of looks like a tree

here's the complete rendering process in

react if the state of our react app

changes then react updates the virtual

Dom which is quicker to update than the

real Dom then react uses a process

called diffing to compare the updated

virtual Dom to a previous version to see

what's changed once it sees what's

different react uses a process called

reconcil iation to update the real Dom

with the changes that it found whenever

someone uses our app tons of events take

place like clicks Mouse movements and

key presses many of which we need to

detect event handling is how we take

those user events and do something with

them react has a lot of built-in events

such as onclick onchange and onsubmit

these three events are ones you'll

probably use the most if we want to

alert users when a button is clicked we

would add the onclick prop to the button

and connect it to a function that would

show that

alert to manage data in our react apps

we need to use State not that kind of

state though state is like a snapshot

from a camera it's a picture of our app

at any given time to manage State we

also can't use JavaScript variables they

don't cause our app to render instead we

use special functions like use State and

use reducer use State takes an argument

that serves as the starting value value

of the state variable which is likes in

this example and returns an array

containing the state variable and a

function to update that state using our

button example we could also update the

number of times the button's been

clicked with the update function set

clicks and display it in the button with

the state variable

likes controlled components use State

values to have more predictable Behavior

here's an example of a controlled

component where the value typed into the

input is being put into State and

controlled by the state variable value

here's how it works the user types and

set value puts what the user typed into

State the state value is then updated

and finally the input uses that updated

State as its value controlled components

are a great pattern to use because if we

want to change the component's behavior

we just need to change the state that

controls it UST state is an example of a

react hook which allow us to hook into

features such as state within function

components there are five main types of

hooks State hooks like use State and use

reducer help you manage state within

react components context hooks such as

use context let you Ed data pass through

react context ref hooks such as use ref

let you reference things like HTML

elements effect hooks like use effect

let you connect with external systems

like browser apis and performance hooks

like use memo and use callback which can

improve performance by preventing

unnecessary work you'll use all of these

hooks at some point but the majority of

the time you'll likely use just three

hooks in your react components use State

use effect and use ref when you think of

the word purity you might think of

something like purified water Purity is

a term used to describe how react

components should work work but this

type of Purity is more like how

mathematical formulas are pure pure

react components mean that the same

input should always return the same

output to keep a react component pure

they should only return their jsx and

not change any objects or variables that

existed before rendering the cup

component in this example is impure

because it changes the variable count

during render which exists outside the

component this leads to the jsx have

having the wrong output when it is used

more than once to help make sure we

don't run into errors like this we can

use something called strict mode strict

mode is a special component which tells

us about mistakes as we develop our

react apps it's really convenient

because it's just a component we usually

wrap around our app component and it'll

tell us when we really shouldn't do

something but what if we need to do

something outside our react app your app

might need to talk with the browser API

or make a request to a server if you do

have an external system you're going to

need a way to step outside of react

effects are code that reach outside of

our react application usually effects

also known as side effects can be done

within event handlers for example to

make an HTTP request when you submit a

form or click on a button if you can't

run your effects within an event handler

then you can run them using the use

effect hook for example a common pattern

is to fetch dat data when components

first load with the use effect hook like

effects sometimes you want to step

outside react and work directly with the

Dom to reference an actual Dom element

you can use what's called a ref you can

create a ref with the Ed ref hook and to

get access to a Dom element use the ref

prop on any react element for some tasks

such as focusing an input it's much

easier to reference the actual Dom

element instead of attempting to do it

the react way

context is a powerful way to pass prop

data through your apps components most

react apps have tons of nested

components to get data down multiple

levels involves passing the same props

through components that don't actually

need it context lets us jump through the

component tree and use data at any level

without making props to use context you

first create context in a parent

component then wrap your parent

component in a special context component

called a context provider put the data

you want to pass down on the provider

and finally access that data in any

child component with the used context

hook portals on the other hand are kind

of like context but for components

portals let you move react components

into any HTML element you select portals

are great for components that can't be

displayed properly because of their

parents component styles for example for

displaying modals drop-down menus and

tool tips to create a portal just use

the create portal function pass your

component to it and choose the HTML

element where you'd like your react

component to appear suspense is a

special component that helps you handle

loading a component or its data suspense

is helpful for components that take some

time to fetch data it provides a better

user experience to show a fallback

component like a loading spinner until

the data is available instead of nothing

suspense is also useful if you're lazily

loading a component which lets us load a

component only when it's needed since

react apps are all JavaScript errors

that happen during rendering can totally

break your app airor boundaries are

components that let you catch app

breaking errors and show a fallback

component to tell the user about what

happened for example our app will crash

if we run this code because it throws an

error when there's no user to prevent

our app from crashing we'll first add an

error boundary to display a fallback

component with a more helpful error

message to be displayed to the user now

if you really want to dive deep into

react I've put together a complete boot

camp to help you master every one of

these Concepts from front to back you

can get started now at react boot camp.

I hope you learned a lot in this video

and I'll see you in the next one