Webinar Preview: “Functional React Components in TypeScript” tutorial step for React+TS+TDD

As a reminder… next Wednesday (Oct 16) I’m giving a webinar on React+TypeScript+TDD in PyCharm. I’m doing some blog posts about material that will be covered.


See the first blog post for some background on this webinar and its topic.

Spotlight: Functional React Components in TypeScript

Note: I’m skipping over a blog post for the tutorial step TSX and ES6 tutorial step. Should have started these spotlight blog posts sooner!

One thing is for sure about the React Zen: they promote lots and lots of tiny components. Which fits in very well with this tutorial’s TDD approach. Uncle Bob refers to this as the Single Responsibility Principle and SRP is mentioned frequently in React.

In the Functional React Components in TypeScript tutorial step we extract some markup and logic from the component into a Heading subcomponent. In this first step we don’t extract state or logic. We do, though, write tests first and learn a little more about the ways to interact with the DOM of a React component from within a test.

Here’s the narrated video for this step:

image description