Hey guys. In this lesson I'm going to be taking you on a walkthrough for how to setup your local environment 1
for developing React apps on a Mac computer. 2
Up until now we've been using code sandbox which is a browser based tool to create our React apps. 3
And it's really nice being able to have your development environment wherever you are and which ever 4
computer you log into 5
as long as you head over to code sandbox you'll have the same projects always up and running with you. 6
But if you want to set up your local environment to use a code editor that you prefer 7
say Atom or VS code or Sublime or whatever it may be so that you can start creating React apps on 8
your local system, 9
then this lesson is for you. 10
There's four steps that are required to do this. 11
First we have to check that our Node version is up to date. Depending on when you completed the Node 12
module of the course, 13
it might be that you need to update your Node version. 14
Now if you are coming to the React module without having done the Node module in the curriculum I strongly 15
strongly recommend to do the Node module first because there's a lot of concepts that are covered there 16
that we're not going to go through again because we've already gone through it in excruciating detail. 17
I really strongly recommend to complete the Node module first before you tackle React. This way 18
things will actually make more sense and will be much easier to work with it. 19
The first thing we have to do is to check that we're running the latest version of Node, so head over 20
nodejs.org and over here on the left hand side you'll see the version of Node that is currently 21
stable. 22
If you go ahead and open up your hyper terminal and type in node --version and then hit enter, 23
you'll see your current version of Node that you're running on your computer. 24
And mine is currently version 12.13.0 which happens to be the most up to date 25
version of Node. 26
Now if you're seeing a lower version or if you're seeing something like node command doesn't exist, then 27
it might just be because you haven't installed Node or you haven't installed the latest version. 28
So go ahead and simply just click on this button and go through the wizard to install the latest version 29
of Node. 30
And once you're done then go back into your hyper terminal and check that you've got the latest version 31
like what we've done just now. 32
Now if you don't know what the hyper terminal is, we've already gone through this in the command line 33
module and I've talked about a lot of these commands like changing directory and instructing your computer 34
to do certain things and we're going to be using the command line quite a lot. 35
So the command line module is definitely essential knowledge and I recommend completing it before you 36
proceed any further. 37
Now in your command line, you might see a dollar sign as a prompt instead of my percentage symbol. 38
And the reason why I'm seeing a percentage symbol is because the shell that I'm running is currently 39
zsh. 40
So on the latest version of MacOS Catalina, Apple decided that they wanted us to use the zsh terminal 41
instead of the bash terminal. 42
So if you updated to Catalina you might also see an error message asking you to switch over to the z 43
sh terminal in which case just follow the advice that they've given and paste in the command they've 44
specified. 45
So now that we've checked that on Node version is up to date, 46
step two is to install VS code. 47
Now I prefer using VS code when I'm developing React apps because it has a lot of extensions that make 48
it really easy to work with React apps. 49
Now this is totally a personal preference. 50
So if you prefer working with Atom or Sublime or any other code editor in fact, you can use all of them to 51
develop for React. 52
But if you have no preference or you want to try something new, then I recommend heading over to code 53
.visualstudio.com and download this free open source code 54
editor 55
that's from Microsoft. 56
So if you click on this button you'll be guided through the wizard. 57
And once you've installed that it should open up and have some welcome messages et cetera. 58
But it will look quite similar actually in terms of the user interface to the code sandbox that we've 59
been using. 60
Now it doesn't matter which editor you choose but I recommend to head over to this link which I'll include 61
in the course resources and find your code editor to install the syntax highlighter to be able to work 62
with React much more easily. 63
So for Atom, the package is called language-Babel. For Visual Studio code 64
it's called sublime-babel and it's by a guy called Josh Peng. 65
If we head over to VS code and we go to the extensions tab and we search for sublime babel, you can 66
see this is the package that we want. 67
So go ahead and click install to add it to your VS code. 68
And this just gives it the capability to be able to highlight your JSX code and your React code 69
much easier. 70
Now another thing that I recommend installing is the VS code icons package. 71
And what this does is it just simply adds on these icon images to the files which have different extensions. 72
And it has a different image for each file extension. 73
It just makes it much easier to identify what's actually going on in terms of the file structure you've 74
got. 75
Because with React we're mixing a lot of different types of files right? JSX and JS and CSS and 76
HTML. 77
So I find that really helpful as well. So hopefully now you've completed step 1 and step 2. 78
And remember that step 2 is just to have some sort of local editor and to add the syntax highlighting 79
packages that were specified in the link. 80
Now step three is to actually create a React app. And I'm going to refer you to a documentation on the 81
React website which tells us how we should do this. 82
They've created a tool that allows us to easily build a React app from scratch and all we have to do 83
is to use npx which is a package runner tool for npm and we use a package called create-react-app to 84
create an app called my-app or whatever else you might want to name it. 85
As long as we've got our Node version up to date we can simply just highlight this line of code, copy 86
it and head into our hyper terminal and paste it in. 87
And it doesn't matter where you are, which directory you're in, 88
this will act globally so you can just paste it in and hit enter. And it's gonna get started creating 89
a app called my-app and it's going to install the required packages which is react, react-dom which we've 90
really seen and used and something called react-scripts. Now react 91
-scripts is a module that's going to help us run our React app locally and serve it up in our browser. 92
And we're going to see it in action very soon. 93
So this process of installing create-react-app and creating a new app can take anywhere between two 94
to five minutes depending on your machine. 95
So for me the longest it's been about 10 minutes and the shortest was about 2. 96
So be patient, 97
grab a cup of tea and come back once it's done. 98
Once this process has completed, it will give you a success message and it'll tell you where it's created 99
your app. 100
So in my case it's created in my root directory and then users and then angela and then my-app. 101
So the way that they tell you to start the server and run the app is to cd over to the location of 102
your newly created app and then run npm start. 103
Let's go ahead and do that. 104
Let's put in cd and our location, so you can simply just copy this if you want and paste it in here, 105
and then hit enter. 106
And now notice how we're inside our my-app project directory where we can run the command npm start. 107
And this is gonna use that react-scripts module in order to start the development server. And you're 108
probably gonna get a pop up from Apple telling you that your terminal is trying to control Google Chrome 109
and that's exactly what we want it to do. 110
So go ahead and click okay and it will open up your React app that you've just built from scratch into 111
localhost 3000. And this is the current file as it is. Now if we want it to show something 112
else then we're gonna have to edit our src/App.js file. 113
So if you go back into Visual Studio code and add the folder that we've just created, in my case it was 114
under my root folder under users under my username and then the folder was called my-app, so select this 115
folder that you've just created and then go ahead and click add. 116
And that's going to add the entire project into VS code. 117
Now if you expand the public and source folder which you should already be getting pretty used to because 118
we've been using that in our code sandboxes when we've been creating our React apps so far. 119
But notice how React has added a bunch of templates and images and files that we don't really need and 120
it's just kind of cluttering up our project. 121
So what I want you to do is to go ahead and select all of these files except the index.html, 122
so the public folder should only have our index.html file and then go ahead and right click 123
on the rest of them and just delete them and send them to trash. And then in our source the only file 124
you want is the index.js file. 125
And we're going to delete everything else and send that to trash as well. 126
So now we're left with a structure that we should be pretty familiar with. 127
We've got our index.html and our index.js. 128
So let's go ahead and reformat some of these code files so that it actually makes more sense to us. 129
A lot of these things such as the favicon or the theme color, this is all the stuff that we don't actually 130
need. 131
So inside the head tag, I want you to go ahead and delete everything other than the title. And inside the 132
body I want you to delete everything 133
other than that very important root div. 134
And if you've accidentally delete it then just put it back in. 135
So remember whenever we create React apps, the app is always going to be inserted into a root div. 136
Now we want to go ahead and link to our index.js file at the end of our body. 137
So let's go ahead and create a script tag and let's give it a source that's equal to ./ 138
so a relative path to the source folder, and then it's the index.js file that we want. 139
Now while I'm here, I'm also going to add that type attribute to say that this is a text/jsx 140
file so that we don't get any errors in the console. 141
Now I'm done editing my HTML and it should be pretty plain and pretty easy to understand now and I'm 142
going to go into my index.js and I'm going to delete everything other than my top two imports 143
which we are already really familiar with importing React from the react module, importing ReactDOM 144
from the react-dom module. And then all I'm going to do is try to render a h1 onto my screen. So 145
I'm gonna use my ReactDOM's render method. This is all pretty familiar to you. 146
And we're going to render a single h1 that just says "Hello World" and we're going to place it in 147
our document.getElementById and it's going to be in the div with id of root. 148
So now that we've done this, let's go ahead and hit save on all of these files and head back over to 149
our browser, our localhost 3000 and you'll see it update with our React app. 150
So from this point on, you should be pretty familiar because it's exactly the same as what we've done 151
in our code sandbox and you know how to do things that are a lot fancier than this but this is just 152
an example of how you can create React apps locally on your computer without the use of code sandbox. 153
If you get stuck at any point along the way, 154
I recommend checking out the React support page because there's a lot of discussion forums especially 155
the React flux online chat which is on discord which has a lot of helpful people who are really really 156
knowledgeable and they can help you if you get stuck along the way installing React or trying to get 157
it to work on your local system. 158
Now in the coming lessons, we're going to be building out our Google keeper app and I'm going to be doing 159
it on code sandbox so that it's easy to share the links to the sandboxes with you guys. 160
But if you prefer working on it locally, then you now know how to create a new React app and how to run 161
it in the browser locally. 162
So the choice is yours which ever way makes you happy is the way that you should choose. 163
Once you're done and once you already set up in the next lesson we're going to get started building 164
out the first part of our keeper app. So for all of that and more, I'll see you there.