ProjectWT
Published in

ProjectWT

create-react-app 17 with Typescript 4.1

This photo has nothing do with this code. It’s just a good photo. Photo by Icons8 Team on Unsplash

I have been planning to start using React JS with TypeScript. It’s simple. It should be, but no. I spent an hour or two, trying to create a simple hello world project.

I realized, I gotta blog this entire sequence of events.

[Note : This post written in frustration, ended up inspiring a series of posts. Start reading them, with the first one, Thoughts on React JS from .NET developer — 0 — Prologue.]

Step One.

npx create-react-app try-react -–template typescript

Step Two.

Manually changing files from .js to .tsx (for files with JSX content) and from .js to .ts (for files that dont use JSX)

Please install typescript by running npm install typescript. (error)

Step Three.

npm install typescript

Step Four.

Now, I get the big error.

Could not find a declaration file for module ‘react/jsx-runtime’. ‘/node_modules/react/jsx-runtime.js’ implicitly has an ‘any’ type.

npm i — save-dev @types/react

Step Five.

Next, error. Could not find a declaration file for module ‘react-dom’. ‘node_modules/react-dom/index.js’ implicitly has an ‘any’ type.

npm i — save-dev @types/react-dom

Step Six.

Next, error. TypeScript error in /src/index.tsx(17,1): Expected 1 arguments, but got 0.

solution: comment out // reportWebVitals();

or actually send something, like this.

reportWebVitals(console.log)

Step Seven.

Next, error. something missing in reportWebVitals.

import { ReportHandler } from ‘web-vitals’;

add the above import to reportWebVitals.ts.

And, finally, it is done.

Final Note

I am primarily a .NET developer backend developer. These days, you cannot just know back end. You got know at least a surface level knowledge of everything.

Why should a out of the box, ‘hello world’ generator script have so many missing things? For every 10 things that get simpler, there is always that 10 other things that break down. This whole JS world, it’s really scary.

[Note : This post written in frustration, ended up inspiring a series of posts. Start reading them, with the first one, Thoughts on React JS from .NET developer — 0 — Prologue.]

I work as a full time freelance software developer and coding tutor. Hire me at UpWork or Fiverr. My personal website is here. I also have a Podcast. Thanks for reading.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jay

Jay

179 Followers

Freelance Tutor — Coding, Generative Art and Photoshop. Full Name : Vijayasimha BR