Tutorial: React, TypeScript, and Test-Driven Development

Paul Everitt

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.

CHECK OUT THE TUTORIAL

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

Subscribe to WebStorm Blog updates

Subscribe form

By submitting this form, I agree to the JetBrains Privacy Policy Notification icon

By submitting this form, I agree that JetBrains s.r.o. ("JetBrains") may use my name, email address, and location data to send me newsletters, including commercial communications, and to process my personal data for this purpose. I agree that JetBrains may process said data using third-party services for this purpose in accordance with the JetBrains Privacy Policy. I understand that I can revoke this consent at any time in my profile. In addition, an unsubscribe link is included in each email.

Submit

Thanks, we've got you!