ref – https://code.visualstudio.com/docs/nodejs/reactjs-tutorial
We’ll be using the create-react-app generator for this tutorial.
To install the create-react-app generator, in a terminal or command prompt type:
npm install -g create-react-app
This may take a few minutes to install. You can now create a new React application by typing:
This may take a few minutes to create the React application and install its dependencies.
Let’s quickly run our React application by navigating to the new folder and typing npm start to start the web server and open the application in a browser:
You should see “Welcome to React” on http://localhost:3000 in your browser. We’ll leave the web server running while we look at the application with VS Code.
To open your React application in VS Code, simply open the VS Code application and open the my-app-one folder.
To debug the client side React code, we’ll need to install the Debugger for Chrome extension.
Open the Extensions view and look for “Debugger for Chrome extension” in the search box. You’ll see several extensions which reference Chrome.
Press the Install button for Debugger for Chrome. The button will change to Installing then, after completing the installation, it will change to Reload. Press Reload to restart VS Code and activate the extension.
Set a breakpoint
To set a breakpoint in index.js, click on the gutter to the left of the line numbers. This will set a breakpoint which will be visible as a red circle.
Configure the Chrome debugger
We need to initially configure the debugger. To do so, go to the Debug view and click on the gear button to create a launch.json debugger configuration file. Choose Chrome from the Select Environment drop-down list. This will create a launch.json file in a new .vscode folder in your project which includes a configuration to launch the website.
We need to make one change for our example: change the port of the url from 8080 to 3000. Your launch.json should look like this:
"name": "Launch Chrome against localhost",
Ensure that your development server is running (“npm start”). Then press fn+F5 or the green arrow
to launch the debugger and open a new browser instance. The source code where the breakpoint is set runs on startup before the debugger was attached so we won’t hit the breakpoint until we refresh the web page. Refresh the page and you should hit your breakpoint.