Getting Started with Create-React-App

One of the most fascinating technologies I’ve self-studied this summer is React.js, a JavaScript library created by Facebook that seems to be the “flavor of the day”. People love it because it’s fast and modular. However, if you’re coming from other JavaScript frameworks and libraries such as Angular, React definitely has a bit of a learning curve.

So let’s tackle this learning curve head on. Part 1 of this React tutorial series is simple: just getting a project set up on your computer.

First, if you haven’t already, install Node.js here. This will install Node and npm (Node Package Manager) onto your machine.

Next, open up a command prompt. I prefer to use Git Bash because it replicates many of the Unix commands. To check to see if it’s installed, run this command:

Run this command to check if it’s installed. If it’s not installed you’ll get an error.

Now that you’ve verified Node is installed, you may find it beneficial to install Yarn, which is just a cleaner way to do everything that npm does. You can install Yarn by simply running npm install yarn.

Now, navigate to the directory that you’d like your project to live in.
We’re going to install an npm package that will make getting started with React very easy. It’s called create-react-app, which is a package that bootstraps all the necessary parts to get a simple React app running. To do this, run:

This will globally install the create-react-app npm module so that you can access it from any directory. Verify that you are in the directory you want your project to be in. Now, run the create-react-app command along with the desired name of your project.

Now you can open up your favorite text editor and look at the project. You’ll see that among other things, you have App.js, App.css, index.js, index.css, package.json, etc.

We’ll talk more about what all of these files mean in upcoming lessons, but for now, you can see what your new project looks like simply by moving into your project and running npm start, and opening up the localhost port that your terminal specifies. By default, it’ll be port 3000. I have mine running on localhost:3001.

Note: Sometimes when running npm start from Git Bash, I get a message saying “Something is already running on port 3000”. If you run npm start from an IDE-embedded terminal like Visual Studio Code, you get the option to run it from a different port.

Open up your browser and navigate to your port.

You can open up localhost in any web browser. My preferred browser is Chrome.

Voila! You have a working React application, complete with the rotating logo.

Keep a look out for upcoming tutorials, where we’ll dive a little deeper to understand how exactly you can use the powers of React to your advantage.

Thanks for staying tuned for HackStack’s very first tutorial! Feel free to hit me up in the comments if you have any questions. Happy hacking!