User: Generate exactly 5 technical multiple-choice quiz questions no more, no less from this transcript about language learning and directions:

in this video I'm gonna show you why
react is the framework to learn in 2020
and give you an overview of the most
important parts peers learn react in
just five minutes react is on top right
now and it's not just my opinion using
five years of data from Google Trends
you can see angular used to be on top
but that was a few years ago back in
2016
react past it and it's been growing ever
since until the current day where react
is about twice as popular on the Stack
Overflow survey react an angular pretty
much tied for most used with view a
little bit down the list it's a
different story when we switched to the
loved frameworks react is number one up
there with view the thing we should care
about most those how many jobs there are
according to indeed angular has 546 jobs
available now while react as close to
2000 around 2.6 times more ok here's
enough to get you up and running
encoding with react if you don't already
understand HTML CSS and JavaScript to a
basic level you're kind of shooting
yourself in the foot so goal and those
to get up and running you need to
install three modules for NPM
unfortunately doing this way requires a
lot of config so there's a better way
the react team of Facebook itself
released the library called create react
app which helps you get up and running
really really fast and boom you're ready
to go you'll have a file index j/s which
uses es6
imports that is importing a library name
into a variable on which you can access
all the methods that library has to
offer moving down the page we have the
app component this stores all our sub
components and all our react and returns
JSX which we'll talk about in a minute
finally the react Dom render function
here's how this works just think of it
as taking our HTML file finding element
ID root and replacing it with everything
that's inside app
let's talk about the component the
atomic unit of react the official
definition is a loosely coupled unit but
I think a better definition is a
building block which contains both
markup and JavaScript logic components
can also contain other components and
will always roll up to the app component
and finally they must return JSX
this has an HTML like syntax but you can
get flipped to writing JavaScript when
you put brackets in keep in mind it's
not HTML there are big and small
differences class gets converted a class
name and you can enter an
onclicklistener with property on click
since JSX is in real JavaScript that's
why we need that library webpack it
converts our react components into a
single file called bundle j/s that the
browser can actually run okay here's the
Kubota call book that we might actually
write we always have to export our
component from its file the first
argument is always props which allows us
to receive data from components above we
activate J's with the curly brackets so
we can render title on the page in a
second parent component we use that
child component book twice notice how we
import it and then pass in title as a
prop in our child component props that
title gets replaced with what we passed
in using object destructuring like so is
also common to pole props out from the
argument let's make our parent component
books not Jas a little bit more like a
real life component usually we're gonna
have some JSON or in this case an array
of books that we want to render on the
page we'll have to use the JavaScript
array method map to do this and we can
return a component for each item in the
array this is a pattern you'll see a lot
in react let's talk about state a
dynamic form of storage that lives
inside of our components the 20/20 way
to create state is with a use state hook
which will return a value and a setter
function this is return an array of size
2 so we destructor them into individual
variables status dynamic storage because
every time a state variable changes or
component gets flagged for a potential
rerender this is where the magic of
react comes in react holds a separate
Dom representation called the virtual
Dom then it compares it against the real
Dom with a reconciliation algorithm to
efficiently determine whether the page
has to be updated or not and efficient
updates mean your page runs faster
let's do another example with state and
some other things we haven't seen before
first we initialize a hook to false then
we use that hook to determine whether we
show a book or not with an and
conditional we pass our Center function
as a callback to on-click so when we
click that button show book will be set
to true let's talk about lifecycle
effects these are just functions
triggered when a components created
updated or removed from the page
conveniently these are all managed with
the use effect hook the first argument
is a function that runs when your
component is created on the page 1 and
if it runs again depends on the second
argument which is an array of triggers
the simplest way to think about it is
when one of these triggers changes value
then the function will run again for
example here if show book changes the
true finally we can return a function
inside this function which will get run
when our component on mouth's so what
about when your application gets really
big you're passing state five components
deep in that case you'd want to use
application state you can either use
Redux or react context to achieve this
if you want to use context all you have
to do is create one wrap your
application and a provider and access it
with the use context hook don't
overthink it it's just an object you can
put anything in that's react in five
minutes please like the video so people
can find it and subscribe for more
five-minute videos it's what Keanu would
want
[Music]

Each question must have 4 options, 1 correct answer, focusing on vocabulary, phrases, or concepts. Questions should be technical, high-quality, and efficient, with clear wording and plausible distractors. Format each question as: 
1. Question text
A) Option1
B) Option2
C) Option3
D) Option4
Correct: C
User: System: You are an expert quiz generator.
User: Generate exactly 5 technical multiple-choice quiz questions no more, no less from this transcript about language learning and directions:

in this video I'm gonna show you why
react is the framework to learn in 2020
and give you an overview of the most
important parts peers learn react in
just five minutes react is on top right
now and it's not just my opinion using
five years of data from Google Trends
you can see angular used to be on top
but that was a few years ago back in
2016
react past it and it's been growing ever
since until the current day where react
is about twice as popular on the Stack
Overflow survey react an angular pretty
much tied for most used with view a
little bit down the list it's a
different story when we switched to the
loved frameworks react is number one up
there with view the thing we should care
about most those how many jobs there are
according to indeed angular has 546 jobs
available now while react as close to
2000 around 2.6 times more ok here's
enough to get you up and running
encoding with react if you don't already
understand HTML CSS and JavaScript to a
basic level you're kind of shooting
yourself in the foot so goal and those
to get up and running you need to
install three modules for NPM
unfortunately doing this way requires a
lot of config so there's a better way
the react team of Facebook itself
released the library called create react
app which helps you get up and running
really really fast and boom you're ready
to go you'll have a file index j/s which
uses es6
imports that is importing a library name
into a variable on which you can access
all the methods that library has to
offer moving down the page we have the
app component this stores all our sub
components and all our react and returns
JSX which we'll talk about in a minute
finally the react Dom render function
here's how this works just think of it
as taking our HTML file finding element
ID root and replacing it with everything
that's inside app
let's talk about the component the
atomic unit of react the official
definition is a loosely coupled unit but
I think a better definition is a
building block which contains both
markup and JavaScript logic components
can also contain other components and
will always roll up to the app component
and finally they must return JSX
this has an HTML like syntax but you can
get flipped to writing JavaScript when
you put brackets in keep in mind it's
not HTML there are big and small
differences class gets converted a class
name and you can enter an
onclicklistener with property on click
since JSX is in real JavaScript that's
why we need that library webpack it
converts our react components into a
single file called bundle j/s that the
browser can actually run okay here's the
Kubota call book that we might actually
write we always have to export our
component from its file the first
argument is always props which allows us
to receive data from components above we
activate J's with the curly brackets so
we can render title on the page in a
second parent component we use that
child component book twice notice how we
import it and then pass in title as a
prop in our child component props that
title gets replaced with what we passed
in using object destructuring like so is
also common to pole props out from the
argument let's make our parent component
books not Jas a little bit more like a
real life component usually we're gonna
have some JSON or in this case an array
of books that we want to render on the
page we'll have to use the JavaScript
array method map to do this and we can
return a component for each item in the
array this is a pattern you'll see a lot
in react let's talk about state a
dynamic form of storage that lives
inside of our components the 20/20 way
to create state is with a use state hook
which will return a value and a setter
function this is return an array of size
2 so we destructor them into individual
variables status dynamic storage because
every time a state variable changes or
component gets flagged for a potential
rerender this is where the magic of
react comes in react holds a separate
Dom representation called the virtual
Dom then it compares it against the real
Dom with a reconciliation algorithm to
efficiently determine whether the page
has to be updated or not and efficient
updates mean your page runs faster
let's do another example with state and
some other things we haven't seen before
first we initialize a hook to false then
we use that hook to determine whether we
show a book or not with an and
conditional we pass our Center function
as a callback to on-click so when we
click that button show book will be set
to true let's talk about lifecycle
effects these are just functions
triggered when a components created
updated or removed from the page
conveniently these are all managed with
the use effect hook the first argument
is a function that runs when your
component is created on the page 1 and
if it runs again depends on the second
argument which is an array of triggers
the simplest way to think about it is
when one of these triggers changes value
then the function will run again for
example here if show book changes the
true finally we can return a function
inside this function which will get run
when our component on mouth's so what
about when your application gets really
big you're passing state five components
deep in that case you'd want to use
application state you can either use
Redux or react context to achieve this
if you want to use context all you have
to do is create one wrap your
application and a provider and access it
with the use context hook don't
overthink it it's just an object you can
put anything in that's react in five
minutes please like the video so people
can find it and subscribe for more
five-minute videos it's what Keanu would
want
[Music]

Each question must have 4 options, 1 correct answer, focusing on vocabulary, phrases, or concepts. Questions should be technical, high-quality, and efficient, with clear wording and plausible distractors. Format each question as: 
1. Question text
A) Option1
B) Option2
C) Option3
D) Option4
Correct: C
Assistant:
Assistant: