Deep-dive tutorial series on React, TypeScript, and TDD

Paul Everitt

React is obviously super-hot, TypeScript has recently become super-hot, and the combination is attracting increasing interest. Combined with Jest for test-driven development (TDD)…great developer experience.

Want to see what our IDE has to offer for fullstack Python projects which use React frontends? We’re proud to release a long, LONG “under construction” tutorial series: React, TypeScript, and TDD. Videos, code, write-ups with screenshots, organized into 12 parts.

And along the way, a formal unveiling of the PyCharm Guide, a compendium of resources for becoming a PyCharm badass.

The Tutorial Series

It’s hard to find quality, updated resources for learning React and TypeScript with Jest testing. In fact, that was the genesis of this series. I wanted to remember what I (painfully) learned, so I started documenting it.

The idea grew into what we developer advocates at JetBrains do a ton of: videos. And code. And caring deeply about helping our customers get “into the flow” with new technologies. Our IDEs go the extra mile to do the janitorial work and keep you productive at what you’re doing. I wanted to show what PyCharm, via the exceptional WebStorm team, could do.

But I chose to do the series in very different way: TDD. As each skill is shown, rather than portray it through “switch over to your browser, click around”, we stay in the IDE and learn via tests. Meaning, how the code works rather than how it looks. And most of all, you stay “in the flow."

Each step in the tutorial focuses on something you’d like to learn in React (e.g. Functional Components.) The step provides working code in a repo for the finished step, an extensive “you can’t go wrong” writeup focused on the “why” as much as the “how”, occasional screenshots, and a narrated video at the end to see it all in action.

One other choice: the series is delivered in a new facility we’re calling the PyCharm Guide.

About the PyCharm Guide

Those watching our recent “tip tweets” may have spotted something different. Some of our tweets appear as “cards” with a link to a full page about that tip. A page with…a lot more information than just the tip:

  • A full writeup explaining the tip, what problem it is solving, and variations on the tip for different situations
  • Links to related tips, along several axes (technology, topic, author)
  • Links to external content (e.g. help system articles)
  • A short, narrated video about that tip
  • Playlists which organize the tips into a certain sequence

The goal of the Guide is simple: help you become a badass Python developer, putting the power our IDE to work to keep you in the coding flow. The Guide is your "guide".

To get there, the Guide is done in a different way:

  • Content is done in an open source GitHub repo as Markdown using an open source static-site-generator (SSG)
  • We’ll thus accept issue tickets, PRs, and contributions, all in a normal community fashion
  • We’re doing this in a “let’s see what happens” kind of way, learning from the community to decide what’s next
  • A focus on what you want to accomplish (React and TypeScript) as much as how PyCharm works

The Guide is a work-in-progress. Lots more tips to do (42 Tips and Tricks), lots more tutorials to write (pytest, type hints), new content types to add, explanation on how to participate, etc.. At the moment we’re using GatsbyJS as an SSG for the "modern web”, though this might go in a different direction. But that’s ok: the software is less important than the concept and content.

So please, enjoy this 12-part tutorial series on React+TS+TDD. We hope it’s useful, and hope the Guide becomes a useful resource for your learning journey.

Comments below can no longer be edited.

11 Responses to Deep-dive tutorial series on React, TypeScript, and TDD

  1. m_gol says:

    April 18, 2013

    Why does it still show 2.7 EAP at startup? I even downloaded final 2.7.2 manually and “installed” it (I’m on OS X 10.8.3) and it still shows EAP…

    • Yury V. Zaytsev says:

      April 19, 2013

      Indeed 😉 I guess another build is coming 🙂

    • Dmitry Jemerov says:

      April 19, 2013

      This error affects only the image; the build itself is fine.

      • m_gol says:

        April 19, 2013

        So, do you plan to create a new 2.7.2 image for OS X?

        • Dmitry Jemerov says:

          April 21, 2013

          The splash screen will be corrected in the 2.7.3 release. We don’t currently plan to release an urgent hotfix for 2.7.2.

  2. Robson Peixoto says:

    April 21, 2013

    Python plugin for IntelliJ IDEA was released too?

  3. Francisco Casas Salgado says:

    April 26, 2013

    Since version 2.7.2 RC1 throws an error after i create a folder at the project panel and the created folder doesn’t appears, if i try to creat it again the IDE tells me that the folder already exists, but even if i refresh the panel the folder doesn’t appears.
    The problem persists in latest 2.7.2 version.

    • herr says:

      May 6, 2013

      same here. 🙁

  4. Jakub says:

    April 26, 2013

    After upgrading from 2.7.1 to 2.7.2 PyCharm is not starting… I can only see the splash screen! I run MacOS Lion. How to revert to 2.7.1 ???

    • Robert says:

      May 6, 2013

      If you have the .dmg for 2.7.1 you open it…drag the icon over and it will replace the installed version. Simple on OSX.

      • Jakub says:

        May 16, 2013

        The problem is I don’t have 2.7.1 dmg. Otherwise I wouldn’t ask how to revert 🙂 Is it possible to download 2.7.1 version from somewhere?


Subscribe for updates