Step 7 - React tutorial- Functional React components in TypeScript

### Step 7 in the "React, TypeScript, and TDD" tutorial

React builds UIs as a tree of components. See how to make stateless functional components correctly with TypeScript.

00:00 - Start
00:17 - Stop the webpack devserver as we'll be in TDD mode the whole time (YAY)
00:27 - Simpler setup of TSX and component
00:52 - Make tests fail by looking for what we're about to write
01:02 - Implement the React functional component for heading
01:19 - In test, get the IDE to generate import to new heading, tests pass
01:31 - Write test for parent usage of new child, using Enzyme shallow renderer
01:45 - Write a new test with mount, to get both parent and child
02:42 - Change the parent component (the app) to use the child
02:54 - Single responsibility principle violation
03:06 - Move Heading to its own file
03:22 - Export default
03:44 - Extract the Heading tests to a standalone test
04:07 - Clean up imports
04:17 - Get the parent to do imports for the new file
04:35 - Same for the parent's test file
05:04 - Use TypeScript to say the Heading is a functional component

More on this tutorial step:
The rest of this "React, TypeScript, and TDD" tutorial:
See tips, tutorials, and more in the PyCharm Guide: