For Developers

How to Create a React App With TypeScript

How to Create a React App With TypeScript

React is a popular library for building user interfaces or UIs with reusable components. It has been in existence for around 10 years and has matured well with the ever-evolving internet. It uses a virtual DOM to generate and manipulate UIs. In this article, we will look at how to create a React app with the TypeScript programming language.

The most basic concepts to get started with React are:

  • Know how to create a simple component
  • Understand what props and states are
  • Know the differences and the implementation of class and function-based components
  • Understand context, hooks, and their usage concepts.

Some advanced concepts that are useful to know are:

  • The differences between Context and Redux
  • Applying memoization to components and functions
  • Using hooks to abstract reusable implementation of hooks/context
  • Choosing between SPA or server-side rendering.

Basics of state, props, and implementing a component

Let’s create a basic application.

React uses a tool called create-react-app to generate a project with zero configuration required. It uses Babel and Node to get started.

Let’s assume Node and Npm are already installed.

We run the following command to create a basic project:

npx create-react-app <any-name>

The command will create a folder and install the necessary plugins and scripts to get started with the development.

React with Typescript.webp

We move into the directory and run the script npm start. A Development server is started which opens a new tab on our default browser with the React application running.

We now open src/App.js and make some changes so they get instantly reflected on the browser’s tab.

Create React App With Typescript.webp

Let’s create our first component within the src folder. To do so, we create a file called Heading.js with content that looks like the following:

const Heading = (props) => {
  return(
    <h1>{props.heading}</h1>
  )
}

export default Heading;

Here in our function-based component, we are passing a parameter (props) which should contain a key called heading rendered in H1.

The next step is to clear the contents of App.js and use it like the following:

import Heading from './Heading'

const App = () => {
  return(
    <div>
      <Heading heading={heading} />
    </div>
  )
}

export default App;

We are importing the Heading component and calling it within another functional component, App, which will be our root component.

If we look at Heading, it is being added as a self-closing tag that starts with capital letters. This is important to differentiate between built-in tags like h1, div, p, and self-created components. Additionally, we are passing an attribute heading which is props to the Heading component.

As seen in the code below, we’ve made use of two hooks, useState and useEffect. We are calling useEffect as a function and passing a function as the first parameter and empty array. We are telling React to run the function as soon as the component is mounted, and if we are returning a function that will be called to clean up before the component is unmounted.

import {useEffect, useState} from 'react';
import Heading from './Heading'

const App = () => {
  const [heading, setHeading] = useState('')

  useEffect(() => {
    const timeout = setTimeout(() => {
      setHeading('Hello World')
    }, 3000)

    return () => {
      clearTimeout(timeout)
    }
  },[])

  return(
    <div>
      <Heading heading={heading} />
    </div>
  )
}

export default App;

We are asking React to set a state called title after 3 seconds. And in case the page is reloaded before the return function, it will help us to remove the timeout to prevent unlikely behavior.

Now, let’s add TypeScript to this React project.

A quick note: TypeScript is basically JavaScript which adds syntax to make strong type-checking to components and any functions created. It helps with tooling and making it easier on applications that are large-scale. It also benefits diversified teams. It is useful in building component libraries that require understanding the types to be fed to customize the components to an application.

React has a built-in type-checking called PropTypes as a static type-checking of the props that are needed for the component. We can either choose from flow or type-script for type-checking in React. Considering the scope, let’s get started with type-script to begin with development.

We run the following command to install the required dependencies:

yarn add typescript @types/node @types/react @types/react-dom @types/jest

We then rename the files in index.js file to index.tsx, App.js to App.tsx and Heading.js file to Heading.tsx. We restart our server (yarn start). Here, we will start to see that it points out a few issues.

In our case, there are issues in index.tsx. It should be fixable from the error messages received. Now, we can start adding types to the Heading component props.

import React from 'react';

interface HeadingProps {
  heading: string
}

const Heading = (props: HeadingProps) => {
  return(
    <h1>{props.heading}</h1>
  )
}

export default Heading;

We are all set to get started with development in React with TypeScript. Note that we need to explicitly import React for components in TypeScript.

Conclusion

In this React TypeScript tutorial, we learned how to create a React app with TypeScript and explored a few components and functions. With the help of these basics, one can gradually move on to more advanced apps. The code discussed here can be found at this link.

Author

  • Author

    Afroze Kabeer Khan. M

    Author is a Full-stack developer and Polyglot programmer. He has experience in building an OTT platform and also has built a mobile application for a smart ring. He has worked with platforms like Web, Mobile, and Kiosk-based systems.

Frequently Asked Questions

React is a library to build reusable UI components that can be used to build heavy applications.

Yes, React also supports SSR. Frameworks like NextJS are by default enabled for SSR.

React with TypeScript is more suitable for huge teams with diversified expertise and who need the autocomplete feature to be heavily supportive.

Yes, in certain files TypeScript can be disabled. This can also be configured in tsconfig.json to make it optional.

View more FAQs
Press

Press

What's up with Turing? Get the latest news about us here.
Blog

Blog

Know more about remote work.
Checkout our blog here.
Contact

Contact

Have any questions?
We'd love to hear from you.

Hire remote developers

Tell us the skills you need and we'll find the best developer for you in days, not weeks.

Hire Developers