Hey guys. In this lesson I'm going to be taking you on a walkthrough for how to setup your local environment
for developing React apps on a Mac computer.
Up until now we've been using code sandbox which is a browser based tool to create our React apps.
And it's really nice being able to have your development environment wherever you are and which ever
computer you log into
as long as you head over to code sandbox you'll have the same projects always up and running with you.
But if you want to set up your local environment to use a code editor that you prefer
say Atom or VS code or Sublime or whatever it may be so that you can start creating React apps on
your local system,
then this lesson is for you.
There's four steps that are required to do this.
First we have to check that our Node version is up to date. Depending on when you completed the Node
module of the course,
it might be that you need to update your Node version.
Now if you are coming to the React module without having done the Node module in the curriculum I strongly
strongly recommend to do the Node module first because there's a lot of concepts that are covered there
that we're not going to go through again because we've already gone through it in excruciating detail.
I really strongly recommend to complete the Node module first before you tackle React. This way
things will actually make more sense and will be much easier to work with it.
The first thing we have to do is to check that we're running the latest version of Node, so head over
nodejs.org and over here on the left hand side you'll see the version of Node that is currently
stable.
If you go ahead and open up your hyper terminal and type in node --version and then hit enter,
you'll see your current version of Node that you're running on your computer.
And mine is currently version 12.13.0 which happens to be the most up to date
version of Node.
Now if you're seeing a lower version or if you're seeing something like node command doesn't exist, then
it might just be because you haven't installed Node or you haven't installed the latest version.
So go ahead and simply just click on this button and go through the wizard to install the latest version
of Node.
And once you're done then go back into your hyper terminal and check that you've got the latest version
like what we've done just now.
Now if you don't know what the hyper terminal is, we've already gone through this in the command line
module and I've talked about a lot of these commands like changing directory and instructing your computer
to do certain things and we're going to be using the command line quite a lot.
So the command line module is definitely essential knowledge and I recommend completing it before you
proceed any further.
Now in your command line, you might see a dollar sign as a prompt instead of my percentage symbol.
And the reason why I'm seeing a percentage symbol is because the shell that I'm running is currently
zsh.
So on the latest version of MacOS Catalina, Apple decided that they wanted us to use the zsh terminal
instead of the bash terminal.
So if you updated to Catalina you might also see an error message asking you to switch over to the z
sh terminal in which case just follow the advice that they've given and paste in the command they've
specified.
So now that we've checked that on Node version is up to date,
step two is to install VS code.
Now I prefer using VS code when I'm developing React apps because it has a lot of extensions that make
it really easy to work with React apps.
Now this is totally a personal preference.
So if you prefer working with Atom or Sublime or any other code editor in fact, you can use all of them to
develop for React.
But if you have no preference or you want to try something new, then I recommend heading over to code
.visualstudio.com and download this free open source code
editor
that's from Microsoft.
So if you click on this button you'll be guided through the wizard.
And once you've installed that it should open up and have some welcome messages et cetera.
But it will look quite similar actually in terms of the user interface to the code sandbox that we've
been using.
Now it doesn't matter which editor you choose but I recommend to head over to this link which I'll include
in the course resources and find your code editor to install the syntax highlighter to be able to work
with React much more easily.
So for Atom, the package is called language-Babel. For Visual Studio code
it's called sublime-babel and it's by a guy called Josh Peng.
If we head over to VS code and we go to the extensions tab and we search for sublime babel, you can
see this is the package that we want.
So go ahead and click install to add it to your VS code.
And this just gives it the capability to be able to highlight your JSX code and your React code
much easier.
Now another thing that I recommend installing is the VS code icons package.
And what this does is it just simply adds on these icon images to the files which have different extensions.
And it has a different image for each file extension.
It just makes it much easier to identify what's actually going on in terms of the file structure you've
got.
Because with React we're mixing a lot of different types of files right? JSX and JS and CSS and
HTML.
So I find that really helpful as well. So hopefully now you've completed step 1 and step 2.
And remember that step 2 is just to have some sort of local editor and to add the syntax highlighting
packages that were specified in the link.
Now step three is to actually create a React app. And I'm going to refer you to a documentation on the
React website which tells us how we should do this.
They've created a tool that allows us to easily build a React app from scratch and all we have to do
is to use npx which is a package runner tool for npm and we use a package called create-react-app to
create an app called my-app or whatever else you might want to name it.
As long as we've got our Node version up to date we can simply just highlight this line of code, copy
it and head into our hyper terminal and paste it in.
And it doesn't matter where you are, which directory you're in,
this will act globally so you can just paste it in and hit enter. And it's gonna get started creating
a app called my-app and it's going to install the required packages which is react, react-dom which we've
really seen and used and something called react-scripts. Now react
-scripts is a module that's going to help us run our React app locally and serve it up in our browser.
And we're going to see it in action very soon.
So this process of installing create-react-app and creating a new app can take anywhere between two
to five minutes depending on your machine.
So for me the longest it's been about 10 minutes and the shortest was about 2.
So be patient,
grab a cup of tea and come back once it's done.
Once this process has completed, it will give you a success message and it'll tell you where it's created
your app.
So in my case it's created in my root directory and then users and then angela and then my-app.
So the way that they tell you to start the server and run the app is to cd over to the location of
your newly created app and then run npm start.
Let's go ahead and do that.
Let's put in cd and our location, so you can simply just copy this if you want and paste it in here,
and then hit enter.
And now notice how we're inside our my-app project directory where we can run the command npm start.
And this is gonna use that react-scripts module in order to start the development server. And you're
probably gonna get a pop up from Apple telling you that your terminal is trying to control Google Chrome
and that's exactly what we want it to do.
So go ahead and click okay and it will open up your React app that you've just built from scratch into
localhost 3000. And this is the current file as it is. Now if we want it to show something
else then we're gonna have to edit our src/App.js file.
So if you go back into Visual Studio code and add the folder that we've just created, in my case it was
under my root folder under users under my username and then the folder was called my-app, so select this
folder that you've just created and then go ahead and click add.
And that's going to add the entire project into VS code.
Now if you expand the public and source folder which you should already be getting pretty used to because
we've been using that in our code sandboxes when we've been creating our React apps so far.
But notice how React has added a bunch of templates and images and files that we don't really need and
it's just kind of cluttering up our project.
So what I want you to do is to go ahead and select all of these files except the index.html,
so the public folder should only have our index.html file and then go ahead and right click
on the rest of them and just delete them and send them to trash. And then in our source the only file
you want is the index.js file.
And we're going to delete everything else and send that to trash as well.
So now we're left with a structure that we should be pretty familiar with.
We've got our index.html and our index.js.
So let's go ahead and reformat some of these code files so that it actually makes more sense to us.
A lot of these things such as the favicon or the theme color, this is all the stuff that we don't actually
need.
So inside the head tag, I want you to go ahead and delete everything other than the title. And inside the
body I want you to delete everything
other than that very important root div.
And if you've accidentally delete it then just put it back in.
So remember whenever we create React apps, the app is always going to be inserted into a root div.
Now we want to go ahead and link to our index.js file at the end of our body.
So let's go ahead and create a script tag and let's give it a source that's equal to ./
so a relative path to the source folder, and then it's the index.js file that we want.
Now while I'm here, I'm also going to add that type attribute to say that this is a text/jsx
file so that we don't get any errors in the console.
Now I'm done editing my HTML and it should be pretty plain and pretty easy to understand now and I'm
going to go into my index.js and I'm going to delete everything other than my top two imports
which we are already really familiar with importing React from the react module, importing ReactDOM
from the react-dom module. And then all I'm going to do is try to render a h1 onto my screen. So
I'm gonna use my ReactDOM's render method. This is all pretty familiar to you.
And we're going to render a single h1 that just says "Hello World" and we're going to place it in
our document.getElementById and it's going to be in the div with id of root.
So now that we've done this, let's go ahead and hit save on all of these files and head back over to
our browser, our localhost 3000 and you'll see it update with our React app.
So from this point on, you should be pretty familiar because it's exactly the same as what we've done
in our code sandbox and you know how to do things that are a lot fancier than this but this is just
an example of how you can create React apps locally on your computer without the use of code sandbox.
If you get stuck at any point along the way,
I recommend checking out the React support page because there's a lot of discussion forums especially
the React flux online chat which is on discord which has a lot of helpful people who are really really
knowledgeable and they can help you if you get stuck along the way installing React or trying to get
it to work on your local system.
Now in the coming lessons, we're going to be building out our Google keeper app and I'm going to be doing
it on code sandbox so that it's easy to share the links to the sandboxes with you guys.
But if you prefer working on it locally, then you now know how to create a new React app and how to run
it in the browser locally.
So the choice is yours which ever way makes you happy is the way that you should choose.
Once you're done and once you already set up in the next lesson we're going to get started building
out the first part of our keeper app. So for all of that and more, I'll see you there.