Webinar Recording: Using React + TypeScript + TDD, Part 2
The recording from the React + TypeScript + TDD in WebStorm, Part 2 webinar is now available on the JetBrains YouTube channel!
In this webinar, Paul Everitt, the PyCharm and WebStorm Developer Advocate at JetBrains, shared more tips and tricks that can help you work more efficiently when developing React applications using TypeScript.
Please find the full list of the topics Paul covered along with their timestamps below:
- 02:54 – TSX and ES6
- 13:58 – Functional React components in TypeScript
- 27:58 – Sharing props using type information
- 35:25 – Class components with props
- 45:36 – Modeling class state with TypeScript interfaces
- 56:10 – Rich events and testing
Here are some questions from the webinar Q&A session:
Q: I missed the first part of this webinar, is there a link to the recording?
A: Please take a look at this blog post where we shared the link to the recording along with some other relevant information.
Q: Do you have any tips on how to develop a TDD mindset when coding? This methodology is really interesting but it’s hard to get used to.
A: “The Three Laws of TDD” by Uncle Bob is a great read to get into the TDD mindset, provided that you take it seriously and try to follow the laws described in there. Also, there are a lot of short video lessons published on egghead.io that may help with that too (e.g. the ones by Kent C. Dodds).
The plugin that Paul used to display the shortcuts on the screen is called Presentation Assistant. You can find it in Preferences/Settings | Plugins.
Lastly, here are some of the handiest shortcuts that Paul used during the webinar, most of which can also be found in the default WebStorm keymap reference:
General (macOS/Windows and Linux, shortcuts for the default keymaps)
Show/Hide Version Control Tool Window – Cmd-9/Alt-9
Show/Hide Project Tool Window – Cmd-1/Alt-1
Show Context Actions – Alt-Enter
Navigation
Recent Files – Cmd-E/Ctrl-E
Go to Declaration – Cmd-B/Ctrl-B
Go to Symbol – Alt-Cmd-O/Ctrl-Alt-Shift-N
Code Editing
Reformat Code – Alt-Cmd-L/Alt-Ctrl-L
Optimize Imports – Cmd-Alt-O/Ctrl-Alt-O
Extend Selection – Alt-Up/Ctrl-W
Shrink Selection – Alt-Down/Ctrl-Shift-W
Refactoring
Refactor This – Ctrl-T/Shift-Ctrl-Alt-T
We hope you liked the webinar and learned something new! In 2020, we plan to do more interesting webinars, so, if you have any ideas on what you’d like to learn about, please share them in the comments below.
The WebStorm Team
Subscribe to WebStorm Blog updates
