Webinar Preview: “Sharing Props Using Type Information” 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: Sharing Props Using Type Information

Now we get to some fun stuff: Sharing Props Using Type Information.

When you have lots of small components, they share information from parent "smart" components to child "dumb" (or presentation) components. This information is shared via properties, which forms the contract.

How do you write down that contract? This is where doing your React projects in TypeScript really shines. You can make an interface for your property information and say that your component’s properties conform to that interface. You gain IDE autocomplete, warnings, and more.

This really shines in TDD. You "fail faster" with visual squiggles that indicate you broke the contract, rather than waiting for the test to run.

This tutorial step shows a React functional component with property information in an interface, along with showing how to allow a default value for a prop. All done from a test-first workflow:

image description