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.
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.
Download create-react-app
The link can be found through GitHub where you will need to Clone or download.
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 justcd
into each 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
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.
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…
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.