Install React.js through create-react-app with Node.js (Complete Beginner with no programming skills)

After completing multiple React tutorials and reading multiple tips and tricks, I am ready to create my first React project.

Download Node.js

But I had no idea that Node.js had to be installed first or whatever Node.js is. For a beginner like me, here is the website to get Node.js https://nodejs.org/en/ doesn’t really matter which version but I chose the latest version.

Click the latest features 11.6.0 Current (your version may change at your current time)

After downloading, legit just keep pressing next until it’s installed. Then open up Node.js command prompt. We are going to be using this command prompt a lot so get familiar.

This is my current folder called ‘talal’, yours may be different depending on what your computer is called

Download create-react-app

The link can be found through GitHub where you will need to Clone or download.

I just chose “Download ZIP”

I moved the downloaded folder into Desktop

npm Stuff

npm is a package manager for Node.js so when you installed Node.js, npm program also comes with it. But we won’t get into details for what npm really does.

To install create-react-app with npm , open up Node.js command prompt and navigate yourself into the Desktop folder (or where you have saved your create-react-app)

To navigate, type cd Desktop

cd stands for change directory (change folder) so instead of clicking manually onto each folder, you can just cd into each folder.

“C:\Users\talal\Desktop>” tells you that you are in the Desktop folder

Now you need to cd into the downloaded create-react-app folder from GitHub. Mine is called create-react-app-master folder. (If you just moved the folder onto desktop, you can simply type cd create-react-app-master

Install create-react-app

In type npm install create-react-app -g_ where -g flag means installing globally onto your machine.

To check if you have successfully installed, type create-react-app --version and it should show your version

My version is 2.1.2 so yours might be different by the time you installed

Create folder for your project

In the Desktop directory, using the Node.js command prompt, type create-react-app project-name where project-name is your project folder’s name.

Press enter and wait for the Node.js command prompt to go crazy. It will be grabbing all the dependencies that it needs for configuration. Check your desktop for the folder to appear there.

What your Node.js command prompt should look like after creating project folder

Before Happy hacking! on the last line, the Node.js command prompt suggests that you type the follow:

cd project-name which goes into the project folder that you have recently created

Then npm start to start the project.

Now wait…

This window should pop-up after you type npm start

Note: This window will show error if Node.js command prompt does not run in the background

You now have React.js installed and ready to start the project by opening up text editor. I use Atom for mine where you can open up project-name folder within any text-editor software.