[MUSIC]
>> A function component, well, originally,
people would refer to them as stateless components
because they couldn't have state associated with them.
That's because as you pointed out,
you don't have any of this context,
so there was no way to do that sort of tracking.
For a long time, you relied on
class-based components as a way to manage state and then
function components maybe as a way to just render
out just the data that was changed in there.
But well, not all applications
are going to want to have class-based components,
so the React Team introduced this concept of hooks.
Hooks are a way to introduce state into a function component.
Now, hooks only work with functions components,
they don't work with class-based components and
they allow you to do all the things that we want to do
with application that uses state,
but purely from a functional component.
Let's pick a different example that we've got here.
Maybe let's use this one,
this Markdown renderer that we've got.
If I don't scroll up too far.
Well, there we are. There we go.
This is a class-based component,
but let's look at how we could turn this
into maybe a function component.
We'll come down and create a new one.
That's really going to be
tedious when it's bouncing around like that.
We'll do a ConstMarkdownEditor2,
because naming things is super hard.
>> I'm very creative when I name things for on the fly demos.
>> Yes. Let's just grab all of
this return statement, put that in here.
It doesn't really bother me that things aren't indenting properly,
but I will get over it.
We've made things not work.
That's probably not ideal,
but well, let's make them properly work.
>> That's my superpower; is making things not work.
>> Exactly. How are we going to deal with things like,
well, a text area?
It's an editor, but yes, it's the text area.
We're also going to need to have some way that we
can render out this rule markup.
Let's start with, well,
what's the value going to be for this text area?
It provides a default value and it's going getting this dot state.
Well, we know that that doesn't work,
so we can use hooks and
this is where I'm going to find out whether or not the
editor experience that we've got here is going to support
hooks or we'll quickly say,
"Wait, there's some other way to get hooks?"
Maybe I'll probably read the console
here and see if I get any error messages.
I'm getting lots. Good start.
>> I think it might just be
because you don't have this at the moment.
>> Yeah. I think that's probably where a lot of it's going to be.
We are going to do const where we've got
the text and then we'll go set text.
I'll explain what all of this is doing in
a moment. Where did my cursor go?
Text. It's going to be equal to react.usestate and there we go.
Then we're going to need to have like a handle change function,
but let's just comment some of this stuff out.
Comment. There we go.
>> Just going to slide this screen over,
I'll scooch here. There we go.
>> Okay. Now, we've got rid of all
of our red errors and successfully,
we have created an input field.
I can type some stuff in there but well,
is it going to do anything with that value?
Well, we like it,
so it's ultimately rendered that as markup,
so I'd like to be able to go hello and
world because HelloWorld is the only thing that we know how to do.
But I need to tell React that as
this value is changing, that it needs to be aware of it.
Now, in our class-based component,
we had this unchanged handler.
Well, because React is immutable,
so we need to do something
to tell React that the value of that input
has changed and the value of our text here is changed.
First off, let's say, the start value should be text
and now, we'll type in awesome. I can still type in.
It doesn't know that that value has changed.
Our onchange, we are going to then add a custom handler,
which will take the event and I'm going to do this inline rather
than creating current separate functions
mostly from a laziness standpoint.
If we went, say a
console.loge.target.value or at least I think it's value.
Yeah, it's either target or value,
and we bring up our DevTools again,
clear out the console, scroll back down.
We can see very faintly as I type in Hello World.
>> Okay.
>> So that function is being executed
every time I'm doing a keypress,
so the value of that text editor is changing.
>> That unchanged, that's not something that's special to React.
That's just part of text area,
that's just the normal text area event.
Every time you change it, that's
now being raised and so right now,
you're just printing that out.
>> If I was to come over,
I'm going to have some React DevTools.
There we go. I was amazed that worked.
I couldn't see any icons there.
Let's see if I can find this component.
There we go. Markdown editor 2.
Now, it's aware that it's got
some state and that state is currently not set to anything.
Instead of doing console.log,
we're going to setText.
>> That setText comes from up above?
>> Yes. I'll come back towards that in a moment.
We go hello world and if we find this component again,
now, we'll see that state has been updated to HelloWorld.
Excellent. That's what we want
because we're going to need to then render that out later.
How did all of that work?
Well, with React hooks,
we have a number of different hooks and the one
I'm using here is used state.
React hooks all start with
use as a keyword because that's the convention that it got.
It's used state, use effect,
and so on and so forth.
Use state allows us to create some state for a function component.
We can give it a default value,
which I'm just defaulting it to an empty string,
and then the return of that is an array that has two arguments.
The first argument is going to be the current state.
The second argument is a state mutation function.
You can name those whatever you want to name them.
In this case, I'm calling it texts and setText,
but there's no reason that I couldn't call
this Jane and then set Jane.
It doesn't matter what they're called.
You call them what is relevant for your application.
We'll call them texts and
setText because that's representing this bit of state.
Now, I could also have as many bits of state as I want.
I could have const fu and set who.
Then this is React use state and this could be a number.
Then I could update that as a number.
It could be an object
that has texts and that has an empty string there,
so initially, instead of doing text,
we could do food or text.
Like I said, you can have as many of these as you want.
Now, the last thing we're going to need to do is,
well, how do we render this markdown out?
At the moment, well,
I need to do something that will render it out.
Because I need to generate some HTML that's going to render out,
we use this dangerously set HTML.
Just because React is trying to be really careful
about not just arbitrarily
injecting HTML because that's
an avenue for cross-site Scripting or XSS attacks,
so we have to be really explicit.
I'm aware that I'm just arbitrarily adding
HTML that you have no concept of or control over.
I'm trusting that the HML I'm injecting is going to be fine.
Well, how do I generate this mark then?
I could run another function that we pass stuff
through or I could
add some more state that's actually going to have that.
Let's do some more state const,
and then we'll put markdown and set markdown.
This will be React use state.
That's going to also start off as
an empty string because we don't have any markdown initially.
Then here we will do _HTML and that will be markdown.
That's how we render it out.
That's how I think we render it out.
Let me just double-check up here.
Yes.
Have I got all of my squigglies correct?
Excellent. I'm getting a warning
about something on some lines somewhere.
There it is.
Who on the string saw the bug before? I did.
>> Nobody. I'm furiously
trying to go through all the comments here.
There's a lot of questions and comments, which is fantastic.
Now you've got that working, so now you can put in the input
in Markdown and now that will properly display out.
>> Well, so I can type in something here.
Hello world.
>> Hang on.
>> But I need to do something that's
going to convert that into markdown.
>> Right.
>> In the class-based example, we had this generate
raw markdown or raw markup,
which was then using a library called Remarkable,
which I can't do any of that sort of thing.
Let's instead pretend that we're being
provided the markdown renderer
as a argument that's been passed in.
Then we can go mb equals mu of Remarkable.
I think it was called Remarkable.
That's going to be passed in correctly
and we're going to introduce another hook.
I'm going to use the React use effect hook.
Use effect is when I want to do something that is
the side effect of a state value that's changed.
What I need to do with the effect is I need to tell it
what are the bits of state that could
change that you need to be aware of.
It's going to be text and it's
also props that I might be dependent on.
These are things that could result in this effect running.
Whenever text changes, run this effect.
We are going to then do, inside of this,
we'll do set markdown to the result of MB dot.
Let's actually have a look at how we do it.
Was it md.render?
Render.text. Now, I can, hopefully, go
hello world and we've got our markdown working.
That's all happening with hooks.