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:
https://www.jetbrains.com/pycharm/gui...
The rest of this "React, TypeScript, and TDD" tutorial:
https://www.jetbrains.com/pycharm/gui...
See tips, tutorials, and more in the PyCharm Guide:
https://www.jetbrains.com/pycharm/gui...
Смотрите видео Step 7 - React tutorial- Functional React components in TypeScript онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь PyCharm, a JetBrains IDE 03 Июнь 2020, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 1,569 раз и оно понравилось 6 людям.