React - Create project with TypeScript and Yarn
![](https://blog.jmorbegoso.com/img/front-end-web-development-logo.webp)
TypeScript has advantages over JavaScript, such as strict typing, so using TypeScript in React is very useful.
Requisites
- TypeScript globally installed
- Yarn package manager globally installed
Steps
Create a new React project using the TypeScript template:
yarn create react-app [[Here goes your project name]] --template typescript
Replace
[[Here goes your project name]]
with your project name.The project is created using Yarn package manager instead of NPM, also this will initialize a Git repository.
Now you can create a GitHub repository for the new project: Open GitHub and create a new repository empty, so do not include Readme, Git ignore, or License.
Now open a terminal in your local React project folder recently created and follow the GitHub instructions:
Link the local repository with the remote GitHub repository:
git remote add origin [[Here goes your URL repository]].git
Replace
[[Here goes your URL repository]]
with your GitHub URL repository.Rename the local branch using the name used by GitHub, in my case “main”:
git branch -M main
Push the local repo into the remote GitHub repository:
git push -u origin HEAD
Open the file
tsconfig.json
and replace its content with:{ "compilerOptions": { "target": "es2020", "module": "esnext", "baseUrl": "./", "outDir": "./dist", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx", "removeComments": true, "noImplicitReturns": true, "sourceMap": true, "incremental": true, "experimentalDecorators": true, "declaration": true }, "include": ["src"] }
Update
.gitignore
adding these lines:# compiled output /dist