create-react-app for Typescript

npx create-react-app my-new-ts-app --template typescript
cd my-new-ts-app
# confirm
npm start

cd my-new-ts-app
ls -all src

f02f@computer:~/my-new-ts-app$ ls -al src
total 44
drwxr-xr-x 2 f02f f02f 4096 Apr 22 10:50 .
drwxr-xr-x 5 f02f f02f 4096 Apr 22 10:50 ..
-rw-r--r-- 1 f02f f02f  564 Apr 22 10:50 App.css
-rw-r--r-- 1 f02f f02f  273 Apr 22 10:50 App.test.tsx
-rw-r--r-- 1 f02f f02f  556 Apr 22 10:50 App.tsx
-rw-r--r-- 1 f02f f02f  366 Apr 22 10:50 index.css
-rw-r--r-- 1 f02f f02f  500 Apr 22 10:50 index.tsx
-rw-r--r-- 1 f02f f02f 2632 Apr 22 10:50 logo.svg
-rw-r--r-- 1 f02f f02f   40 Apr 22 10:50 react-app-env.d.ts
-rw-r--r-- 1 f02f f02f  425 Apr 22 10:50 reportWebVitals.ts
-rw-r--r-- 1 f02f f02f  241 Apr 22 10:50 setupTests.ts
f02f@computer:~/my-new-ts-app$ 

npm start

Compiled successfully!

You can now view my-new-ts-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://172.17.0.2:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

Transcript

in this video we're gonna

run the command create react app with

typescript options

by default it runs with javascript so

we need to specify a command flag to

change it we're assuming that you have

node.js and npm

installed if not check the text of this

page and you can find other videos and

instructions on how to install it so

basically if you have

nps you also have np

uh if you have npm installed you also

will have nbx

and this is what we're gonna use to run

the command so normally we would type

this let's say my new app

this would be a default but this time we

want to have like a

typescript right so for this one it is

template option

and we pass typescript and here we're

gonna say my new

typescript app and this should be it

so it's as simple as this then this is

gonna install the dependencies and it

will take a while

all right it's already done no it's

still installing yeah i thought that was

too quick

um and basically we're gonna go inside

and see that the sources are indeed

typescript and we're gonna see that it

loads like a

like the react hello world with a react

logo

spinning so let's wait until this

getting

gets installed

there's really a lot of dependencies um

okay now it's going to install some

dependencies of those dependencies

and it will get there so no worries

you detect the typescript in your

project

okay

okay perfect so here we go the

instructions so we just need to

cd into our new typescript app

and here we can see the structure of the

folder

and if we go into source

you can see that indeed it's typescript

typescript files yeah so now let's run

it

just to confirm that it loads so with

npm start

and we load it in the browser it will

give us the

the urls here that we can use

okay so i'm gonna i'm gonna use this one

but

both of them should work for you

and then i'm going to just load it here

and it works

so this is simply how you start a

project with create react

app in typescript