Tips & Tricks

Tutorial: React, TypeScript, and Test-Driven Development

React is wildly popular and thus widely supported. TypeScript is increasingly popular, and thus increasingly supported.

Over the past few years, the two have been increasingly used together. But this combination changes quickly, which makes it difficult to find accurate up-to-date learning materials. Finding learning materials for them with test-driven development (TDD)? Harder still.

This series will cover the relationship between React, TypeScript, and TDD, as well as the features JetBrains IDEs offer for working with them. In these videos, I show a little about a lot. We’ll take a look at the key steps to becoming comfortable with using the IDE for React projects with TypeScript. Along the way, I’ll demonstrate test-driven development and provide you with loads of tips and tricks you can use in your IDE.

I really enjoyed writing and recording this tutorial. It originated years ago in a simple way: each time I worked with React and TypeScript together, I struggled to find good, accurate tutorials. As I worked on this series, I kept finding places where the IDE helped speed things up. I wanted to both provide some instruction about React and illustrate the fun I was having with the IDE.


This 10-part tutorial tries to emphasize a few common ideas:

  • Fail faster. Use the IDE, and the benefits of TypeScript, to identify mistakes quickly.
  • Let the IDE be the janitor. When you’re coding, you want to stay in the flow. Need to generate imports? Let the IDE do it for you.
  • Browser last. Constantly switching over to the browser to see if your logic works is tedious and disruptive. Stay in the flow by staying in the tool. Write tests as you develop to get the best tooling experience, and render with Node.js/jsdom instead of the browser.

Watch this series and let me know what you think with a comment on YouTube, or a nudge on Twitter. I’d love to hear from you about this format, these techniques, and whether you’d like more videos that are 80% about a technology with 20% about how our IDEs can help you to speed up your work with it.

The WebStorm team

image description