Deep-dive tutorial series on React, TypeScript, and TDD
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.
Subscribe to PyCharm Blog updates
