React, Set-it-up on your machine
Let us today take a quick tour and do the needed to get the set-up ready on our local machine to build and run a react app. No doubt you’ll be getting a lot many number of options for online virtual setup(s), but one must know what and how all things gets performed for becoming a good react developer
What all you’ll need
- Node.js
- Code editor(An IDE)
The following 10 easy and simple steps will help you ans sort you out with the complete set-up
Step 1
The very first step, navigate to the node.js official website and download the latest version for which-so-ever system you are going to work with (Mac/Linux/Windows).
Step 2
Simply install it with a few simple guided steps…
Now you have node.js onto your machine… We are not going to use or create some node.js code but we need its package builder to work with react.
Step 3
Go to the Command prompt and run the following command:
npm install create-react-app –g
This command is for installing the needed packages from node js.
So, now coming up to the next part, you have installed the needed software…
Step 4
Now the question comes for creating new project, Follow the below given simple basic steps to create the react app of your own.
Step 5
At first, Navigate to the directory (In Command Prompt) in which you’ll be creating the react app.
Step 6
Now enter the command — create-react-app <NAME OF APP> — scripts-version <version>
Note: This version thing is not related to react version, it is the version of the framework/code hierarchy you’ll be getting… Indeed, you could also change it in future as per your needs
Step 7
Enter into the directory of the App created.
Now hit the command: npm start.
Note:This will start the development server and will run the application code present there.
<You’ll get a browser opened in your machine with URL localhost::3000.>
This is the basic app present in your directory.
Step 8
As of now you can get a code editor setted up for further progress; Choose an editor of your own choice, which you are comfortable with, we have a lot many as a free source like atom, eclipse, visual studio and many more.
Me personally likes to work with visual studio. But please go with one you are comfortable with. No matter what editor or what kind of editor you are choosing, the files and the structure of the framework remains the same.
Step 9
So, after launching the code into the editor. The files and packages you would find in the root directory would be:
- node_module
- public
- src
- package.json
- pacakage-lock.json
- readme.md
So, these files contains the relevant data, the very first node_module contains the basic dependencies and it’s a huge number. We need only react, react-dom & react-scripts but these three dependencies are further dependent on such files.
Package.json contains every detail which you need to run the app.
You can ignore this lock files, these are only meant for the version which we mentioned while creating a new react application.
Now comes what src and public packages contains….
src has all the working files and source code for the app whereas the pubic package contains html files named index and other needed attachments.
Readme.md is a complete guide to react and what else you can do with your application development.
Step 10
EXPLORE REACT!
You are all set to explore, create, build and run react applications,
Easy no?
Lets just start learning it in a new conceptual way.
Keep Learning!
See you in the next blog.