Webinar Recording: Using React + TypeScript + TDD, Part 1
The recording from the React + TypeScript + TDD in WebStorm, Part 1 webinar is now available on the JetBrains YouTube channel!
In this webinar, Paul Everitt, the PyCharm and WebStorm Developer Advocate at JetBrains, shared some tips and tricks that could help you be more productive when developing React applications using TypeScript.
Please find the full list of the topics Paul covered along with their timestamps below:
- 00:05 – Project setup
- 10:51 – Project cleanup
- 25:12 – Testing
- 34:20 – Debugging during testing with Node.js
- 46:42 – Debugging with Chrome
- 51:52 – Survey of next steps and wrap-up
Here are some questions from the webinar Q&A session:
Q: Are all these tips and tricks still applicable if I use PyCharm?
A: Yes, all the WebStorm features work the same way in PyCharm Professional and other IntelliJ-based IDEs.
Q: Do you have the same webinar but for building Angular applications?
A: We’d recommend checking this video recording out. In this webinar, we went through the IDE setup and shared some tips on using WebStorm more efficiently when working with Angular applications.
Q: When the IDE does imports automatically, how can I adjust the styling for that (e.g. single quotes, whitespaces, etc.)?
A: You can configure the code style in Preferences/Settings | Editor | Code Style | JavaScript or TypeScript.
Q: How can I specify the order of imports? Let’s say I want to have imports from node_modules first, then an empty line and imports from src.
A: It’s now only possible to sort imports alphabetically. Please vote for this feature request: https://youtrack.jetbrains.com/issue/WEB-21182.
Q: Why did you choose TDD over BDD?
A: TDD is more widely used at the moment, and we wanted this webinar to be interesting for a broader audience.
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, which can also be found in the default WebStorm keymap reference:
General (macOS/Windows and Linux, shortcuts for the default keymaps)
Find Action – Shift-Cmd-A/Shift-Ctrl-A
Show Context Actions – Alt-Enter
Navigation
Recent Files – Cmd-E/Ctrl-E
Find Usages – Alt-F7
Code Editing
Reformat Code – Alt-Cmd-L/Alt-Ctrl-L
Optimize Imports – Cmd-Alt-O/Ctrl-Alt-O
Refactoring
Refactor This – Ctrl-T/Shift-Ctrl-Alt-T
Rename – Shift-F6
Running and Debugging
Run – Ctrl-R/Shift-F10
Debug – Ctrl-D/Shift-F9
Rerun Tests – Ctrl-Cmd-R/Alt-Shift-R
Evaluate Expression – Alt-F8
Toggle Breakpoint – Cmd-F8/Ctrl-F8
We hope you liked the webinar and took something new away from it! We’ll have the second part where we’ll talk about such things as sharing props using type information, modeling class state with TypeScript interfaces, and more soon. Stay tuned for the announcement, in the meantime, you can already register for part 2 here.
The WebStorm Team
Subscribe to WebStorm Blog updates
