>> Hi, i'm John PaPa.
>> I'm Brandy Morgan.
>> And we're going to learn five things
that React components.
Thing one, component types.
>> So, in React, there are two types of components.
There are your class components
and your functional components.
Class components are going to be the ones that hold
your state and use those lifecycle methods.
Functional components are
going to have nothing to do with
state and they are never going to
use those lifecycle methods.
>> Oh, very cool. Thing two,
container, presenter pattern.
I hear about this lot in React. Tell us more.
>> Yes. So, in React,
you have your container components
and those contain your state,
and then you have your presentation components
that present your state.
So, in React, state flows from your parent to your child.
So, you have your container,
right here, that has your state,
that then passes the state
to your presentation components.
>> And could you have multiple of those
presenter components inside a container?
>> Yes,and those can also be
functional or they can be class components.
>> Awesome. So, it's really more about
how the data flows through your application.
>> And how it's presented.
>> Got you.
>> So, how you would see it /yeah.
>> So, with an example that
container really doesn't show anything,
then right, if I'm understanding you, right?
>> Yeah.
>> You might collect the data, get it ready and then
pass it down to the presenter who
might show like a log in.
>> Yeah. You would think of a container
as your state manager.
It manages a state for
all that presentation components inside of it.
>> Very cool. Everything seems to be a component.
>> Everything is a component in React.
>> Are we components?
>> No.
>> No. Okay.
>> I hope not.
>> I'm disappointed.
Thing three, JSX.
This is unique to React, right?
>> Yes. So, think of it like HTML,
and if you know HTML,
you'll be very comfortable with JSX.
It's an XML like syntax that
you use for building your components.
>> Inside of your JavaScript files, right?
>> Correct. Yeap.
>> So, wait, worlds are colliding here.
>> I know.
>> HTML, JavaScript.
Awesome. Thing four,
stateful components and lifecycle methods
or events. How do they work?
>> So, stateful components are components that
have internal states and they use the lifecycle methods.
So, every component has a lifecycle,
so when it's being rendered,
it's you would use component willMount,
which is when the component is being rendered to the DOM,
and then component didMount is when
it has rendered and then
component onMount is when it's being destroyed.
>> Thrown in the trash.
>> Thrown in the tracs.
>> Yeah. You like to throw them in the trash, don't you?
>> Yes I do. When I can.
Get rid of unused code.
>> So, anytime we have stateful components
of lifecycle events,
we're getting data from somewhere, right?
>> Correct.
>> Where do you get your data from?
>> So, I use node JS as a backend usually.
>> Like an express API, or happy or hollow?
>> Happy.
>> Happy?
>> Yeah.
>> I'm happy too. So, we
could use it on the server but we can
also work with things like
server list technology, right? In the clouds.
>> Mm-hmm.
>> So, I can get my data from any serveless function?
>> Yeah.
>> Awesome.. Things five, handling events.
We get the stuff on the screen,
we've got the components.
How do we go back from the screen into the component?
>> Yes. So, event handling is a big thing in React,
and there are these things called event handlers,
and think of a button.
So we created these components,
we have a button on the screen.
Somebody is going to click on it.
Well, we somehow need to interpret that click.
Right? So, you create a method that handles
that click and then you have
these event handlers for your button,
like on click, and that would actually
take that logic from that method and handle the click.
>> Okay, but what if nobody clicks on the button?
>> Well, then nothing happens.
>> Does it get lonely?
>> Probably. Probably just want to tap it.
>> If nobody clicks on the button,
does any other handler actually exist.
>> Well, in the code, yes.
That doesn't get used.
>> Okay. Where would you
recommend people go to learn more
about components in React?
>> The documentation is always good.
So, reactjs.org.
>> Awesome. I'm John Papa.
>> I'm Brandy Morgan.
>> And we just learned five things
about components in React.