React + TypeScript + TDD in WebStorm, Part 1

all right so here we go we're gonna get started on the first step of this tutorial project setup if you look at this URL JetBrains Kampai charm guy tutorials regulated blue you'll see each one of these steps has a narrated video followed by a discussion that has working code and steps that go along each part of it I have done the part so you want to sit around and wait I've done the part where I ran create react app with passing the flag on typescript already and I've opened in two webstorm and here's what you get hey you're the webstorm audience I don't have to like I did with the other IDs give you the slow lane version of react is that package.json is oblivia blah so you're familiar with this we have a project we have a rack project with the package.json what can we do with this well we can fire up the dev server by using the run script for start using it from the built-in terminal and that will build up the universe and it will open in the web browser the URL for the dev server and we see the UI that react gives us and that's great and I can do the normal reacts to changes in I go back to the browser hit reload if I was on a bigger screen I would have the two of these chrome and the IDE side-by-side now you may say to yourself hey this is web slam we're smarter than running things in a terminal and you're right we've got multiple ways to do a better job than this I'll shut this down here I'll close the terminal I could open the NPM tool window and what it's going to do is give me a browsable version of the scripts that are available and my package JSON and I could run start but that's not actually the way I do it anymore because the web salaam team has done something really cool this thing so I always go to my package.json flying the script I want and when I click on it I now have two options I love using the debugger so it's handy for me to use package.json to run the scripts instead of running them in the terminal it runs them in a tool window the wrong tool window which has all the cool things like clickable links that I like to have versus the terminal and trace backs and all that other kind of stuff what does create react give us out-of-the-box for one it gives us an ever-changing target for writing tutorials so this is a little bit different than it was when I wrote this tutorial my apologies I intend after this release cycle to update the tutorials to use the latest and greatest especially different in typescript with the change from TS lint to es let the change from class-based components to function functional components so I've got some cleaning up to do but anyway this is the package not JSON it has the dependencies it has the development dependencies actually it doesn't why does it not need the list of development dependencies because it moves a lot of that stuff over into the create react app world and they manage all that stuff for us so with all that configuration move over create react app I don't have to deal with the craziness of the ever-changing JavaScript landscape and react landscape where this version of that version and the other version doesn't quite work together I'm staying with create react app I know that they will give me something that works I'm running the development server with the start script what is the development server mean everything is done in memory there are no output files written to disk and when the whole tool train runs and it goes from me typing an exclamation point into the typescript compiler and the web pack bundler and the dev server and all those other things everything is in memory what happen what do I do when I want to deploy this to a server it's the build script that builds a hyper minified teeny tiny little output version of the universe so the build scripts going to run depending on the size your project it might take a little while it will create a directory called build at your root level and look what it's got into it inside of a little universe a portable universe this directory can be copied to a static web server and everything will work just fine it's spitting out a lot of stuff that was under different parts of the site so for example public has all these images and stuff that get copied over into the build area one thing to keep in my eye on from a web store perspective is we index things that's why everything is so awesome well you don't want to index the build output and get you know two hits when you start asking for autocomplete so I want to mark this directory as excluded and not only will it improve the accuracy of my autocomplete and navigation and not give me false blips it will not reindex that stuff and build each time I rebuild the universe okay so that's a production build I ran it in a tool window via running it from package.json and I got a build output directory one other thing that I could do is take a look at running tests so for example here's a test it's using the jest test Runner that's what create react app uses out of the box and it doesn't really add too much other stuff like enzyme or the testing library if I want to run these tests I can go back to my packaged our JSON and here's a script test and it runs react scripts with an argument of tests come to the gutter run test and it cranks up and it says all my tests pass actually didn't say that because none of my chests have change let's go change a test I'm going to put in expect one to be two and when I save the watcher says hey we had a failing test and if I go back put one in I've got something wrong in my setup test did it [Music] what happens when you turn alright well we will continue without this in action this is something that happens with the latest and greatest create react up create react app output ok so I'll close that and before going on to the next step we will pause for a moment and see if we have any questions yes we have a question why the App Store doesn't actually exclude the build directory from the project automatically that's a good question and we should probably do that for the apps created with the create react app when we know that for sure but in general the idea is that some people use the build folder as an output folder some people call it taste some people call it output so it's very hard to guess what people actually mean is it the output code or something else but something used for a build for example some build scripts what app store actually does if you have a web park configuration file in your project and you have there the output directory specified then webstorm will understand that and exclude the folder automatically but in create react app everything is hidden inside the reactor scripts folder modules so it's hard to guess but yeah good point we should exclude build directory in this case automatically as well so the there is a comment suggesting that probably the issue is caused by the watch mode with the tests alright yeah we're gonna hope that's true I'm gonna go ahead and skip ahead to making a run configuration and hope that you are correct because there I get to control the watch I will try without putting a watch configuration my apologies everyone this worked last week no no I'm using the out-of-the-box create react app yeah I will try to Google that all right so uh Kathy if you'll look that up and see if you or anyone in the audience can find the invariable ticket that explains that just when I said create react app does everything all the janitorial wiring for us I'll agree with Daniel this is me all the day yes this is me all the day too as soon as you put typescript into the equation you are in a different Lane when it comes to react and things can get weird alright so I will continue I will go back to I'll close that come back close that I like to start and I'm gonna go on to the next tutorial stop which is project cleanup we're going to remove some things from the example that we're doing and show a couple of more features in both react and in the IDE so for example I'm gonna go back to my test code and I'm gonna reformat the code it's got two tabs I think I'm set up to four I could manage all of that myself and let's say that there's like extra lines and stuff like that and things are indented differently I could manage it myself but instead I will reformat code let me turn on descriptions of actions so you can see the keys that I'm doing I can reformat the code and let the IDE be the janitor that does that kind of work for me and I can also go back to my app and do the same here you see that it's got some different things that aren't formatted correctly reformat code it puts everything the way it's supposed to be notice it added the semicolon I had a warning about a nun terminating statement I did reformat code and it terminated statement for me why did it do that let's go take a look in the IDE I go to I'll type semicolon and I'll go to code style typescript and this pain is like uber important for keeping your sanity if you are an OCD person I'm going to tell it to use semicolons to terminate statements always not just in new code but always I'm gonna say single quotes and I'm gonna say always and what this means is even if I change this to double quotes if I reformat it's gonna put single quotes for me I don't have to think about those petty little details the ID you will do it for me reformat code I joked with Cathy a couple of times I do this even when I haven't typed anything just to convince my brain that I'm still working sometimes it's a little embarrassing I don't need all this stuff for the demo that I'm gonna give so I'm going to take out the boilerplate that was created by create react app and I'm gonna put in an h1 something really simple to reason about I'm going to use the Emmitt system to do Z markup for me so div h1 tab and it does the opening closing things for me hello react and so now I have a much simpler basis to get started in now the ID he's telling me hey you've got an import up here let's say that my cursor is still here you have an import up here that you're not using oh I'll stop I'll go to the top well instead of getting out of your flow let the IDE clean that up for you with the other keystroke you do a hundred times a day optimise imports optimize imports will take your imports remove move things that are unused combine things that are from the same target and sort them in the order that you have specified in your settings now I've got an app dot CSS over here that I'm no longer using so I could delete it so let me see what happens if I delete it and then I've still got this import up here I want to get rid of the app that CSS because it's not really part of the demo so I'm gonna hit enter and I'm gonna use safe delete and say all right yes actually oh no you have a problem you're still using that file that you were trying to delete well what file is it um okay it's there oh all right that's the file and it's used here oh yeah you're right okay so I will close that I'll get rid of this import and now when I go to delete that file safe to leave will be okay with it and so that's a really helpful thing I also have a logo that I'm not using and so I'll delete that it will look and it will also find I think no it's not being used because I deleted it from here it's not in the index by DSX alright so that's a place where the ID can help you in refactoring which is important in react because they want you to do lots and lots of teeny tiny little self-contained components and as you move things around and refactor you will leave behind fossils and it's good to clean up for yourself what's something else in doing react I might go ahead and start writing a component and forget to do the import statement without importing react JSX tsx is invalid and it warns me right here the IDE is warning me webstorm saying hey you're referencing something that hasn't been important I could stop I could go to the top of my file find the right place that put the import or I could say hey IDE all to enter go do that for me and it will put the correct import from the correct target in the correct location sorted everything at the top so that's really nice that is a mode that I'm always in when I want to use something I don't import and then use it I start typing and let it autocomplete and the autocomplete will not just autocomplete but it will yeah all right that over that example overlapped with some other things that were in there alright so we've got the import generated let's say I'm doing some more refactoring I'm moving things around in my react app and app maybe I don't like that name maybe I think my app is a better name so I started thinking about typing it and then I think wait a second it's used here and I'll have to change it there and I don't even know where else it's used I could maybe use find usages find out all the places that the IDE thinks it's used oh wow it's used in the tests it's used in index dot TS so I'm not gonna change it forget it let the IDE do the work for you with refactor rename I'm gonna call this my app and you can see as I'm typing on line 11 the export default is getting fixed so I hit enter do you really want to change it well this is an important point because in the world of react there's a convention that the X the default export that name should also be the file name in webstorm is saying hey you know I see you're doing something do you want me to change that file for you and I say yes it renames it tells me what it's going to do I let it do the refactor and it's renamed the file and done the correct VCS thing with it which is really nice and in fact maybe it also fixed all of my imports let's go see a place that it's used which is in index let's say look it fixed my app the symbol and my app the file name and it probably did the same thing in the temp and the test that did the same thing now maybe you decide oh I should mention you can you don't have to go to the source to do a refactor rename you can go to one of the usages do refactor rename and it will change the Declaration as well as all the usages now let's say that you do that and you're like oh wait crap that was stupid now I have to put the letters my in front of everything that I ever do put it back and then you think to yourself oh my god so I got to go find all the places that did this do a VCS change a file name change oh my god would it be great if I could just undo that entire unit of work and let the IDE rename the file rename the symbol put everything back in VCS the way that it was supposed to be that's a really helpful example of many of the things the IDE can do to help you as you're trying to do refactoring and renaming and stuff so I will pause at that stop and see if there are some questions yes I can you please show how can one configure code style settings for the IMP rates that I really adds so for example if it uses single or double quotes if there are white spaces inside the curly braces and so on right so is this the screen you're talking about yes so this one part of that code style type script yeah and also the punctuation tab for the quotes and other stuff yeah but just remember that the JavaScript and typescript code settings are different and maybe you could explain from an editor config perspective you know if any of these are covered by editor config files yeah sure so so the editor config is a single file that allows you to describe the quad style options you are using in your project and then different IDs and editors can understand this format and use that to reformat your code so in that storm you can actually also create this file and apart from some common options specified by editor config itself starting with version 2000 19.2 you can also import all the JetBrains like I really specific code style options and like define them in the editor config file as so it's a bit complicated but yeah in general if you have editor config that says like use single quotes the IDE should respect that and yeah just use this style when reformatting your code alright I am testing something that look like suggested to test and let me go see if watch mode now is safe yeah I guess if you decide not to use enzyme the problem should go away okay this is gonna be a short demo okay so it Thank You Ludwig that worked by getting rid of what they previously told you to do which is add a set up test CSS file for enzyme but now I have no enzyme so if someone out there could do a little research and see what is the latest greatest way to have the enzyme adapter loaded in a typescript create react app project and you have maybe about 15 minutes to figure it out so I'll continue let's see so I'm going on now to the testing step but this doesn't oh yeah this actually this is the stuff that expects to have enzyme in it Kathy before going on is there anything else that you see in the questions that we need - not yet but actually I have an idea do you have Taipings for enzyme installed I did well I'll show so in package.json do you have at type at types yeah I did this and so I will go over to package.json and see yeah let's say here the dependency as I added I said they were dev dependencies but I put it there anyway you don't have so maybe that hahaha alright then maybe I was in the wrong directory when I did this if so maybe I can go back and you saved the circus if this is what it is thank you yeah let's double check I actually added in the package.json I think the problem was with the new line because you have in the tutorial mmm in the second line and when you cook it that that's my guess got it in grace we will claim that we are we knew this would happen we are just recreating the typical react user experience right so here my dad dependency so I have them now and I will go to my run configuration I'll restart you so that I have all of that and let's hope that that might tell working so let's get back on track thank you very much for that Katia and Ludwig and the others that helped that last line about undefined I believe in later versions that can be removed but I don't want to mess with it right now um I will I will confirm it when I update the tutorial and remove that as something that's necessary okay so we want to talk about testing and about just and what we just showed was instead of running the tests in a tool window like this an in PM tool window what we want is the visual testing tool this thing that gives me they're really integrated the ini de experience for testing and the way that I did it was and I'll come here this time edit configurations and I added a run configuration of type just and it produced a name of all tests the only thing that I added was something kind of suggested in the placeholder a flag suggests saying watch and rerun all the tests not just the tests that have files that have changed so whenever anything changes run everything which gives me a nice development experience if I'm sitting in a test and I say I have a test that's running and then it fails this really integrated visual testing environment gives me something down here telling me exactly what fails gives me lots of knobs for hiding the things that pass showing everything rerunning things etc it gives me a little squiggly telling me exactly what line failed and it gives me the options to run just one test or two run tests under the debugger which we will talk about later on so very handy very useful experience for a concept called fail faster you want your tools and you want TDD to help you fail faster and as poor to fail faster I'm gonna add a new test it's an arrow function and I'm going to make a div and in fact I will let's see I'll copy this line no actually what I want to do that's not the one I want to do one a little bit further down let me go backwards a little bit before showing the next test I want to talk a little bit about TDD test-driven development it's the way you're supposed to work it's way you know it's kind of eat your vegetables before you eat dessert well I like the dessert first I do TDD not because it's the adult supervision thing to do but because it's actually a better way for me to work I don't like switching over to the browser 57 times going to a terminal window to look at the output of something opening the debugger to see a console log statement or something what I want is to split vertically close this and have my application code on the left my test code on the right and my test output at the bottom that tells my brain you are in TDD mode and now I can start adding features by writing failing tests it renders the heading and I'm going to make something from enzyme I haven't imported this and let the IDE to import it for me it has the import on line 4 to import from enzyme and I'm going to have it make an instance of the app component and then I expect the wrapper dot find of h1 and its text to be hello react when I save this the tests are going to run the thing that is down here watching what's going to happen when I save this tests are going to run and that test is going to pass because I have hello react in it I should have written that test before I did the implementation let's give an example of what I was talking about TDD I'm gonna duplicate this and I'm going to add a feature that has a paragraph in it and this paragraph is going to have some text in it that says nice TDD when I save this what's going to happen it's gonna fail because it didn't find any nodes which matched that fine specification this red squiggly tells me exactly where the problem is this gutter icon tells me which tests fail and now I know oh yeah I come over here and I got to put nice TDD exclamation when I save all of my tests run again and all of my tests pass I just did TDD I wrote a failing test and then I wrote the implementation to implement the thing that was previously failing and then every time I save a couple of seconds later I'm going to get visual input about whether I'm on track or off track I will stop at this point got anything coming in or any comments you want to know I think well more or less good there was a question about using the quad style options to find an ESL interpreter and if it's possible to somehow say edid to use these options yeah can you comment on that yes here in the package.json we have an es lint config line and that says the es lint configuration for this is actually going to come from this package and we could then add our own custom rules at this point and one of the things that happens at startup I deleted it there's a little message that tells you hey we discovered es lint and we're configuring things the issue here is that react app doesn't really add too many settings I think it's the base maybe on the eslint recommended another package so there isn't that much to change but if you add some rules in here if you open a project with a package.json that has some rules in it or has a dot es let r c-- and you open that file webstorm will put a little notice at the saying would you like to import some stuff particularly for prettier it will detect that you're using prettier and it'll say do you want to use the styles you've defined and prettier which is much more about styling the es lenez and it will go find these settings that the ide overlaps with and it will change those to be driven by your prettier configuration file or your yes link configuration file did I get all that right yeah that was perfect one tip from me is that if for some reason you haven't seen that notification Paul mentioned or you change the code style change the rules if you right-click on the package.json file with yes lint config field or on the yes name configuration file there should be an action called like apply code style settings from and this is the one that will trigger this email this one yeah and it will then import the overlapping options so which will will not be like yeah it will probably change this on me right yeah it could yeah depending on your configuration yeah but I think yeah in react application they don't enforce your enforce using any specific code style so in this case it won't actually import anything it's an interesting point about the react ecosystem everything you read out there says use prettier use prettier use prettier but create react app doesn't give you prettier by default because they're trying to be I guess kind of conservative right yeah I think so yeah and maybe the moment they switch to prettier z' the moment the prettier project closes and everyone switches to something else like what happened with TS line okay we're going to go on to the next step we're going to talk about debugging and in this case debugging with nodejs the next step we will talk about debugging using the chrome engine and the idea for this is we have in the IDE we have a visual tusk runner and it's great it's integrated it's not some other window everything makes sense all the keystrokes that you're used to work all that stuff you know what else we have we have a visual debugger and a lot of time in testing you are poking around blindly no idea what you're doing and you need to do a little bit of help what does everybody do console dot log except this is the world adjust it intercepts output you probably will not be very productive using console log instead you run your tests under the debugger and you can put a breakpoint stop wherever you want continue inspect variables that's what we're going to show in this case so I'm going to remove this line since we don't really need it and in this step we're going to parameterize our heading what we want is something that says instead of hello react we can pass a different name into it so I'm going to export an arrow function called label and it's going to return for now hello react watch what I do here rather than completing the semicolon and the next line semicolon and the line after that I just reformat code and get what I want I could also change my settings and webstorm to put this extra line here and now I can say label when I save what's going to happen with my tests oh wait yes I need that out of the way when I say what's gonna happen with my tests well they're gonna pass because I didn't really change the surface area to have something different about what's the return value and I kind of broke the rules because I didn't do TDD I wrote this function and I an it is individually testable I should have written a failing test first so let me go ahead and write a test now let's say it generates a label arrow function arrow function and I'm going to go get label and run it now when I hit enter it's going to generate the import on line three for me I'm going to close it and I'm going to expect L to be hello reacts I need to fix the it wrong yet when I save the test run and it works fine I want to make a point about what we just did though we took something that was in a component in a react component in JSX which could only be looked at through kind of a Dom rendering you needed a Dom j/s bomb in this case not a browser doc you needed a Dom you needed a renderer component you needed to do fifty seven thousand lines of execution in order to get that string back we moved it out of the component into plain old typescript and exported the function so that we could write a dirt simple test everything a lot faster and a lot easier so now I'm gonna implement the feature I want the name to be passed in and capitalized so I won't say react and then it's going to fail and it failed faster because typescript warned me that I got I passed in an argument but that argument wasn't expected so I will go make the argument expected I'll say it expects name and then here I want to use a template string which means I gotta stuff it change to tick to a backtick know the IDE can replace it with a template string for you thanks webstorm and now I say name autocomplete and as long as I pass in a name here everyone's happy I run it tests run tests pass but I got a red squiggly what's up with that because typescript I've got my typescript configuration to yell at me if I don't provide any typing information and in this case name is a string and I need to put colon string on it again janitorial work wouldn't it be great if the IDE had an intention to infer the type and put the type of information for me thanks webstorm so now when I save the tests dual pass let's make the tests fail by implementing this feature I expect this to be uppercase when I save it fails because it's not giving me something back in uppercase I need this to be not to uppercase and because I said that this was a string the IDE says Oh strings have Beth is like to uppercase and it really helped me on that so this was the case where I wrote a failing I wrote a test wrote a function mood functionality out into that function cleaned up some tests put some typing information I failed faster one last point about failing faster and then this gets us into the debugger let's say I said 42 okay and I save lets us fail I've been working all day long I'm exhausted what the hell are you telling me I know this works it just worked a second ago why are you so dumb well in this case you know the idea is helping me fail faster it failed before the test even ran it gave me a red squiggly that told me exactly what the problem is and then some more squigglies about what the problem is and all that other stuff but let's say I'm really dense this isn't working for me I want to poke around well I could sprinkle console.log statements all over the place that probably wouldn't help instead I'm going to put a breakpoint and because this is using just the test runner just it's using a s Tom as the browser engine a browser engine implemented in JavaScript which means I can run everything inside the nodejs debugger simply by clicking here and saying debug and it will fire up the just test runner in a debug tool window and it will get to that line and I said only run that one test so it's only running this one test it's stopping on the line with the breakpoint and I can say to myself okay I'm in the ballpark now I'm going to smart step and got smart step into that function it's going to go to that line in my code I'm staring at it I see 42 I still can't figure out what's wrong why is this not working for me I'll highlight it I'll say evaluate expression make this a little bit bigger and I get a little window where I can poke around in the JavaScript interpreter on that line of execution with all of the scope values and everything in the frames that got there using the visual debugger which ships in webstorm and I can say evaluate and it tells me the same problem and I can say okay this is getting old what is name it's 42 and then I can say okay what is type of name oh it's a number and numbers don't have an uppercase function and thanks to the visual debugger combined with visual testing and stepping into the code and poking around I saved myself a lot of time and a lot of frustration I will stop at that point and see if we have any questions now we have one question so alex is asking how would you test label function if it was a private private method of app in fact in my tutorial my tutorial is class-based and I had to change it to be a since create react app and made function components I wasn't able to make a method on a class but this is the way it would look as you can see I don't have private on there which means I believe from the perspective of a test you couldn't access it but I believe if you did protect it maybe you could but I think protected might be only within the scope of the class so it's a reasonable question about the kind of interface no typescript pun intended the interface you get to poke around from the perspective of a test which is kind of like what the outside world sees so if you put private on it you're telling the outside world you don't get to see this and therefore you can't import it in a test you would have to put something in here that had access to it and then you could test that thing Alex feel free to tell us that that was a non-answer and I will try again yeah thanks and now another question why did you choose test-driven development over behavioral driven development that is a good question I believe the asker of the question probably is a right brain person and I'm a left brain or vice versa I'm a I'm really intrigued by a BDD and I know a lot of people that swear by it but and this is like the cardinal rule in the world of front-end development the person who strays too far off the road gets eaten by the wolves and BDD is not very popular create react app does not ship out of the box with BDD support and when you mix in typescript with BDD that combination means invariably you'll do an update one day and stuff will stop working that's not a very useful answer but apologies I tend to be I wind up being pretty conservative and staying in the pack yeah great answer Thanks spoken by the person who has to drive the webstorm ship right let me put that back to this and we will cover one more thing and then call it a day and talk about what we will do in part two I just showed debugging in nodejs I'm gonna show quickly debugging in the actual browser engines sometimes you need you know for sanity purposes or you're using some API that isn't available in JSON and you want to run in Chrome but you want to keep that whole stay in the flow developer experience that the I integrated development environment in IDE gives you so what we're gonna do is we're gonna do the same thing we just showed but instead of running it under nodejs we're going to run it in the browser and the way I do that is first I will create a run configuration I do it this way I'm going to add a JavaScript debug run configuration and I'll say chrome tests and the URL is going to be let me stop that I'm gonna go back to the run tool the run tool and I'm going to turn off the nodejs test Runner go back to here and I'm gonna copy this this is the URL that we went to that was running our app and so I'm going to go in my run configuration I'm going to add a run configuration I'm gonna say it is of type JavaScript debug chrome tests and I'm gonna put that URL here it needs to run in Chrome for reasons I will let the webstorm p.m. and explain in just a moment by default it says groan but I also make it manual write for a moment and I will not run right now so now I have a run configuration I can see it here chrome tests I have a run configuration and I want to debug and stop at this breakpoint in chrome how will I do that I will instead of running chrome tests I will debug chrome tests it's gonna run it's going to up a private copy of Chrome you see down here I've now have to Chrome instances running it created a new profile with no universe of history in it and now if I reload am I in the wrong browser think I might need to close this oh yes it ran and it stopped that's why so I'm going to let's debug this all right that's not what I wanted what I need to do how do I got myself stuck here I need to run chrome tests in debug and then when I reload it's supposed to stop here Kathy key spot why I'm Knight stopping there you yeah sorry what does the debugger tab says in the debugger to window I'm making a mistake of using no not use me happy can you switch to the debugger tab in in webstorm in the debug tool window here that's where it hmmm-hmmm let's try some simpler function that would probably some unclick Handler and see if it works all right yeah because sometimes like it's a bit hard for webstorm to actually stop in the code that is executed when you load the page yeah yeah but actually after like reloading the page it most often works but not in this case for some reason right I'm doing something wrong on this we haven't working in the previous webinars and if you come back for part two and december.we I will show this working correctly definitely definitely my fault alright let's turn over and talk about what we're going to do in part two and then wrap this up since we've gone a little bit longer than expected we're going to get into a little bit more of react and typescript stuff so this step really talks about putting the power of the modern JavaScript landscape object destructuring etc it's you use some pretty cool stuff about functional components and typescript and how to share props with interfaces so that you can fail faster and get red squigglies same thing with class components and prop information with interfaces how to model state the second arguments of the generic using interfaces and then this one the fun one how to go and simulate things like browser events alright with that in mind before going to the closeout let's see do we have any other questions or any points you want to want to go over not really yeah it's a pity that debugger doesn't didn't work but yeah we'll figure it out yeah I use it constantly so this is just something I did dumb during today's demo my apologies okay so with that in mind thank you everyone for attending today we went through a lot of material we have a lot more to go through we have a tutorial that you can go to and take a look at yourself if you want to go for a deep dive on some of the material thank you for taking the time to talk with us about react typescript testing this idea of fail faster staying in the flow you have any questions reach out to us by email or social media if you'd like more information on web storm go to our website at JetBrains dot-com slash web storm we'd love your feedback on this webinar so please feel free to contact us on Twitter or in the after webinar survey the recording will be made available on our YouTube channel soon Gavin already please check out our web storm blog where you can find up-to-date webstorm news about releases and events in addition to educational resources so for example the recording of this webinar we'll be published there in a few days we'll also provide some additional links and information on the presentation on the blog itself now one final plug in this wild world of front-end development if it's your kind of thing make sure you follow webstorm on twitter ekatarina you do a wonderful job on bite-size productivity tips I'm amazed at how many you cranked out how good they are how do you keep up with it yeah thanks Paul yeah so I use webstorm a lot myself and I try to share it tips with our followers every time I learn something new and cool about that story and we also have quite a lot of new and very useful features added to the IDE with every release so we have a lot of new stuff to talk about and share with you and of course we often have some inspiration coming from our user is be that question where a tip that you share with us so we'd be happy to retweet that and we like provide an answer in the next tip yes so follow us yeah it's that storm ID on Twitter webstorm ID yeah take her up on the offer I don't know are you soliciting new ideas for tips mmm sorry are you soliciting new ideas for tips yeah sure all right okay everyone thank you very much for joining us today and thank you for staying the end of the webinar and hope you have a nice day yeah thank you bye everyone thanks Paul thank you

Channel: JetBrainsTV

Views: 9,830

Rating: 4.8356166 out of 5

Keywords: software development, developer tools, programming, developer, webstorm, react, typescript, tdd, javascript, testing, debugging, tsx, es6, functional react, best javascript ide, webinar

Id: OEr0ppEUIfQ

Length: 55min 51sec (3351 seconds)

Published: Wed Nov 20 2019