WEBVTT 0 00:00.360 --> 00:06.070 Hey guys. Iin this lesson we're going to get you up and running with your local environment. 1 00:06.180 --> 00:13.230 So whether that be with Atom or with VS code or whichever text editor you prefer to use and get you 2 00:13.230 --> 00:17.470 started creating apps locally on your computer. 3 00:17.520 --> 00:23.610 This way if you prefer using a local text editor rather than using a code sandbox like what we've been 4 00:23.610 --> 00:29.430 doing so far, you'll have all the tools you need to get started when we're creating your project, 5 00:29.430 --> 00:35.880 the Google keeper app. If you're using a Mac you can go ahead and skip this lesson and head over to the 6 00:35.880 --> 00:39.070 next one where I walk you through exactly the same thing 7 00:39.150 --> 00:43.890 but for setting up on a Mac computer. Let's get started. 8 00:43.890 --> 00:50.070 There's only four steps that are required to start creating react apps on Windows. First 9 00:50.220 --> 00:52.060 we've already got Node installed 10 00:52.110 --> 00:57.510 and if you've gone through the Node modules recently then your Node version is probably going to be 11 00:57.510 --> 00:58.600 pretty up to date. 12 00:58.800 --> 01:04.020 But just in case it's been a while since you've actually tackled the Node module of the course, then 13 01:04.020 --> 01:07.100 it might be worthwhile just checking that its actually up to date. 14 01:07.170 --> 01:14.840 So how do we do this? If you have to nodejs.org and you take a look at the version that's shown 15 01:14.840 --> 01:20.900 over here on the left, as of right now when I'm recording the latest version shown to me is 12. 16 01:20.900 --> 01:23.120 13.0. 17 01:23.240 --> 01:25.430 And this is the version that you want to be working on. 18 01:25.430 --> 01:27.280 This is the stable version. 19 01:27.620 --> 01:30.490 So how do you know if you have the latest version? 20 01:30.560 --> 01:36.470 Well to check that you've got the latest version installed go ahead and open up your hyper terminal 21 01:37.010 --> 01:44.720 and type in the command node --version and then hit enter. And you can see that what I am getting 22 01:44.720 --> 01:50.240 back is that I'm running version 12.13.0 which is the same as what I'm seeing 23 01:50.390 --> 01:51.800 on the Node.js website. 24 01:51.950 --> 01:54.140 So that means I am up to date. 25 01:54.140 --> 02:01.880 Now if on the other hand you see a lower version or if you see something like command not found or something 26 02:01.880 --> 02:06.470 that basically suggests that you don't have the latest version of Node installed, then I recommend just 27 02:06.470 --> 02:11.190 clicking over here and downloading the latest installer for the Node 28 02:11.210 --> 02:16.550 12.13.0 or whatever it may be when you're looking at this lesson. 29 02:16.550 --> 02:21.860 Now if you don't know what the hyper terminal is, we've already gone through this in the command line 30 02:21.860 --> 02:28.160 module and I've talked about a lot of these commands like changing directory and instructing your computer 31 02:28.160 --> 02:29.440 to do certain things. 32 02:29.600 --> 02:31.910 And we're going to be using the command line quite a lot. 33 02:32.000 --> 02:37.670 So the command line module is definitely essential knowledge and I recommend completing it before you 34 02:37.670 --> 02:39.000 proceed any further. 35 02:40.110 --> 02:46.720 So once that's done, go ahead and open it up. And then we'll just run through the wizard very quickly 36 02:47.110 --> 02:49.960 to accept all the licenses and get it installed. 37 02:53.460 --> 02:59.850 And then after you've installed it, restart your computer and open up the hyperterminal again to check 38 02:59.850 --> 03:06.550 and make sure that you've got the latest version installed. Now the reason why we need Node is because 39 03:06.550 --> 03:12.160 we're gonna be installing packages when we're using React. As you've seen already we've been using the 40 03:12.160 --> 03:13.930 React and ReactDOM modules. 41 03:14.080 --> 03:18.800 And the easiest way to install those to any project is just using NPM. 42 03:18.820 --> 03:24.430 Now if you've missed out on the Node module of the course, I strongly recommend completing that first 43 03:24.730 --> 03:26.340 before tackling React 44 03:26.470 --> 03:31.360 just because there's a lot of concepts that's already covered there and it might be a little bit confusing 45 03:31.360 --> 03:34.390 if you just get started with React straightaway. 46 03:34.540 --> 03:39.940 So now that you've made sure you've got the latest version of Node, we can now move on to step two which 47 03:39.940 --> 03:42.520 is to install VS Code. 48 03:42.760 --> 03:47.430 Now VS code is a free and open source code editor. 49 03:47.560 --> 03:51.200 And it's a really popular one for using with React. 50 03:51.220 --> 03:55.600 Now if you want to use a different one say if you want to stick with Atom or if you want to use something 51 03:55.600 --> 03:59.310 like Sublime or whatever it is that you would prefer to use, 52 03:59.380 --> 04:00.710 that's totally fine. 53 04:00.790 --> 04:06.190 It doesn't actually matter. At end of the day it's just whatever makes you feel comfortable and which 54 04:06.230 --> 04:09.720 ever styling or environment you prefer. 55 04:09.970 --> 04:15.940 But if you have no preferences and you want to work on React locally, then I recommend giving Visual 56 04:15.940 --> 04:17.530 Studio code a go. 57 04:17.530 --> 04:22.480 It's pretty easy to install simply just head over to code.visualstudio.com 58 04:22.480 --> 04:27.250 click on this button and go through the wizard to install it onto your computer. 59 04:28.700 --> 04:34.120 And once you've got it installed and opened, it should look something like this. 60 04:34.250 --> 04:40.460 A lot of the user interface looks very similar to what we've been working with in code sandbox. But no 61 04:40.460 --> 04:46.430 matter which editor you choose I recommend heading over to this link here which are linked to and of course 62 04:46.430 --> 04:55.310 resources and finding your particular editor be it Atom or Vim or Visual Studio code and install the extension 63 04:55.310 --> 04:56.700 that they ask you to. 64 04:56.780 --> 05:01.700 This way you'll get the correct syntax highlighting and it'll make it much easier to see what's going 65 05:01.700 --> 05:07.910 on when you're writing JSX code that's being interpreted by Babel. In Visual Studio 66 05:07.910 --> 05:11.480 the package is called Sublime Babel by Josh Peng. 67 05:11.720 --> 05:18.650 And in order to install it, just head over to file, preferences, extensions or use the keyboard shortcut 68 05:19.190 --> 05:25.040 and then once you're on this page go ahead and search for sublime babel. 69 05:25.310 --> 05:26.920 And this is the one we want 70 05:26.920 --> 05:30.310 so click on install and it should take a few seconds to install. 71 05:30.320 --> 05:33.730 And this is basically the same as the Atom packages. 72 05:33.770 --> 05:40.070 Now in addition I recommend getting the VS code icons extension and what this does is it just adds 73 05:40.070 --> 05:45.160 the icon to any of the files that you have in your browser. 74 05:45.200 --> 05:49.430 So that way files with different extensions are labeled with different icons. 75 05:49.430 --> 05:53.220 And it makes it very similar to what we've been used to in code sandbox 76 05:53.240 --> 05:57.550 and it's really easy to navigate when you're working with React apps. 77 05:57.830 --> 06:04.100 Now that we're done with step to installing VS code or simply just adding a package that you saw in 78 06:04.100 --> 06:09.620 the Babel website to whichever text editor you prefer, then we can move on to step three which is to 79 06:09.620 --> 06:13.760 actually create a React app. And to do this 80 06:13.760 --> 06:16.430 we're going to follow the instructions from the React website. 81 06:17.000 --> 06:22.310 So again I'm going to link to this page and this is one of the easiest ways of creating a brand new 82 06:22.310 --> 06:23.530 React app. 83 06:23.600 --> 06:25.430 So we have to do it in the terminal 84 06:25.430 --> 06:31.420 so go ahead and copy this instruction to create your first app. 85 06:31.460 --> 06:39.500 Now this is the npx command which is, as they say, a package runner tool that comes with npm and it will install 86 06:39.500 --> 06:44.800 create-react-app on your computer so that you can create new React apps from scratch. 87 06:45.020 --> 06:49.160 And then the very last part is whatever it is that you want to name your app. 88 06:49.250 --> 06:57.690 So let's just go ahead and copy it as it is to create a project called my-app and then simply paste 89 06:57.690 --> 07:04.840 it in here and then hit enter for it to go ahead and run the code and you'll see that it's created a 90 07:04.840 --> 07:08.430 new React app under this particular file path. 91 07:08.470 --> 07:12.730 So users and then my username and then my app. 92 07:12.730 --> 07:18.460 And now it's going to install the required packages which includes react, react-dom and react-scripts. 93 07:19.120 --> 07:20.170 Now react-script 94 07:20.200 --> 07:26.860 we haven't used so far but it's basically the scripts that's required to actually be able to run React 95 07:26.920 --> 07:30.540 apps locally on your computer. 96 07:30.590 --> 07:36.500 Now the first time that you run this command, npx create-react-app and you try to generate a new React 97 07:36.500 --> 07:36.980 app, 98 07:37.100 --> 07:38.570 it's going to take a while. 99 07:38.690 --> 07:46.130 So I counted and on my Windows 10 machine, it took something like 5 minutes. But once it is done though, 100 07:46.190 --> 07:51.710 you will get something like this: "Success! Created my-app at this location". 101 07:51.710 --> 07:59.840 And inside that directory you can run several commands, npm start to start the server, build to build 102 07:59.900 --> 08:06.260 the React app into a production app that you can launch and a couple of other things. 103 08:06.290 --> 08:14.240 So now that we've completed 1, 2 and 3, all we have left is to run our app. And as the instructions 104 08:14.240 --> 08:20.990 suggest all we have to do is to cd to over to my-app and then run npm start. 105 08:21.680 --> 08:28.580 So let's go ahead and cd over to the location of our app and if you need reminding where that is, simply 106 08:28.580 --> 08:35.090 scroll up to the success message and you can see that it's created in my case in the C drive in this 107 08:35.150 --> 08:36.230 location. 108 08:36.230 --> 08:43.760 So I'm going to navigate to this using the bash format so I'll add the cd, change directory and then 109 08:43.760 --> 08:51.440 it's going to be a forward slash to represent the root directory then it's the C drive then it was users 110 08:51.500 --> 09:00.290 /P.D and then it was /my-app and then hit enter and you can see we've now 111 09:00.440 --> 09:07.610 moved into the my-app directory. And it's here where we're going to run the command npm start and hit enter. 112 09:10.350 --> 09:19.020 And this is going to use that module react-scripts to run a script and open up the app. So you might 113 09:19.020 --> 09:25.290 get some warnings like this from Windows Firewall just be sure to click allow access if you see any 114 09:25.290 --> 09:26.190 of these. 115 09:26.430 --> 09:33.210 And once it's loaded up, you'll see localhosts being open up in your browser of choice and if you get 116 09:33.210 --> 09:39.450 stuck at any point along the way, I recommend checking out the react support page because there's a lot 117 09:39.450 --> 09:45.990 of discussion forums especially the Reactflux online chat which is on discord which has a lot of helpful 118 09:45.990 --> 09:51.960 people who are really really knowledgeable and they can help you if you get stuck along the way installing 119 09:51.960 --> 09:55.600 React or trying to get it to work on your local system. 120 09:55.680 --> 10:01.470 This is all that we have for our app at the moment and in order for it to show something else, we're 121 10:01.470 --> 10:05.910 going to have to edit our src/App.js file. 122 10:05.910 --> 10:17.450 So let's go into our VS code and open up that folder and navigate to it again. So here it is under the 123 10:17.450 --> 10:25.460 C:Users/my username/my-app and then select folder to open it up inside VS code. 124 10:25.640 --> 10:29.900 And now you can see that my-app is showing right here. 125 10:29.900 --> 10:35.070 So let's go ahead and close the welcome screen and hide this as well 126 10:35.090 --> 10:37.910 and now we can see our app showing up over here. 127 10:38.510 --> 10:43.820 If we go into the src folder and the public folder you can see there's lots of files that have been 128 10:43.820 --> 10:45.890 prepackaged in here. 129 10:45.890 --> 10:52.790 And what I recommend is that while you're up and running and getting used to React is to actually just 130 10:52.790 --> 10:55.100 delete everything that's not necessary. 131 10:55.100 --> 11:02.060 All of these logos which are being used and the robot's text which is for Google Search to index your 132 11:02.060 --> 11:02.800 website, 133 11:02.960 --> 11:07.760 all of these things are unnecessary and they clutter up our starting file. 134 11:07.760 --> 11:14.370 So I'm just going to select them and then just simply delete them. Inside our source folder 135 11:14.390 --> 11:18.440 the only ones that we want to keep is the index.js. 136 11:18.920 --> 11:22.120 And we're going to delete everything else. 137 11:22.220 --> 11:28.790 So now we've got a very similar format to what we've seen before in our code sandbox and you can actually 138 11:28.790 --> 11:33.290 apply everything you've learnt so far to this code. 139 11:33.290 --> 11:41.390 So the index.html has a lot of comments and a lot of things already in here but we can actually 140 11:41.390 --> 11:49.700 delete all of these things while we're learning like the theme color or the viewport or the icons for 141 11:49.700 --> 11:51.080 the favicon, 142 11:51.080 --> 11:56.790 these are nice to have when we actually deploy our website but right now we don't need a favicon. 143 11:56.810 --> 11:59.810 We just need to learn how to use React. 144 11:59.810 --> 12:08.660 So we've really got our div with the id of root in here and we're going to change that script to be 145 12:08.690 --> 12:11.650 the one that we've got in our source. 146 12:11.690 --> 12:23.690 So we're going to use the ./src/index.js. And by the way if the font is too small 147 12:23.690 --> 12:31.700 for you, you can change it in preferences, settings and the font size here. So let's go ahead and mark 148 12:31.730 --> 12:43.280 this script as type equals to text/jsx and let's head back into our index.js and delete 149 12:43.340 --> 12:50.360 all of these imports other than our react and react-dom and then delete all of this code at the bottom 150 12:50.420 --> 12:51.290 as well. 151 12:51.290 --> 12:57.040 So we end up with what we are familiar with. Now instead of rendering a app 152 12:57.080 --> 13:01.460 let's just test it out by rendering out an h1 from scratch, 153 13:01.460 --> 13:07.040 a single element and let's just say "Hello world". 154 13:07.400 --> 13:14.930 Let's hit save, go back to our localhost 3000 and you should see it updates. 155 13:15.120 --> 13:20.310 And at this stage you should be pretty familiar with how to manipulate things using what we learned 156 13:20.310 --> 13:24.360 in the previous lessons while we were working in the sandbox. 157 13:24.360 --> 13:30.660 It's your choice whether if you want to use the local environment to run your app on your localhost 158 13:30.660 --> 13:37.290 3000 or if you want to continue using the code sandbox while we create our project 159 13:37.290 --> 13:39.080 the Google keeper app. 160 13:39.240 --> 13:44.580 This decision I'm going to leave up to you because it's a personal preference. But in the next lesson 161 13:44.910 --> 13:48.800 we're going to get started building out our keeper app project. 162 13:48.830 --> 13:51.660 So for all of that and more, I'll see you there.