React.js or React.ts?

3 min readJan 1, 2023

Javascript is a programming language used for building websites and web applications. It is simple, fast, tons of libraries available, huge support. It is very easy to get started anyone to get started with programming and building website.

But….

As the application progresses, a major problem that scares any developer is things breaking at run time… especially if the code runs fine during development (which are not identified due to cache), but starts breaking once pushed onto production. Don’t get me wrong Javascript is one of the greatest technology out there.

Need More….

As developers we need something more, something better that identifies syntax errors during the development and compilation. Well thats when typescript comes into picture, it is a open source library and a superset of javascript. It is basically a typed version of javascript at its core, but it does more than just adding types to the code. It helps us easily solve many problems during the compilation itself.

Use React.js or React.ts..?

React.js is an open-source javascript library used for developing frontend for any application. It is used for building a Single Page Applications(SPA). Its reactive nature makes it easy to change state of any element on the page displayed.

As it is a javascript library, all the files created in the react project uses javascript. As explained earlier, it becomes difficult to track issues as the project grows.

To solve this, React also supports writing code in Typescript.

Create a new react project with typescript

Creating a react project is very simple we run a command in the Terminal. This creates a react project with javascript.

npx create-react-app demo-app

In order to create a react project using typescript we use the same command with a template argument as typescript.

npx create-react-app demo-app --template typescript

Once the above command is successfully executed. A react project (here its named demo-app) will be created using typescript.

Notice that there file name are ending with .ts or .tsx and a file named tsconfig.json is created as part of the project.

Files ending with .tsx, are for writing react code
Files ending with .ts, are for writing code using typescript
tsconfig.json tells typescript how to compile the code

Adding typescript to existing React project

This is a three step process.

Step 1: Installing all the required libraries
Step 2: Configuring typescript
Step 3: Changes the file extensions

Step 1 — Install all the required libraries

If we have a existing react project without typescript, use the following command to install typescript, type defined node, react and react-dom to the project.

npm install --save -D typescript @types/node @types/react @types/react-dom

Once the command is successfully executed in the terminal, it will install the libraries as part of devDependencies.

Step 2 — Configuring typescript

Now create a file named tsconfig.json, at root of the react project. Add the following to the file and make respect changes based on our requirement.

{
  "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-jsx"
  },
  "include": [
    "src"
  ]
}