First of all we can start our development server here with NPM start.
And this is a process we should keep on running because this will watch our files for changes.
And if something changes.
So if you save a change specifically it will recompile the typescript code to JavaScript recompile J
as X to JavaScript.
And in the end then build your react application and serve it on local host three thousand where at
the moment you don't see much.
You just can seed here in the def console that it seems to work because of that output here.
You don't see much of course because we're not rendering anything here in app TSX at the moment.
That of course will change.
And with that up and running Let's now write some code or let's analyze what we got in index TSX.
We don't have anything special right.
This is regular javascript code in app TSX we see disk type assignment though and they are what we can
see it is that we assigned this strange type to app.
Now if we ignore that type for a second what's actually stored in app.
Well a function an arrow function but that's still a regular function day for Vice this type here not
function or why is does not one of our function types we learn about.
Well it is under the hood but this is a type provided by react.
And now important of course provided by the react types package.
If you go into node modules we see these at types folder here and in India we see a lot of types and
we all do severe react types here all of the react Dom types.
And in the end this type is implicitly automatically imported from that react types folder you could
say.
Now what is this type FC simply stands for a function component.
There also is a longer form of this which you could use instead.
That's exactly the same type.
The other one is just a shortcut.
And this simply defines that what we store here in app has to be a function but a function that qualifies
as a function component in react.
You also kind of course write class based components and hence you have a classic component here as
well.
And then you would have to store a class in there instead of a function.
But we will go with function components here in this course.
Now this is a function component because it is a function that returns J is X and that is how a function
component is created and react.
If I would remove his return statement temporarily we hence would get an error here all do I tried to
safeties and it wants to compile it.
We would get an error because now we tell typescript that here we want to store a function component
and all we store is a normal function not a function that returns J is X or anything else that qualifies
as a react element in the F word.
This would be invalid and we would have to fix it.
So here we can already see how typescript improves our project a little bit.
It gives us extra type safety and make sure we can't run in a situation where we for example build a
invalid component.
Side note if it might seem unrealistic Dad you would ever forget this return statement.
Consider that you're building a bigger component with multiple if statements and different return statements.
You might forget one in one branch of your if statement and then typescript can definitely save your
ass and give you that warning a little bit earlier than during runtime where it otherwise might crash
in some situations.
So this is type of doing something but with that enough about the talking let's build something and
I want to build a relatively simple app here a to do app pretty classic but a to do app which allows
us to therefore practice some core concepts of react with TypeScript and therefore in the next lectures
let's actually start our first custom components.