Step 12 - React tutorial: Presentation and container components смотреть онлайн

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

Follow the React pattern of container/presentation components by refactoring the code and tests.

00:00 - Start
00:28 - Change counter props to include the new argument
00:39 - Replace stateful class-based component with a dumb functional component
00:57 - Tests now "fail faster" thanks to TypeScript red squiggles
01:00 - Fix tests to pass in the count
01:28 - Change interface to pass in prop for the handler
01:48 - Get then use that handler in the component
02:10 - Fix test by passing in a spy as the callable
02:50 - Clean up some tests
03:08 - Use the spy to see if it was called with the correct args
03:35 - Make the too-heavy click handler prop lighter by getting only needed arg info
03:57 - Convert Counter component to use this passed-in boolean and unpack the event
04:26 - Then call the parent's callable
04:50 - Change the test to reflect the new arg
05:10 - Fix parent component to use the new contract
05:23 - Model the state in the interface, then in the generic
05:45 - Add a component constructor to set the parent's state
06:06 - Method that handles the incrementing of the state
06:40 - Change from method to prop to fix the binding
06:53 - Update the render to use this when calling the dumb child component
07:28 - Add some tests on the parent to reflect the new contract
08:38 - Reminder that all was done without a browser




More on this tutorial step:
https://www.jetbrains.com/pycharm/guide/tutorials/react_typescript_tdd/presentation_components/
The rest of this "React, TypeScript, and TDD" tutorial:
https://www.jetbrains.com/pycharm/guide/tutorials/react_typescript_tdd/
See tips, tutorials, and more in the PyCharm Guide:
https://www.jetbrains.com/pycharm/guide/tips/