Hey guys. Iin this lesson we're going to get you up and running with your local environment. 1
So whether that be with Atom or with VS code or whichever text editor you prefer to use and get you 2
started creating apps locally on your computer. 3
This way if you prefer using a local text editor rather than using a code sandbox like what we've been 4
doing so far, you'll have all the tools you need to get started when we're creating your project, 5
the Google keeper app. If you're using a Mac you can go ahead and skip this lesson and head over to the 6
next one where I walk you through exactly the same thing 7
but for setting up on a Mac computer. Let's get started. 8
There's only four steps that are required to start creating react apps on Windows. First 9
we've already got Node installed 10
and if you've gone through the Node modules recently then your Node version is probably going to be 11
pretty up to date. 12
But just in case it's been a while since you've actually tackled the Node module of the course, then 13
it might be worthwhile just checking that its actually up to date. 14
So how do we do this? If you have to nodejs.org and you take a look at the version that's shown 15
over here on the left, as of right now when I'm recording the latest version shown to me is 12. 16
13.0. 17
And this is the version that you want to be working on. 18
This is the stable version. 19
So how do you know if you have the latest version? 20
Well to check that you've got the latest version installed go ahead and open up your hyper terminal 21
and type in the command node --version and then hit enter. And you can see that what I am getting 22
back is that I'm running version 12.13.0 which is the same as what I'm seeing 23
on the Node.js website. 24
So that means I am up to date. 25
Now if on the other hand you see a lower version or if you see something like command not found or something 26
that basically suggests that you don't have the latest version of Node installed, then I recommend just 27
clicking over here and downloading the latest installer for the Node 28
12.13.0 or whatever it may be when you're looking at this lesson. 29
Now if you don't know what the hyper terminal is, we've already gone through this in the command line 30
module and I've talked about a lot of these commands like changing directory and instructing your computer 31
to do certain things. 32
And we're going to be using the command line quite a lot. 33
So the command line module is definitely essential knowledge and I recommend completing it before you 34
proceed any further. 35
So once that's done, go ahead and open it up. And then we'll just run through the wizard very quickly 36
to accept all the licenses and get it installed. 37
And then after you've installed it, restart your computer and open up the hyperterminal again to check 38
and make sure that you've got the latest version installed. Now the reason why we need Node is because 39
we're gonna be installing packages when we're using React. As you've seen already we've been using the 40
React and ReactDOM modules. 41
And the easiest way to install those to any project is just using NPM. 42
Now if you've missed out on the Node module of the course, I strongly recommend completing that first 43
before tackling React 44
just because there's a lot of concepts that's already covered there and it might be a little bit confusing 45
if you just get started with React straightaway. 46
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
is to install VS Code. 48
Now VS code is a free and open source code editor. 49
And it's a really popular one for using with React. 50
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
like Sublime or whatever it is that you would prefer to use, 52
that's totally fine. 53
It doesn't actually matter. At end of the day it's just whatever makes you feel comfortable and which 54
ever styling or environment you prefer. 55
But if you have no preferences and you want to work on React locally, then I recommend giving Visual 56
Studio code a go. 57
It's pretty easy to install simply just head over to code.visualstudio.com 58
click on this button and go through the wizard to install it onto your computer. 59
And once you've got it installed and opened, it should look something like this. 60
A lot of the user interface looks very similar to what we've been working with in code sandbox. But no 61
matter which editor you choose I recommend heading over to this link here which are linked to and of course 62
resources and finding your particular editor be it Atom or Vim or Visual Studio code and install the extension 63
that they ask you to. 64
This way you'll get the correct syntax highlighting and it'll make it much easier to see what's going 65
on when you're writing JSX code that's being interpreted by Babel. In Visual Studio 66
the package is called Sublime Babel by Josh Peng. 67
And in order to install it, just head over to file, preferences, extensions or use the keyboard shortcut 68
and then once you're on this page go ahead and search for sublime babel. 69
And this is the one we want 70
so click on install and it should take a few seconds to install. 71
And this is basically the same as the Atom packages. 72
Now in addition I recommend getting the VS code icons extension and what this does is it just adds 73
the icon to any of the files that you have in your browser. 74
So that way files with different extensions are labeled with different icons. 75
And it makes it very similar to what we've been used to in code sandbox 76
and it's really easy to navigate when you're working with React apps. 77
Now that we're done with step to installing VS code or simply just adding a package that you saw in 78
the Babel website to whichever text editor you prefer, then we can move on to step three which is to 79
actually create a React app. And to do this 80
we're going to follow the instructions from the React website. 81
So again I'm going to link to this page and this is one of the easiest ways of creating a brand new 82
React app. 83
So we have to do it in the terminal 84
so go ahead and copy this instruction to create your first app. 85
Now this is the npx command which is, as they say, a package runner tool that comes with npm and it will install 86
create-react-app on your computer so that you can create new React apps from scratch. 87
And then the very last part is whatever it is that you want to name your app. 88
So let's just go ahead and copy it as it is to create a project called my-app and then simply paste 89
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
new React app under this particular file path. 91
So users and then my username and then my app. 92
And now it's going to install the required packages which includes react, react-dom and react-scripts. 93
Now react-script 94
we haven't used so far but it's basically the scripts that's required to actually be able to run React 95
apps locally on your computer. 96
Now the first time that you run this command, npx create-react-app and you try to generate a new React 97
app, 98
it's going to take a while. 99
So I counted and on my Windows 10 machine, it took something like 5 minutes. But once it is done though, 100
you will get something like this: "Success! Created my-app at this location". 101
And inside that directory you can run several commands, npm start to start the server, build to build 102
the React app into a production app that you can launch and a couple of other things. 103
So now that we've completed 1, 2 and 3, all we have left is to run our app. And as the instructions 104
suggest all we have to do is to cd to over to my-app and then run npm start. 105
So let's go ahead and cd over to the location of our app and if you need reminding where that is, simply 106
scroll up to the success message and you can see that it's created in my case in the C drive in this 107
location. 108
So I'm going to navigate to this using the bash format so I'll add the cd, change directory and then 109
it's going to be a forward slash to represent the root directory then it's the C drive then it was users 110
/P.D and then it was /my-app and then hit enter and you can see we've now 111
moved into the my-app directory. And it's here where we're going to run the command npm start and hit enter. 112
And this is going to use that module react-scripts to run a script and open up the app. So you might 113
get some warnings like this from Windows Firewall just be sure to click allow access if you see any 114
of these. 115
And once it's loaded up, you'll see localhosts being open up in your browser of choice and if you get 116
stuck at any point along the way, I recommend checking out the react support page because there's a lot 117
of discussion forums especially the Reactflux online chat which is on discord which has a lot of helpful 118
people who are really really knowledgeable and they can help you if you get stuck along the way installing 119
React or trying to get it to work on your local system. 120
This is all that we have for our app at the moment and in order for it to show something else, we're 121
going to have to edit our src/App.js file. 122
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
C:Users/my username/my-app and then select folder to open it up inside VS code. 124
And now you can see that my-app is showing right here. 125
So let's go ahead and close the welcome screen and hide this as well 126
and now we can see our app showing up over here. 127
If we go into the src folder and the public folder you can see there's lots of files that have been 128
prepackaged in here. 129
And what I recommend is that while you're up and running and getting used to React is to actually just 130
delete everything that's not necessary. 131
All of these logos which are being used and the robot's text which is for Google Search to index your 132
website, 133
all of these things are unnecessary and they clutter up our starting file. 134
So I'm just going to select them and then just simply delete them. Inside our source folder 135
the only ones that we want to keep is the index.js. 136
And we're going to delete everything else. 137
So now we've got a very similar format to what we've seen before in our code sandbox and you can actually 138
apply everything you've learnt so far to this code. 139
So the index.html has a lot of comments and a lot of things already in here but we can actually 140
delete all of these things while we're learning like the theme color or the viewport or the icons for 141
the favicon, 142
these are nice to have when we actually deploy our website but right now we don't need a favicon. 143
We just need to learn how to use React. 144
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
the one that we've got in our source. 146
So we're going to use the ./src/index.js. And by the way if the font is too small 147
for you, you can change it in preferences, settings and the font size here. So let's go ahead and mark 148
this script as type equals to text/jsx and let's head back into our index.js and delete 149
all of these imports other than our react and react-dom and then delete all of this code at the bottom 150
as well. 151
So we end up with what we are familiar with. Now instead of rendering a app 152
let's just test it out by rendering out an h1 from scratch, 153
a single element and let's just say "Hello world". 154
Let's hit save, go back to our localhost 3000 and you should see it updates. 155
And at this stage you should be pretty familiar with how to manipulate things using what we learned 156
in the previous lessons while we were working in the sandbox. 157
It's your choice whether if you want to use the local environment to run your app on your localhost 158
3000 or if you want to continue using the code sandbox while we create our project 159
the Google keeper app. 160
This decision I'm going to leave up to you because it's a personal preference. But in the next lesson 161
we're going to get started building out our keeper app project. 162
So for all of that and more, I'll see you there.