create-react-app 17 with Typescript 4.1
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.
