Getting Started with React and TypeScript

React and TypeScript makes for a fantastic combination when it comes to developing web sites and web applications. With React's focus on creating a fantastic user interface and TypeScript's ability to type check our code, it's never been easier to sanely develop a fantastic user experience.

Prerequisites

Before getting started, you'll need NodeJS and NPM installed. Go here to find instructions on how to install it on your computer.

You should also have a bit of knowledge in using React. If not, I highly recommend getting started learning React using vanilla JavaScript.

Create React App

Facebook's Create-React-App is a preview of the wonderful development experience React has to offer. It will enable us to start writing code immediately.

Check out their documentation here if you have any questions or want to dive in a touch deeper on how the tool works.

In summary, Create-React-App will set up a complete development environment for us. It will configure and conceal build tool configurations for us so that all we need to focus on is our code. Here is some of the tooling that CRA (create-react-app) sets up for us:

• Babel
• Webpack
• ESLint
• TypeScript

Let's use this tool now to create our TypeScript/React development environment. Use the following command to generate a new Typescript React App.

npx create-react-app my-app --template typescript

If you use yarn, use the following command:

yarn create react-app my-app --template typescript

After the tool has finished running, switch directories into my-app run the command npm start to spin up your development environment. Once it's done loading, we should see localhost:3000 open up.

Folder Structure

Create-react-app scaffolds out the folder structure of your app for us, minimizing the amount of code you need to write to go from idea to production.

Here are some important files to take note of:

- public/index.html - This is the HTML file that consumes the bundle generated by Create-React-App's hidden tooling.

src/index.tsx - This is the TypeScript entry point file. All of the project's dependencies are mapped out by Webpack (all set up for us invisibly by CRA) using this file. The bundle generated is injected into public/index.html. This file has a few responsibilities. The most important are:

• import our main React component
• Render that App component to the DOM using ReactDom.render()
  • src/App.tsx - This is our main React Component. The .tsx extension tells us that the file uses both TypeScript and JSX. This is the main component in our app which is rendered to the DOM by ReactDOM. We'll spend most of our time in this file getting the hang of writing React code using TypeScript.
  • tsconfig.json - This is the TypeScript configuration file. This file was generated for us by Create-React-App and we can freely edit this configuration to best suit our needs.

Hello, World - With TypeScript and React

Let's get to coding.

To keep things organized, make a new folder src/components and create our new component, src/components/HelloWorld.tsx. In this file, we'll write just 2 lines of code:

const HelloWorld = () => <h1>Hello, World!</h1>
export default HelloWorld

The first line defines our new component. It's simply a function that returns some JSX. In this case, it's our "Hello, World!" heading tag. The second line exports the component, allowing other modules to import it.

To import and use this component, load up src/App.tsx and do the following:

• Include import HelloWorld from './components/HelloWorld' at the very top of the file to import the component
• Use the component by having the App component return some JSX which includes <HelloWorld />.

After some refactoring, your App.tsx might look something like this:

import './App.css';
import HelloWorld from './components/HelloWorld'

const App = () => {
  return (
    <div className="App">
      <HelloWorld />
    </div>
  );
}

export default App;

In the above example, I've left the default styles, imported our HelloWorld component, and refactored the JSX which is returned by App so it includes <HelloWorld />.

Adding a bit of TypeScript

Let's increase the safety of our code by using some TypeScript features.

This is what our src/components/HelloWorld.tsx looks like right now:

const HelloWorld = () => <h1>Hello, World!</h1>
export default HelloWorld

A huge benefit of TypeScript is that it can help us catch errors before you run your code instead of at run-time. Let's introduce a bug to our code:

Refactor our HelloWorld component so it looks like this:

const HelloWorld = () => "Hello, World!"
export default HelloWorld

This is valid JavaScript, but not valid React. A functional component must return JSX (or null). It can't just return a string. We're made aware of this error when Create-React-App tries to build our code.

Let's refactor our code to use some TypeScript features so our editor notices the error:

import { FC } from 'react'
const HelloWorld: FC = () => "Hello, World!"
export default HelloWorld

The import statement imports the FunctionComponent type FC, and allows us to type our functional component to ensure it returns valid JSX. By typing the function, our editor can now immediately show us our error. Click here for more information on typing functions in TypeScript.

TypeScript is explicitly telling us that we can't assign a return type of string to our functional component. Now that TypeScript has shown us this error, let's correct it.

import { FC } from 'react'
const HelloWorld: FC = () => <h1>Hello, World!</h1>
export default HelloWorld

By fixing our function and returning JSX, HelloWorld now passes TypeScript's type checks and no error is thrown. As a result, our project builds and works once more.

Benefits of TypeScript

As shown in the previous example, TypeScript can help us catch errors before we even leave our code editor. This results in faster development since TypeScript will be actively debugging your code as you write. Better to catch silly errors immediately than insanity-inducing errors during run-time.

Let's show another example of how enforcing types can help us catch errors early.

We'll create a new React component, List. This new component will take an array of string data as a prop and return some JSX which renders a <ul> tag and iterate over the list of data, rendering an <li> for each piece of data.

Here is what my version of this component could look like with more type safety from TypeScript included.

src/components/List.tsx

import { FC } from 'react'

const List: FC<{ data: string[] }> = ({ data }) => (
  <ul>
    {data.map(item => <li>{item}</li>)}
  </ul>
)

export default List

Just like our previous example, we import FC from react and use it to type our function. What we're also doing is defining a type for our data prop. In this example, we are saying that data is an array of strings. Notice how self-documenting that is. This is a huge benefit of TypeScript.

Now let's insert this component into src/App.tsx, pass into it an array of data, and sprinkle in a bit more TypeScript.

src/App.tsx

import './App.css';
import { FC } from 'react'
import HelloWorld from './components/HelloWorld'
import List from './components/List'

const avengers = [
  'Captain America',
  'Iron Man',
  'Black Widow',
  'Thor',
  'Hawkeye',
]

const App: FC = () => {
  return (
    <div className="App">
      <HelloWorld />
      <List data={avengers} />
    </div>
  );
}

export default App;

We created an avengers array, with 5 members of the Avengers team. We then passed in this list of data as a property to List. This example works because we defined List to accept an array of strings. Let's trigger a TypeScript error and send it a more varied array.

import './App.css';
import { FC } from 'react'
import HelloWorld from './components/HelloWorld'
import List from './components/List'

const avengers = [
  'Captain America',
  'Iron Man',
  'Black Widow',
  'Thor',
  'Hawkeye',
  {
    name: 'Vision',
  },
  {
    name: 'Hulk',
    color: 'green',
  },
]

const App: FC = () => {
  return (
    <div className="App">
      <HelloWorld />
      <List data={avengers} />
    </div>
  );
}

export default App;

We added 2 new heroes to the avengers array, Vision and the Hulk, but we added them as objects, not as strings. This causes TypeScript to throw an error.

TypeScript is telling us that our data doesn't fit the definition of the data prop. It even points out to us exactly where this prop is defined. Let's assume that we should be sending an array of objects instead of strings. Let's refactor our files so everything works again.

src/App.tsx

import './App.css';
import { FC } from 'react'
import HelloWorld from './components/HelloWorld'
import List from './components/List'

const avengers = [
  { name: 'Captain America' },
  { name: 'Iron Man' },
  { name: 'Black Widow' },
  { name: 'Thor' },
  { name: 'Hawkeye' },
  { name: 'Vision' },
  { name: 'Hulk' },
]

const App: FC = () => {
  return (
    <div className="App">
      <HelloWorld />
      <List data={avengers} />
    </div>
  );
}

export default App;

src/components/List.tsx

import { FC } from 'react'

const List: FC<{ data: { name: string }[] }> = ({ data }) => (
  <ul>
    {data.map(({ name }) => <li>{name}</li>)}
  </ul>
)

export default List

We changed our List component definition and explicitly typed the data prop to be an array of objects containing a string type name property. By explicitly typing our data prop, we know its exact shape and can catch if we send this component any prop that is shaped differently than this.

Conclusion

By adding a type layer over JavaScript, TypeScript successfully saves developers time and frustration, even giving us a hand in self-documenting our code. While there surely is much more left to learn in typing your React applications, this should be a good platform to begin wading into the deep end of the pool, so to speak.

Happy coding!

This Dot Labs is a modern web consultancy focused on helping companies realize their digital transformation efforts. For expert architectural guidance, training, or consulting in React, Angular, Vue, Web Components, GraphQL, Node, Bazel, or Polymer, visit thisdotlabs.com.

This Dot Media is focused on creating an inclusive and educational web for all. We keep you up to date with advancements in the modern web through events, podcasts, and free content. To learn, visit thisdot.co.