Setting up Your First React TypeScript Project From Scratch

Are you looking to create your own React TypeScript project, but don't know where to start? With this blog post, you'll get a comprehensive guide to setting up a React TypeScript project from scratch. We'll discuss the necessary components and considerations for environment setup, creating a basic project structure and running the application. With this comprehensive guide in hand, you'll have all the information you need to get started on your React TypeScript journey and create something truly amazing. So, let's dive in and get started on your React TypeScript project!

Click the image below to watch the YouTube video version of this blog post:

Installing Create React App

Today, Create React App is the most popular way to create a React project. It's a tool that allows you to create a React project without having to worry about the configuration. It's a great way to get started with React and TypeScript. You can create a new project with Create React App using npx with the following command:

npx create-react-app my-app

This will create a new React project in the my-app directory. Now that your React project is set up, it's time to run the application. You can then run the project with the following command:

cd my-app
npm start

This will start the development server and open the application in your browser in http://localhost:3000. You can now start developing your React TypeScript project!

Note: npx is installed on your machine when you install Node.js.

Installing TypeScript

To use TypeScript in your Create React App project, you need to add a tsconfig.json file that holds the TypeScrupt configuration. You can do this by running the following command:

touch tsconfig.json

And add this configuration to the tsconfig.json file:

{
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": "src",
    "sourceMap": true,
    "noImplicitAny": true,
    "allowJs": true,
    "moduleResolution": "node",
    "module": "commonJS",
    "lib": ["es6", "dom"],
    "target": "ES5",
    "jsx": "react"
  },
  "exclude": ["node_modules", "dist"]
}

To use TypeScript in your project, you only need to restart the development server by running npm start again. This will now compile your TypeScript code to JavaScript and run the application.

Every file in your application can be renamed from js to tsx to use TypeScript. You can also add the ts extension to your files, but it's needed to use tsx for React components as these files contain JSX.

You can now start developing your React TypeScript project!

Allowing synthetic default imports

In your IDE you might see some errors highlighted about synthetic default imports. This is because TypeScript doesn't know how to import the default export from a module. By default, imports in TypeScript have the following syntax:

import * as React from 'React';

If we want to keep importing our modules as we did with Babel, we need to change some settings in our tsconfig.json file:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    ...
  }
}

After this, we can deconstruct our imports again and avoid the obligatory asterisk *:

import React, { FC } from 'react';

This will allow us to import our modules as we did before. But there are more things we should do to make our TypeScript project more robust.

Adding global type definitions

Another highlighted error in your IDE (I'm using VS code) is that it cannot find the type definitions for the SVG files we're importing.

Cannot find module './logo.svg' or its corresponding type declarations.

To fix this, we need to add this type definition to our project. We can do this by creating a global.d.ts file in the src directory and adding the following code:

declare module '*.svg' {
  const content: string;
  export default content;
}

This will allow us to import SVG files in our project without any errors.

Creating a TypeScript React component

Now that we've set up our project, it's time to create our first TypeScript React component. We can do this by creating a components/Link.tsx file in the src directory and adding the following code:

import * as React from 'react';

type LinkProps = {
  href: string;
  targetBlank: boolean;
  children: React.ReactNode | string;
};

export default function Link({
  href,
  targetBlank = false,
  children,
}: LinkProps) {
  return (
    <a
      className='App-link'
      href={href}
      target={targetBlank ? '_blank' : ''}
      rel={targetBlank ? 'noopener noreferrer' : ''}
    >
      {children}
    </a>
  );
}

This will create a simple Link component that we can use in our application. We can now import this component in our App.tsx file and use it in our application.

For example, we can replace the a tag in the App.tsx file with our Link component:

import * as React from 'react';
import logo from './logo.svg';
import './App.css';
import Link from './components/Link';

function App() {
  return (
    <div className='App'>
      <header className='App-header'>
        <img src={logo} className='App-logo' alt='logo' />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <Link href='https://reactjs.org' targetBlank>
          Learn React
        </Link>
      </header>
    </div>
  );
}

export default App;

This will now render the Link component in our application. You can now start developing your React TypeScript project by adding more components!

Conclusion

By the end of this blog post, you should have all the information you need to get started on React TypeScript development. We've discussed how to set up an environment, create a project structure and run the application. And that’s it! With this comprehensive guide in hand, you now have all the information you need to set up and run your React TypeScript project from scratch. I hope this guide was helpful and wish you luck on your React TypeScript journey!

Good luck and happy coding!

P.S. Follow Roy Derks on Twitter for more React, GraphQL and TypeScript tips & tricks. And subscribe to my YouTube channel for more React, GraphQL and TypeScript tutorials.