Webinar Preview: “Sharing Props Using Type Information” tutorial step for React+TS+TDD

Paul Everitt

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:

Subscribe to PyCharm Blog updates

Subscribe form

By submitting this form, I agree to the JetBrains Privacy Policy Notification icon

By submitting this form, I agree that JetBrains s.r.o. ("JetBrains") may use my name, email address, and location data to send me newsletters, including commercial communications, and to process my personal data for this purpose. I agree that JetBrains may process said data using third-party services for this purpose in accordance with the JetBrains Privacy Policy. I understand that I can revoke this consent at any time in my profile. In addition, an unsubscribe link is included in each email.

Submit

Thanks, we've got you!