As I just mentioned, when we started making use of typescript and react together, not a lot of stuff
is going to change.
So we're going to really take a look at some very specific areas where we're going to massage our code
just a little bit because we were making use of typescript.
So in the coming videos, we're going to write out some very quick and very simple examples to examine
how to work with TypeScript and react together for handling component props, for handling state event
handlers and a couple of other topics as well.
Once again, for each of these different areas, we're going to be writing out some very simple, straightforward
code and we're barely even going to run it really directly instead of our browser.
Instead, this is just going to give us some background and some further information on how these things
work together.
All right.
So to get started, I'm going to go back over, find my SAAC directory and make a new folder inside.
They're called Props.
Then inside of that folder, I'll make a new file called Parent Dot TSX.
And another called child, dot TSX.
So we're going to create two separate component files in one, we're going to write in a parent component
that attempts to show the child.
We're then going to assign a couple of different props to this child.
And once again, just see how it works with TypeScript.
I'll first begin inside of parents inside of your.
I'm going to write out parent.
Inside of there, I'm going to return an instance of child.
I'm going to export default.
Parent at the bottom and will make sure that I import child.
From child.
Notice that I am currently importing child right here with curly braces, so we're going to define a
couple of different versions of this child component inside the child file.
So that's why we're adding in the curly braces right here, because we're going to use it as a named
export rather than a default export.
All right, once I've got that put together, I'll then go over to our child file and inside of here
I'll do an export consed child and I'll listen to that.
A very simple component, maybe just a very simple div.
That says hi there.
All right, so at this point in time, we now have these two separate files, one as a parent, one
as a child, and I do not see any errors in either of them.
Now we've got a little set up, put together, let's take a quick pause, come back to the next video.
We're going to make sure that child receives a couple of different props and we're going to understand
how to work with this prop system along with TypeScript to make sure that we're using these props in
the correct fashion.