Codebase Setup - Text Instructions (Windows)

You can set up any React application using the following command-line instructions:

Instructions for Windows:

Step 1. In the search bar, type Command Prompt. Click on the first search result to open it.

Alternatively, press Win+R. In the Run window that pops up, type cmd inside the Open text field and press OK.

Step 2. Check if Node.js is installed on your machine by writing the following command:

node -v

Press Enter.

If you see any version being returned to you, it means that Node.js is installed on your machine. If this version is greater than 6, you can skip the steps 3 and 4 and directly jump to

step 5.

If the version is not greater than 6 or if you see the message "'node' is not recognized as an internal or external command, operable program or batch file.", which means that Node.js is not installed on your computer, close your Command Prompt and proceed to the next step.

Step 3. Go to this link to download Node.js:

On the webpage under LTS (Recommended For Most Users) tab, click on Windows Installer (.msi) - either 32-bit or 64-bit, depending upon your processor. This will download the latest version for you, which is definitely greater than 6.

Step 4. Double-click on the downloaded file. Proceed with the default instructions to install Node.js.

In order to verify that it has been correctly installed, open Command Prompt again and go back to step 2. If you see a version (greater than 6) of Node.js being returned to you, it means that you have successfully installed its required version on your machine.

Step 5. After Node.js is successfully installed on your system, type the following command in your Command Prompt:

npm i -g create-react-app

Press Enter.

npm stands for Node Package Manager, which gets installed while installing Node.js. i stands for install, which is a command. You can also write install in place of i. g stands for global and is preceded with a hyphen because it is a flag. create-react-app is the name of the package that you need to install. It is a CLI tool that allows you to quickly create and run React applications, with no configuration required from the user.

This command will make npm install create-react-app package globally on your machine so that you can create a React application at any valid path on your system.

Step 6. Now is the time to take one more step towards creating your first React application. In the Command Prompt, go to the path on your system where you want to create your application.

For example, if you want to create the application on the Desktop, go to the path in your Command Prompt that leads you to the Desktop.

Step 7. Create your React application using the create-react-app package that you installed on your machine in the previous step. For this, you would type a command which mentions create-react-app followed by the name of your application.

For example, here, the name of your application is phone-directory. Thus, the command can be written as follows:

create-react-app phone-directory

This command will create a folder with the name that you mentioned inside your current path in the Command Prompt. This folder will consist of all the necessary configuration files that you need as the starter code for a React application.

Step 8. Go the application folder that you created on your current path inside the Command Prompt.

For example, here, the name of your application is phone-directory. Thus, you can write the following command in order to go into this application folder:

cd phone-directory

Step 9. Now you are ready to start a development server locally on your machine and run your application in development mode. For this, write the following command in your Command Prompt:

npm start

You can see that the development server has been started on the mentioned URL on your local machine. Here, the server has been started on the localhost with port number 3000.

This will open a browser tab/window that displays the landing page of the application, which looks something like this:

Step 10. Now you can start making changes to your phone-directory application. Any code change that you make will get reflected immediately on the browser, where the application is running.

Happy coding!