React is a popular library for building user interfaces or UIs with reusable components...

React is an excellent library for building UIs with reusable components. Learn how to easily create a React app with the TypeScript language with this tutorial.

Learn to Expertly Create a React App with TypeScript

How to Create a React App With TypeScript

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:

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

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.

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.

Basics of state, props, and implementing a component

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.

Conclusion

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

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

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.

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

Frequently Asked Questions

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

Press

Know more about remote work.
Checkout our blog here.

Blog

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

FOR DEVELOPERS

How to Create a React App With TypeScript

Author

Afroze Kabeer Khan. M

What Is ValueError in Python and How to Fix It?

How to Validate URLs in JavaScript

How to Get the Size of a File in Python

How to Build Routes in Flask

How to Build React Custom Hooks in TypeScript

Frequently Asked Questions

Press

Blog

Contact

Hire remote developers