I have generated my project, so I'm going to change into the new artist's directory that was created.
I'll then start up my code editor inside there.
We're going to take a look at some of the different files and folders that were generated for us.
Now, at first glance, it appears that racked up has given us all the normal files and folders that
we would expect to see.
However, if you open up your SIRC directory, you might immediately notice a very small difference
inside of here where we would normally have gess files or a normal crate react up project.
In this case, we have some different files with an extension of DOT TSX.
So first of all, a lesson that we see right away without even having to start up our project or anything
like that.
When we start to make use of TypeScript and react together, we're always going to start to think about
the extensions that we apply to all of our different file names.
If we ever create a new file and we wanted to contain a react component or really any kind of JSA at
all.
We're going to name that file with an extension TSX.
This indicates that this is going to be a typescript file that contains, you guessed it, some amount
of X.
If we create a file inside of our project, that is not going to contain any jousts, but maybe it's
a file for Redox or reducer or something like that will instead only use Dotty's.
If you do not follow this rule, then TypeScript is going to start to complain inside of your editor
very quickly.
So let me show you a very quick example of that.
I'm going to open up my file.
Inside of here is the app component.
I'll then rename that file.
To just APTs, and then immediately we start to see a ton of different air messages appear on the screen,
so very clearly if we want to create a react component, we must place it inside of a file with a file
extension of DOT TSX and I just mess that up.
There we go.
Much better.
All right, so that's simple enough, let's start to kind of dial things up here a little bit.
We clearly got a lot of different files created for us whenever I make a new project, I don't really
like to use these default files because there is essentially just a lot of code inside there.
And I don't really necessarily know what any of that code does.
So inside my Sarsae directory, I'm going to select all the different files inside there and then delete
them.
And then going to create a new index TSX file from scratch, and we'll get started inside that file
by writing out a little bit of code, it's going to write out index, DOT, TSX.
Then inside of here, I want to create a very simple component and displayed on the screen so the entire
process for this is going to look very familiar.
Not really anything new just because we were making use of typescript or anything like that at the very
top of the file.
I will import react from react, Dom.
I'll then create a component that I will call up.
And inside there, I will return about a Divx.
Then one inside of it.
That says hi there.
And then at the bottom of the file, I'm going to try to use react Dom, to render that app component
onto the screen.
We'll do a very simple yardarm render.
We'll show an instance of my app component, and then I'm going to select that HTML element that we
always get.
Whenever we use, create, react app.
We're going to do a document.
Where are you, selecter?
Pound root.
A notice right away that just because we're using typescript, well, nothing necessarily has to change.
This is the first real kind of big realization I want you to have around react.
And TypeScript, working together just because you are introducing TypeScript into a project doesn't
necessarily mean you need to start adding in a ton of fancy new syntax, TypeScript, and react by itself.
They worked together fantastically.
And so even though you might not see it, TypeScript really is working behind the scenes here and making
sure that you have applied some different appropriate types to your code.
Let's try starting up our project at our terminal and just make sure that this code actually works as
expected.
So back at my terminal.
I'll do an NPM run start that should open up a new browser window at localhost three thousand and you
should see some content like this appear on the screen.
And at present, I do not have any warnings or any errors or anything like that.
All right, so a good start, but obviously just saying, hey, we don't necessarily have to add in
any special code isn't super helpful.
So let's start to investigate some different features and some different things we can do with reactant.
TypeScript, together in the next video.