VSCode: Launch create-react-app and Chrome with launch.json

Developing React (with create-react-app) and Visual Studio Code you usually press ESC-` and then npm start. The script from create-react-app then automatically starts a Browser. That you then close. then reopen by pressing F5 to start Chrome in debug mode.

Let’s make these steps a little quicker.

Create a Task for npm start

Press Ctrl-Shift- and Select “Tasks: Configure Default Test Task” This will create a tasks.json file.

In the tasks.json file you need to add a couple of values:

  • isBackground: true – launch.json will not wait until the task completes
  • problemMatcher Needs to be defined to figure out when the task has completed its initialization phase and it is safe to continue with the next task
{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "type": "npm",
            "script": "start",
            "group": {
                "kind": "test",
                "isDefault": true
            },
            "isBackground": true,                       //This prevents the launch.json to wait for the completion of the task
            "problemMatcher": {
                "owner": "custom",                      //This is not needed but, required by the problemMatcher Object
                "pattern": {
                    "regexp": "^$"                      //This is not needed but, required by the problemMatcher Object
                },
                "background": {
                    "activeOnStart": true,
                    "beginsPattern": "Compiling...",    //Signals the begin of the Task
                    "endsPattern": "Compiled .*"        //Signals that now the initialization of the task is complete
                }
            },
            "identifier": "Start Server"
        }
    ]
}

Configure create-react-app

To prevent launching the browser you need to add in your .env-file following line:

BROWSER=none

More Info:

Configure the Launch.json file

Press F5 and select Chrome and a launch.json file will be created.

  • Change the port to 3000 (create-react-app default)
  • Add a preLaunchTask to start the task we defined earlier
{
    "version": "0.2.0",
    "configurations": \[ 
        {
            "name": "Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000",         //Change to the create-react-app default 3000
            "webRoot": "${workspaceRoot}/src",
            "preLaunchTask": "npm: start"           //Add prelaunch Task npm: start (defined in tasks.json)
        }
    \]
}

Start Working

Tadaa, now you press F5 and can start debugging directly in vscode. The background task will continue running even when you stop debugging.

Stop Working

You need to terminate the task via ctrl-shift-p > terminate Task. (Or you just close vscode)

DEV281x: Introduction to ReactJS

I took a quick look at Microsoft Introduction to ReactJS, not to actually learn React, but to evaluate how good the materials are for a beginner to learn React.

tl;dr Avoid the assessment. Maybe use create-react-app instead of codepen. Covers the basics quite well.

Lesson 01 | JSX and React Components

Instead of using “create-react-app” as a starting point, the course tells you to go to codepen to check out react.

I guess that makes it a little more focused on the React concepts and less focused on all the surrounding technologies that are needed in a production environment.

After that, it covers the basics of ReactJS, and JSX.

If you are a beginner you probably want to check out create-react-app.

Lesson 02 | State, Life Cycle and Event Handlers

I think the chapter covers the basics quite well. Nothing really to add here.

Lesson 03 | Lists and Forms

I think it is very nice that they cover the basics of handling multiple Form Elements with a generic handler.

handleChange(event){
  this.setState({[event.target.name]: event.target.value});
}

Assessment

The Assessment is quite theoretical and asks rather complicated questions. These questions are especially hard if you have already worked with React as you would never even try to build something in that way.

As a beginner, I would completely skip the assessment. It does not help your understanding of React. It actually also confronts you with bad practices, while inferring that this would be the way how you would actually do things

Conclusion

If you use create-react-app with vscode I think you would have a much better starting experience. The course is great to get started with ReactJS if you avoid the assessments and rather just experiment with your own code base.

Sources:

ImageDesigned by Freepik