1 00:00:00,150 --> 00:00:07,850 When it comes to our environment, we will need following tools not just installed on our machine web 2 00:00:07,860 --> 00:00:11,850 browser, I would suggest Google Chrome, but technically it is optional. 3 00:00:12,000 --> 00:00:14,520 As long as you have a Web browser, you'll be good to go. 4 00:00:14,910 --> 00:00:22,860 Just remember that once in a while your results might differ because the browser that you choose, if 5 00:00:22,860 --> 00:00:27,840 it's a different browser other than Google Chrome, maybe, I don't know, display just a little bit 6 00:00:27,840 --> 00:00:30,150 differently than a text letter. 7 00:00:30,330 --> 00:00:37,680 Again, I would suggest visual studio code, but we all have our preferences, so no hard feelings as 8 00:00:37,680 --> 00:00:44,670 well as react developer tools which are not required but will improve your dev experience in the long 9 00:00:44,670 --> 00:00:44,870 run. 10 00:00:45,330 --> 00:00:48,290 And I guess let's go down less than first one. 11 00:00:48,300 --> 00:00:57,130 We have a node now in order to check whether you have node installed already on your machine in a terminal, 12 00:00:57,150 --> 00:01:03,360 you would need to run node and then dash dash version so you'll see where the note is installed. 13 00:01:03,360 --> 00:01:07,560 And then if it's successful, it will also tell you what is the version. 14 00:01:07,770 --> 00:01:11,460 And then if you don't have it installed, then it's probably going to say something along the lines 15 00:01:11,460 --> 00:01:15,180 that it cannot find the command or something like that. 16 00:01:15,540 --> 00:01:23,520 And what you're shooting for is at least five point two, because later we will use a package called 17 00:01:23,730 --> 00:01:28,620 create a React app, and more specifically, we'll use and install it. 18 00:01:28,800 --> 00:01:32,430 And that comes with a version of five point minimum. 19 00:01:33,270 --> 00:01:36,190 Of course, if you have a higher version, that is even better. 20 00:01:36,540 --> 00:01:44,340 So in order to test it out, I don't have navigate right now to my terminal, a massively zoom in just 21 00:01:44,340 --> 00:01:45,750 so you can see what is happening. 22 00:01:46,260 --> 00:01:50,340 And we type here node, dash, dash version. 23 00:01:50,730 --> 00:01:54,080 So of course it's bits back that I have version 12. 24 00:01:54,450 --> 00:01:56,130 OK, so I'm good to go. 25 00:01:56,460 --> 00:02:03,810 Now, if you don't have node installed, I would suggest navigating to now just Doug. 26 00:02:03,930 --> 00:02:10,320 And of course you can just get there by going to Google and typing node for example, you can say node 27 00:02:10,320 --> 00:02:17,550 and of course the first link that's going to pop up is going to be node as a dog and they will right 28 00:02:17,550 --> 00:02:20,880 away detect which operating system you're using. 29 00:02:21,000 --> 00:02:27,450 So in my case, that is Mark and then I would shoot for a long term support option. 30 00:02:27,810 --> 00:02:31,090 So click it over here and you'll get yourself now. 31 00:02:31,100 --> 00:02:37,680 No, I'm not going to install it since I already have it on my machine and also is just clicking a bunch 32 00:02:37,680 --> 00:02:38,700 of checkboxes. 33 00:02:39,120 --> 00:02:41,190 Then we have Google Chrome. 34 00:02:41,520 --> 00:02:44,880 So again, if you don't have it, go for Google Chrome. 35 00:02:45,120 --> 00:02:52,590 And then one of the first links is going to be to a page where, of course, you can download Chrome. 36 00:02:52,950 --> 00:02:55,050 Then we have Visual Studio Code. 37 00:02:55,230 --> 00:02:57,570 So just look for Visual Studio. 38 00:02:57,570 --> 00:03:03,120 Code is a awesome open source text letter from Microsoft. 39 00:03:03,390 --> 00:03:08,310 That is just amazing as far as the development experience. 40 00:03:08,640 --> 00:03:16,110 And once you go to their site, which is code that visual studio dot com again, they will detect which 41 00:03:16,110 --> 00:03:24,000 operating system you're using and you can right away get yourself a nice fresh out of the oven copy 42 00:03:24,240 --> 00:03:26,250 off the visual studio code. 43 00:03:26,490 --> 00:03:31,050 Then we've got a reactive developer tools, then just look for them. 44 00:03:31,290 --> 00:03:36,600 And one of the links is going to be right away to the extensions. 45 00:03:36,900 --> 00:03:40,980 And then of course, in my case, I already have it, so I would need to remove it. 46 00:03:40,980 --> 00:03:45,870 But in your case, if you don't have it installed, then of course you'll have to add to Chrome. 47 00:03:46,140 --> 00:03:50,980 So you add that extension and what you're looking for are the components and the profiler. 48 00:03:51,270 --> 00:03:58,230 Keep in mind that, of course, if, for example, you are at the page that doesn't use react and of 49 00:03:58,230 --> 00:03:59,870 course, it's just going to be great. 50 00:04:00,150 --> 00:04:05,130 And what I'm talking about this little like I notice this reactive apparatus and essentially it's going 51 00:04:05,130 --> 00:04:05,720 to be great. 52 00:04:06,420 --> 00:04:12,420 However, if the site is using react, then of course you'll be able to see it and then once you open 53 00:04:12,420 --> 00:04:13,440 up the console. 54 00:04:13,680 --> 00:04:21,320 So of course, you can either do it with a shortcut, which I believe was option command and I and there 55 00:04:21,320 --> 00:04:21,660 it is. 56 00:04:21,900 --> 00:04:25,170 And what you're looking for is this profiler and components. 57 00:04:25,590 --> 00:04:29,250 Again, I'm not going to look at them right now because it's not going to make sense. 58 00:04:29,250 --> 00:04:35,730 But eventually, as we're progressing with, of course, you will see how reactive our portals will 59 00:04:35,730 --> 00:04:41,100 make your life a little bit easier as far as working with a react application.