Contents
create-react-app series
This blog post is a series. You can see other blog posts of the series on the list.
- What is React
- create-react-app
- TypeScript in create-react-app
- [TypeScript] Make Import path based on Root in create-react-app
- styled-components in create-react-app
- Jest
- Test with react-testing-library in create-react-app
Outline
In the previous blog post, we’ve seen how to create the React project with create-react-app. In this blog post, I will show how to apply TypeScript to the React project created by create-react-app.
You can see the source code on the GitHub link below.
Create a project
Execute the command below to create a React project.
npx create-react-app my-app
And then, execute the command below to execute the project.
# cd my-app
npm start
If you don’t have any problem, you can see the screen below on your browser.
Apply TypeScript
Now, let’s see how to apply TypeScript to the React project created create-react-app.
Installation
We need to install libraries to apply TypeScript to the React project created by create-react-app. Execute the command below to install libraries for TypeScript.
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
Configuration
We need to configure tsconfig.json to configure TypeScript.
Create tsconfig.json and modify it like below.
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": [
"src",
"custom.d.ts"
]
}
Modify file extension
We need to modify files extension to make TypeScript recognizes files. modify .js to .tsx or .ts of files in src folder.
- App
.js> App.tsx - App.test
.js> App.test.tsx - index
.js> index.tsx - reportWebVitals
.js> reportWebVitals.ts - setupTests
.js> setupTests.ts
Fix TypeScript error
After modifying file extensions, TypeScript shows the errors. To fix the errors, add the code below on the top of App.test.tsx and App.tsx files
import React from 'react';
And then, open reportWebVitals.ts file and modify it like below.
import { ReportHandler } from 'web-vitals';
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
...
And, create ./src/custom.d.ts file and modify it like below.
declare module '*.svg' {
import * as React from 'react';
export const ReactComponent: React.FunctionComponent<React.SVGProps<
SVGSVGElement
> & { title?: string }>;
const src: string;
export default src;
}
Execution
After modification, execute the command below to check the project work well.
npm start
If you don’t have any problem, you can see the screen like below on your browser.
Template
We use create-react-app not to set many configurations to start the React project. However, there are too many settings to use TypeScript. TypeScript becomes an important part of JavaScript, so it’s better to use TypeScript for React.
The create-react-app team also known TypeScript’s importance, so they provide the Template option to set TypeScript simpler. Let’s see how to use the Template option to configure TypeScript on React.
Execute the command below to create a React project applied TypeScript.
npx create-react-app my-app --template=typescript
After creating, when you open the folder of the project, you can see all configurations that we’ve done above.
Completed
In this blog post, we’ve seen how to configure TypeScript to the React project which is created by create-react-app. Also, we’ve seen when we create a new React project with create-react-app, using the Template option makes simpler to configure TypeScript to the React project.
Now, you can apply TypeScript to your React project!
Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!
App promotion
Deku.Deku created the applications with Flutter.If you have interested, please try to download them for free.
