React - Create project with TypeScript and Yarn

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

  1. 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.

  2. 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.

  3. Now open a terminal in your local React project folder recently created and follow the GitHub instructions:

  4. 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.

  5. Rename the local branch using the name used by GitHub, in my case “main”:

    git branch -M main
    
  6. Push the local repo into the remote GitHub repository:

    git push -u origin HEAD
    
  7. 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"]
    }
    
  8. Update .gitignore adding these lines:

    # compiled output
    /dist