How to Create a React App With TypeScript

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.

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.

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.