Webinar Preview: Project Setup for React+TS+TDD

Next Wednesday (Oct 16) I’m giving a webinar on React+TypeScript+TDD in PyCharm. Let’s give a little background on the webinar and spotlight one of the first parts covered.



Earlier this year we announced a twelve-part in-depth tutorial on React, TypeScript, and Test-Driven Development (TDD) in PyCharm. For the most part it highlights PyCharm Professional’s bundling of WebStorm, our professional IDE for web development.

The tutorial is unique in a few ways:

  • It’s React, but with TypeScript, a combination with spotty coverage
  • Concepts are introduced through the lens of test-driven development, where you explore in the IDE, not the browser
  • Each tutorial step has a narrated video plus an in-depth discussion with working code
  • The tutorial highlights places where the IDE does your janitorial work for you and helps you “fail faster” and stay in the “flow”

This webinar will cover sections of that tutorial in a "ask-me-anything" kind of format. There’s no way we’ll get through all the sections, but we’ll get far enough give attendees a good grounding on the topic. As a note, I’m also later giving this tutorial later as a guest for both an IntelliJ IDEA webinar and Rider webinar.

I really enjoy telling the story about combining TypeScript with TDD to "fail faster", as well as letting the IDE do your janitorial work to help you stay in the "flow." Hope you’ll join us!

Spotlight: Project Setup

The tutorial starts with Project Setup, which uses the IDE’s integration with Create React App to scaffold a React+TypeScript project. Note: The tutorial is, as is common in the world of JS, six months out of date. Things have changed, such as tslint -> eslint. I’ll re-record once PyCharm 2019.3 is released, but for the webinar, I’ll use the latest Create React App.

For this tutorial I started with an already-generated directory, but in the webinar I’ll show how to use the IDE’s New Project to do so.

This tutorial step orients us in the IDE: opening package.json to run scripts in tool windows, generating a production build, and running a test then re-running it after an edit.

The second tutorial step does some project cleanup before getting into testing.

image description