Running a React App using VSCode and How to Debug React

CREATING & RUNNING REACT

1. Install VS code using the url https://code.visualstudio.com/download if you do not have it already installed in your machine
2. Install NodeJS from this url https://nodejs.org/en/download/
3. Create a folder where to want to create the react application.
4. You can create the application by either using GitBash or the terminal on VSCode

Using GitBash: Right click on the folder and select Gitbash here if you have git installed in your computer. Then type the command npx create-react-app your-name-of-application e.g., create-react-app my-reactapp

Using Terminal on VSCode: Type the command npx create-react-app your-name-of-application and wait for the commands to finish executing.

1. Open the folder containing your application in VS code and navigate to src/app.js and write some code. Below is a sample App.js file after making a few changes
2. On the VSCode terminal, navigate to the folder by typing cd foldername for instance cd my-application.
3. Type nmp start and the application should launch on the browser as shown below.

DEBUGGING REACT

1. Configure the debugger by going to Run and Debug view (Ctrl + Shift + D)
2. Select create a launch.json file link to create a launch.json debugger configuration file.
3. Select the debugger dropdown list and choose Web App (Edge).
4. Change the port of the url from 8080 to 3000. The launch.json file should look as shown below.

1. Press F5 or the green arrow with Run to launch the debugger.
2. You can set break points as you run the code and step through using F10