Now when it comes to building a reactor with typescript we of course need a project setup which is capable
of both handling our ReACT code so things like J.S. X for example and which compile stays and optimizes
our ReACT code and which at the same time is capable of understanding TypeScript and of compiling typescript
to JavaScript setting up such a project on our own can be pretty difficult and therefore it's good dad.
Create react app a tool managed by the REACT team which we can use to create react projects supports
typescript out of the box you can simply google for create react app type script and you should find
this entry on the official create react app documentation there you'll learn how you can add typescript
to either an existing project here these steps or how you can create a new project with create react
app and TypeScript and here you see a command which you can just copy to create a new react project
which also supports typescript now I will use this here and here I already am in a folder which I want
to use does is simply the project folder I want to use for this project and I will just paste in this
command and in this case because I want to use the folder I am already in.
Also here in my terminal I will replace the project name with a dot so that it doesn't create a new
sub folder and creates the project in that but that instead it uses this folder.
This is of course optional.
I also want to say that I noticed that this comment doesn't always work.
Sometimes it creates a regular javascript project to fix that.
You can install create reactive globally on your machine something you can simply do by running npm
install dash G create dash react dash app on Mac and Linux you might need to add a pseudo in front of
this.
And with this installed on your machine you can't actually run this command here but without any specs
just like this and Dan it should definitely work.
So that's what I will do here.
But normally it should also work without installing it by just using the NDP X tool which is part of
the NPM tool we already installed to gather with node J.S. earlier in the course.
So if now it entered this scaffolds a new project into this folder here and in that project it will
set up our ReACT application where we can all write all our code with typescript.
So let's wait for this to finish and let's see what this gives us.
And it finished.
So let's have a look at what we got.
We got a folder which you might recognize it's basically the same structure you have when you create
a reactive without typescript but we can already see the T is conflict or Jason File by the way.
You can also edit this file and fine tune unit to your needs.
You learned how to tweak this configuration earlier in the course after all the default configuration
should be fine for most use cases though.
Now if we explored the source folder which is where we will write our source code we all will find a
bunch of t s x files in there now thus far in the course we didn't work with t s x files but only with
T S files t s x simply as you chose chosen here because these are files where you can not just write
typescript code but all the J is X code which just is special react javascript syntax where you write
H Tim Allen markup inside of your javascript or in this case typescript code.
That is what we get here now in these files.
We can already see some types crude syntax for example here.
We got a type assignment.
I will have a closer look at this type later but for now we just can't immediately see that we obviously
use typescript here.
With that let me just clean up this starting folder structure a bit and then let's build a very simple
react up together and whilst we're doing that let's explore how we can use typescript with react.
So let's first focus on the cleanup here in apt he has X I will remove the logo import and remove all
the content in my div here and just keep that Dave.
Therefore I will also remove the app CSX import get rid of the apps use this file in the app test dot
TSX file as well as the logo SPG and the service worker dot test files remove all of those indexed he
has X I will remove this service book or import because we're not going to work with service brokers
here.
Remove that code down there and end up with this setup and in index CSR as I will clear all of this
and just setup some HQ alt style where I want to set a fun family of send serif and then a body style
where I want to get rid of the margin just like this very simple styling and with that we got a starting
setup with which I want to work now.
Again I did mention it.
But if this all doesn't tell you anything if there's a syntax you've never seen before then definitely
dive into some react resources first.
This is not what we will focus on in this module.
You're not going to learn or react in this module but with that let's save all our changes and now continue.
And let's start to write some react and type of code and learn how these two things work together.