FREELessons: 14Length: 1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 Creating Projects

We'll go over the tools and setup you'll need to follow along in this course, and then we'll create our Hangman project.

Related Links

1.2 Creating Projects

The first thing that we need to do is go over what you need to follow along in this course and it is a very short list in fact there's just one thing, that you absolutely need to have, and that is Node.js. Now Node.js is a platform for developing applications. And you can write them all in JavaScript because node is built upon Chrome's V8 JavaScript engine. That's pretty awesome. However, as far as our purposes, we want what's called NPM node package manager, which comes with node. Because NPM is how we manage our applications dependencies. It's how we practically build our applications today. There are a lot of development tools that go into building a React application and we are going to retrieve those tools using NPM. So you need to go to node and you need to download and install Node.js. Now there are two versions, there is the LTS which stands for Long Term Support, and then there's the Current. Now the LTS well that's the long term support that is the stable version and when it comes to just about anything that's the version that I always up to because that is what I would use in production. The current version will have all of the latest features and the bells and whistles but I think of the current version more like a beta. That is where new features go to be tested and hardened before they are part of the LTS, so it doesn't matter what version number just go with the LTS version. The installation is very straightforward. Just take the defaults and you will be good to go. So that is the absolute one thing that you need now, the other thing is a code editor. And really, anything that can open and save text files would technically be a code editor. However, when it comes to working with JavaScript there is nothing that is better than Visual Studio Code. The website is code It is made by Microsoft but It is the best environment for JavaScript development. If you're on Windows, Mac or Linux, there is a build for you. So if you want to use Visual Studio code, which I recommend, then go for it. Download for your OS, install it and you will be good to go there. Now, of course there are many other code editors. And you can use whichever one that you are most comfortable with, I want to just point that out. But on screen you're going to see me using Visual Studio Code. So once you have at least Node.js installed we can hop on over to the command line. And we are going to create our project. Now, we use a command line because that is how we work with npm. There is no graphical user interface, it is all command line. And there is a command called npx. What this is going to do Is execute some code that is in the npm repository. And the code that we are going to execute is called Create react app. Now when it comes to creating a React application, we can do so in a variety of ways. But this in my opinion is the best. This gives us a development environment that is set up ready for us to just jump right in start developing our application. So we are going to say npx space, create react app space, and then the name of our project. So let's just go ahead and let's call that hangman. Now after you press enter, this is going to go out to the internet and it's going to start downloading and installing all of the packages needed for creating a react application. It's going to tell you everything that it is doing. And of course, the time that it takes to do this will vary based upon your machine and network speed. And after the project is created, you're going to see this screen is going to tell you all of the commands that you can use to do different things with the project. Now, this is using yarn. And you don't have to use yarn if you don't want to. But each one of these commands starts build, test and eject, you would want to run that. Like for example, if we wanted to start our application which is going to compile our code and then run it in a web server so that we can actually see it in the browser. We could say npm run start, or if you wanted to use yarn, it would be yarn starts. Now, we haven't really talked about yarn, and that's fine, I'm just going to stick with npm. But first I want to fire up the code editor. And that was not what I needed to do. Instead I needed to cd into hangman I need to read the instructions that it provides here so we will cd into hangman and then fire up the code editor and then we will start the application and we can see what it is going to give us just right out of the box. And there it is. That is our project or at least the beginnings of our project. Now in the next lesson, we're going to take a tour of the project. There's really not a whole lot there, but there are some things that you need to be aware of.

Back to the top