Use this text to do a short version that text.  hello and welcome to the ultimate react

course

I'm so thrilled to welcome you here and

to guide you on your journey of becoming

a complete react developer

and learning react is indeed a great

choice not only because it will enable

you to build any application that you

can imagine but also because there is

always a huge demand for skilled react

developers like the one that you will

become by the end of this course

now before we dive in let's take a

minute to get a quick overview of how

the course is organized and the projects

that we're gonna build together

so the course is divided into four big

Parts which will take you from knowing

nothing about react to a skilled and

confident react developer in no time in

part 1 we're gonna build a few small but

nice projects to get you up to speed

with react fundamentals such as

components jsx props State and forms I

also included tons of challenges and

exercises to get you coding in react on

your own right off the bat

in part two we built upon these

foundations to learn intermediate

Concepts like data fetching the used

effect talk and custom hooks there is

also a special section on how react

Works behind the scenes which will make

you super confident when working with

react on your own

next in part 3 is where we really take

things to the next level and work on

your Advanced react skills so we're

gonna dive deep into topics like

reducers and performance optimization

build or first single page app with

react router and also explore Redux and

modern Redux toolkit

then in part 4 we take all you've

learned and apply it to the real world

as we built two beautiful professional

applications using industry standard

libraries and tools like Redux Tailwind

react query Super Bass and more

so as you see this course really

contains everything you need to know

about modern front-end development with

react

it's gonna be a really exciting journey

and I'm sure that you're gonna have a

ton of fun building all these projects

and that you'll take your web

Development Career to the next level and

with that being said let's Jump Right In

[Music]

now before learning anything about react

and even before setting up our

development environment let's build our

very first small react app it's a tiny

app but you will already meet many of

the fundamental ingredients that all

react applications are built upon so

this is going to be a lot of fun already

and so let's get started

and remember how I said that we don't

even need to set up our development

environment and that's right we can

actually write our very first react app

right here in basically this online code

editor called code sandbox.io

so right now you can go to code

sandbox.io and there they will ask you

to try this app for free but you can do

it even more easily which is to open up

a new tab and simply write react dot new

so that's it react.new hit enter and

this will then automatically create a

brand new code sandbox for you

already with the react starter template

now by the time you're watching this the

code Sandbox app might look a little bit

different but the idea is probably going

to be the same so here on the left side

you will have some files

here's some info about the template that

doesn't really matter then in the middle

you will have a code editor where you

can open these files so just like vs

code and on the right you will have your

so this is again just like vs code and

in fact this whole app is actually

really built on vs code and this is

actually so helpful and useful that we

will use code sandbox a lot of times

throughout this course for example for

decoding challenges that are included in

this course

but anyway you see here that it has

already created a bunch of folders and

files for us

and let's start by deleting these

styles.css we're not going to use this

and we have this

index.js and app.js and of course later

we will learn what all of this code here

is and does but for now let's open up

simply app.js and delete

everything and so with this we can then

start from scratch

so let's start by building our very

first react component which is

essentially a piece of the user

interface again more about all that

later

so just write function and by default we

call our main component the app

component

and as you see a component in react is

really just a function

now these functions in react so these

components can return something called

jsx which is a syntax that looks like

HTML and which will basically describe

what we can see on the screen so just

like HTML

so

let's return a div

then let's for example write an H1 here

hello world so that's the traditional

first line of code that we always write

and then we also will want a button a

bit later

and here let's say get

advice because we are going to build a

very small app which will fetch some

advice from an API and will display it

over here on the screen

so let's give this a save and you see

that it all nicely formats here which is

because behind the scenes here we have

the prettier extension already included

into the start template here

and now all we need to do is to export

this function from here because you see

that this index.js file actually Imports

it here

so export

default give it a save

and then let's just manually reload here

on the right side

and after some time you should then

yeah so you should see your hello world

and the button beautiful so that's our

very first react component but of course

nothing happens for example when I click

here on this button and so let's change

that and again what I want to do is

whenever I click on this button we want

to get a new advice from an API

so basically we want to fetch some data

from an API and display it on our user

interface

so let's actually write a new function

right in here so inside app

we will write an async function so that

we can use a single weight

and so you should be familiar with this

basic JavaScript and if not don't worry

there is actually a section that reviews

the most essential JavaScript that you

need to know for react

now here I'm missing of course the

function name

so let's say get

advice

and then here let's fire off a fet

request

and here I'm just going to type out the

URL of this

API so http s

then API Dot

advicelip.com

okay then we can await this promise and

store it

inside of some variable and again all of

this should be nothing new for you at

this point

let's just give ourselves a little bit

more space

but also as I said if this is new stuff

just type out the JavaScript that I'm

writing here and it all will make sense

but anyway let's now basically convert

that response to Json

and then let's

log it to the console

all right so inside our component which

again is this app function here

so inside that component we now have

this getadvice function but we're not

calling it anywhere right

so how do we call this function when we

click on this button

well we can specify the on click

attribute here

equals and then just open these curly

braces and here

we simply write get advice

all right let's maybe reload just to

make sure and then let's click

and well we got something

nice

so here we have this slip then slip

again and then in there we have the

advice and so here we have some piece of

advice a problem shared is a problem

health

so what we're looking for is actually

data dot slip

dot advice right so let's try that again

yeah so now you get this advice directly

here and all we have to do now is to

basically get this string so this text

here into our user interface so we want

it to be displayed right here so here in

this place

now how do we do that well for that we

need a concept called State and state is

the most fundamental concept of react so

whenever we need something to change in

the user interface we change the state

so we update something that we call

State

so to create new state we need to do it

here at the top level in the function

and we write it like this

so advice and set

and we start off with an empty string so

you see that automatically you state got

imported from the react library and if

for you this didn't happen automatically

then please go ahead and write this line

of code here all right

so this U State here is a function in

react which returns an array and so here

we are destructuring that array so in

the first position of the array we have

the value of the state that we call

Advice here and the second value is a

Setter function so a function that we

okay and so right here in this getadvice

function we can now use this set advice

function to update the state and then

whenever this piece of state is updated

the user interface will also be updated

so let's call

set advice right here so after we

receive the data

and now all we have to do is to then use

this advice

right here in this jsx

so remember that I said that this is

called jsx which is basically just like

HTML but we can add some JavaScript to

it as well

so each time we want some JavaScript we

can basically enter JavaScript mode by

using these curly braces

and we already did that down here so we

have this on click attribute here and

then here we opened JavaScript and

passed in the function so this function

will then get called whenever we click

so here now we can simply place this

advice variable

and then let's see the magic happening

and it works beautiful

let's click again and then we get

another one beautiful so it's already

working so this is already your first

working react application already with a

piece of State

which again is one of the fundamental

aspects of react and of course right now

all of this seems really confusing but

of course you will understand it as we

go through the course

so basically what happens is we click

this button here and we set here that

whenever we click the button the

getadvice function should be called and

so then indeed it gets called it fetches

our data and then we update the state so

we update the state by calling set

advice and then whenever we do that so

when we update State then this function

here so this whole component is executed

again and then the advice here has been

changed and therefore it then changes

here on the user interface

nice so what I want to do next is to

display down here some text which tells

us how many times

basically we have clicked this button so

which tells us how many pieces of advice

we have already read

so basically we want a paragraph here

which says something like you have read

then here we can write any HTML like we

can make it strong

let's for now just use some placeholder

value here

and let's close that here

but now of course we want to make this

number Dynamic right and so this is

another place where we need some State

because we want this value here to be

updated over time

so we create more state so use date

again and now the initial value should

be zero

and then again this returns an array

which we can immediately destructure

into for example count and set count and

of course we can use any names that we

so what we do then here is to also

update the count

so we can use our set count function

then here I will do something a bit

strange

so we will update now in a different way

but this doesn't really matter so it

simply takes the current count and then

adds one and that will become the new

count

okay and now here let's replace that

placeholder with the actual count value

and if we reload now

then

yeah it increased

and it keeps increasing so that works

just fine

nice now maybe you noticed that when we

load this for the first time we have no

advice here at all and of course we

start at zero so let's change that so

that whenever we open up the app for the

first time we already are graded here

with our very first piece of advice

and we can do that with something called

an effect

so we can use use effect and again it

needs to be imported here so make sure

that use effect is up here

and then into use effect we pass a

function

so what do we want to happen here

well basically exactly the same thing as

here

so we can simply call

get advice

all right

now you're seeing that it's getting

completely out of control and that's

because we have a bug in our code

so here we need this empty array

and as soon as I save this you see that

it stopped

so use effect takes two arguments first

a function that we want to get executed

at the beginning so when this component

first gets loaded basically and then a

second argument which is called the

dependency array but that doesn't matter

for now so we will learn all about this

later but for now just make sure that

you have this empty array here

all right and if we reload now you see

that very soon you get this very first

advice automatically

now down here we also get two pieces of

advice even though it should be only one

but again we will worry about that later

it is just because of something called

strict mode in development

now if we keep clicking then of course

it keeps increasing normally but when we

load for the first time basically this

effect will be executed twice and so

then this increases two times

nice and this is actually all the

functionality that I wanted already for

this little application to make it just

a little bit more real world so to say

let's create a new component for this

message down here

so in react we try to divide user

interfaces into components and so

let's kind of do this already here

so let's call this component message

and notice how it is uppercase here so

just like app this one also needs to be

uppercase that's a convention in react

for all components

so here all we want to return is

basically

just this

so we cut it from here and then here we

simply include message

now you see that we have this error

there but we will take care of that in a

minute

and so now we can basically include this

component so actually a message just as

if it was another HTML element so

message and then we can close it

immediately like this

but now we have a problem because here

we are using this count value and well

right now this component has no way of

knowing about the value of this variable

and so what we need to do is to pass it

right into the component

so we do that using something called

props and the prop is basically just

like parameters to a function so let's

say we wanted to call this prop count

and then we pass in the count value and

again here we are entering this

JavaScript node by using the curly

braces and so now here we can accept

that but not like this so it's not like

a normal function where we simply accept

count instead

what we accept is an object called props

and it's on this props object that count

and again if this sounds too confusing

well it is actually pretty simple as you

will see when we learn this all step by

step and not all at once so here I just

want us to have a little bit of fun and

very briefly get to know all these

different ingredients of react but you

don't need to worry about learning any

of this right now just type the code and

have some fun

and yeah see the application here coming

together

so now it actually works so if we reload

then all these errors will be gone and

the application is back to working

so beautiful

and actually this is all that I wanted

to do for this small application which

still already has a lot of the react

ingredients that real world react

applications will have so we have state

we have effects we have props we have of

course jsx here we created two

components and so that's already pretty

so I hope that this was fun and that you

also got this application to work and if

not so if for some reason you run into

some trouble I will attach a link to

this code sandbox right onto this udemy

lecture and with that being said after

this small introduction it's not time to

actually set up our system a little bit

and really start learning about what

react actually is why it exists and yeah

now before leaving this intro section

let me give you eight quick

considerations on how to actually take

this course and I promise they are super

short and super important so please

don't skip this video as it will set you

up for success with this course

first of all there are many different

types of students in this course

some have never written a line of react

code in their life While others want to

get better or more advanced at react

this course is for all of you everyone

is welcome

so please don't write a bad review

immediately if the course is too easy or

too hard or progressing too slow or too

fast for you because I built this course

with everyone in mind

now to make it perfect for you you can

always re-watch lectures jump to other

sections watch the course with slower or

faster playback speed or ask questions

in the Q a section of course you can

give a one star review if the course is

absolutely terrible but please at least

wait for a couple of sections to get a

good idea of the course and then you

will actually find that it's not

terrible

also you don't need to watch the entire

course in order to learn react there are

many parts of the course especially in

the big projects where we will just

practice what we already learned before

but just in another context

now this practice is excellent for you

and the more videos you watch the better

you will become but if you are short on

time you can just skip many sections or

parts of sections which will allow you

to cut the course length at least in

half

now about actually taking the course as

you should already know you always need

to code along with me you will learn

exactly zero react skills by just

sitting and watching me code you have to

actually write the code yourself even if

it's just typing the exact same code as

in a video it really doesn't matter

because as long as you're coding the

code is somehow getting into your brain

and you're learning

now in the first few sections of the

course don't worry about why or how

things work in react or about some react

best practices

that's all super important but in the

first few sections while still learning

the fundamentals we just want to make

things work we will worry about

everything else as we keep going through

the course

if you have some problem with your code

or just a regular question start by

trying to solve or to answer it yourself

this is absolutely essential for your

progress and an essential skill as a

developer

if you can't solve the problem start by

checking the Q a section because

probably someone already had the same

problem before

now if that doesn't help you can ask a

new question just use a short

description post your code on code

sandbox.io that we used in the previous

now many sections in the course build on

one another and so before moving on from

a section make sure that you understand

exactly what was covered

so don't just try to finish the course

as fast as possible instead take a break

review the code that we wrote review the

notes that you hopefully have been

taking review the projects that we built

and maybe even write some code on your

own to practice

only then you're ready to move on

now I recorded this course on a Mac but

everything is going to work the exact

same way on Windows or on Linux so if

something doesn't work on your computer

that's not because you're using a

different operating system so there must

be some other issue

and now finally and most importantly

have fun

so diving into the world of react is so

much fun and it's gonna be so rewarding

to see an application come to life that

you have built yourself so if you're

feeling frustrated for some reason stop

whatever you're doing and just come back

later always have fun while coding and

with that being said let's now actually

now before even starting part 1 you

first need to actually download the

course starter code and the final

project files from GitHub

so all the code that you're gonna need

to build the project in this course is

located in this code repository on

GitHub with this URL so I will add this

URL to the resources of this lecture and

so just click that to access this page

now to then download the entire code all

you have to do is to click here on this

green button and then download as a zip

file

now if for some reason that doesn't show

up for you so if you can't see this

green button then there is also an

alternative link

down here that you can click

now let's wait for this to download

and actually there it is

so let's see

and then let's open that up and indeed

here we now have this ZIP file that I'm

going to move to my desktop so here on

the desktop is where I will create all

the projects in this course

so on Mac OS you can just extract this

by double clicking and on Windows you

just right click and then somewhere you

will find the option of extracting all

files

so then inside this folder we basically

have one folder for each of the projects

that we're going to build throughout

this entire course and for each of the

projects we always have a final folder

and a starter folder

so the starter folder contains the code

that you're going to need to start the

project

and then in the final folder you will

always have to code as it will look like

at the end of the project so once the

project is finished and the idea of this

final code is that you can compare it

with your own code in case you run into

any problems

so each time that you find a bug that

you cannot fix on your own then the best

thing to do is to compare your code with

the code from the final files so with

the files that are here in each of the

final folders in each project

now here in the repo

I also have another branch which is this

updates and fixes Branch so this is

where I will place any important bug

fixes that I didn't catch in the videos

in the future but don't worry too much

about this one the main thing that

matters here is really this main branch

so this is the code that you need to

download to get started with this course

and then finally down here I also have

this part where I have some frequently

asked questions and so before going

through the course please make sure to

take three or four minutes to read all

of them and you can also then see here

the final versions of all of the main

course projects

okay and with this we are now finally

ready to move on to part one of the