How to Create a React Web App in Visual Studio Code

There are a number of JavaScript frameworks that promise to make developing web apps for both browsers and mobile devices easier, faster, and with superior results. Of these, a few have risen to the top of the heap, namely Angular, Ember, and React. Each has their idiosyncrasies that differentiates it from the others. For example, Facebook’s React is the lightest weight of the three, and focuses exclusively on the User Interface (UI).

This tutorial aims to kill two birds with one stone by familiarizing you with both the React JS library and Microsoft’s Visual Studio Code IDE. Originally, I had planned on using the Reactide IDE, but unfortunately, at the time of this writing, it is still in the works. That being said, we’ll create a basic web app using Visual Studio Code (VSC) version 1.24.x. It’s not only free, but boasts React IntelliSense and code navigation out of the box!

Prerequisites

In addition to MS Visual Studio Code, you’ll also need the Node.js JavaScript runtime and npm Node.js package manager. Node.js comes with npm, so installing it covers both tools.

To confirm that you have Node.js and npm correctly installed on your machine, you can type the following statements at the command prompt:

C:\Users\blackjacques>node -- version
v8.10.0

C:\Users\blackjacques>npm -- version
5.6.0

Generating the App

We’ll be using the create-react-app generator for this tutorial. It’s the best way to start building a new React single page application. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.

The first step is to install the create-react-app generator, by typing “npm install -g create-react-app” from a terminal or command prompt. As it happens, VSC includes an Integrated Powershell Terminal. It’s like a DOS command prompt, but on steroids!

To open the terminal from within VSC:

• Select View -> Integrated Terminal from the main menu.
• Now type the “npm install -g create-react-app” command at the prompt. You should get a report of packages added:

Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.

PS C:\Users\blackjacques> npm install -g create-react-app
C:\Users\blackjacques\AppData\Roaming\npm\create-react-app -> C:\Users\blackjacques\AppData\Roaming\npm\node_modules\create-react-app\index.js
+ create-react-app@1.5.2
added 67 packages in 9.086s

Now it’s time to create a new React application.

• Type the following statement at the PS comand prompt:

create-react-app my-first-react-app

This will take a bit longer. Again, you’ll get a progress report.

PS C:\Users\blackjacques> create-react-app my-first-react-app

Creating a new React app in C:\Users\blackjacques\my-first-react-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts…

> uglifyjs-webpack-plugin@0.4.6 postinstall C:\Users\blackjacques\my-first-react-app\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

+ react@16.4.0
+ react-dom@16.4.0
+ react-scripts@1.1.4
added 1320 packages in 102.941s

Success! Created my-first-react-app at C:\Users\blackjacques\my-first-react-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can't go back!

We suggest that you begin by typing:

  cd my-first-react-app
  npm start

Happy hacking!

Opening the Project in VSC

With our app built, we can now open it in VSC. To do that:

• Click “Open folder…” in the Welcome screen under Start or select it from the FileMain Menu:
• Use the Select Folder dialog to browse to your “my-first-react-app” folder and click the Select folder button to load the project into the IDE.

Here is the loaded project structure in VSC:

Taking our App for a Spin

True to its name, the create-react-app generator generates everything your web app needs. In fact, the app is perfectly runnable at this point. To view it, type “npm start” at the command prompt. That will launch the default browser with our app loaded at “http://localhost:3000/”:

Going Forward

As you can see, React is arguably the easiest to work with of the popular frameworks. Now that we’ve got our app in a runnable state, we’ll use React to build an impressive UI in the next installment.