Visual Studio Code for Creating React.js Apps

6 min readDec 30, 2020

This article provides a basic guide to using Visual Studio Code (VSC) for your React Apps — complete with installation of VSC and Node.js.

Before starting this tutorial you will need basic knowledge on the following:

HTML
CSS
JavaScript
JSX
React

1. Installing Node.js:

Node.js is a free framework that runs on various platforms — Windows, Unix, Mac OS X, etc.
It uses JavaScript on its open source server environment.
The Node Package Manager (NPM) allows you to have access to any package on your device through the NPM CLI.
Developers can execute the React.js code directly in the Node.js environment.

Step 1: Go to this link and select your device to download the installer (for example 32 bit Windows device):

Step 2: Select the downloaded installer and select Run:

Step 3: Follow the prompted windows until installation is completed:

NOTE: if you are not sure if you have installed Node.js on your device, a window will pop saying it is already installed on your computer and the installer will exit.

2. Installing Visual Studio Code:

Step 1: Go to this link and select your device to download the installer (for example Windows device):

Step 2: Follow the prompted windows until installation is complete:

Step 3: Check the box and click on Finish:

3. Starting Your First App in VSC:

Once you start up VSC you will be on the ‘Welcome’ page:

Let‘s start by creating a folder for all our react apps:

Minimize your VS Code window.
Choose where you would like to keep all your projects — e.g. on your Desktop or in Documents (I chose my Desktop).
Right click on your mouse (or mousepad).
Select ‘New’.
Select ‘Folder’.
You can rename this folder to your liking — I will rename mine ‘Medium_React_App_Tutorial’ (capitalize each word with underscores in replace of spaces).

Access your folder on VSC:

Select ‘File’ and ‘Open Folder’ from the dropdown navigation bar in VS Code:

2. Look for your folder and click ‘Select Folder’:

3. You can remove the ‘Welcome’ tab.

4. You will see your empty folder in VSC and a list of commands at the bottom. Let’s open the terminal. We could access the terminal through the navigation menu bar. However the command is given to us by using Ctrl+`:

Using your terminal in VSC:

Once opened, your terminal will be presented below your editor:

This is where we will:

Test if Node is installed
Use NPM on VSC

In the terminal type in the following and press enter:

node -help : this will check if Node was installed correctly. After it runs the following should be presented:

Welcome to Node.js v15.2.1.
Type “.help” for more information.

Great! This means we have installed it correctly! Let’s exit from that by pressed CTRL+C twice or type .exit in the terminal and press enter.

2. npx create-react-app react-app-tutorial : creates a new folder called ‘react-app-tutorial’ (you can name it anything but remember to use lowercase with dashes instead of spaces) in my ‘Medium_React_App_Tutorial’ folder and adds all packages to it with a start up React App. This may take a few minutes to be executed. Once it is done, your terminal will look similarly to this:

3. cd react-app-tutorial : accesses the new folder.

4. npm start : hosts the server and opens your live browser:

Your terminal will look similarly to this:

Time to get our React on VS Code:

These 3 things are the fundamentals behind React and the logic it possesses. You will combine JavaScript with HTML in your React Components thus using JSX. I learnt React from freeCodeCamp and I will be using examples from their tutorials to get you started on your apps in VS Code.

Let’s Do This!

1.Click on the dropdown arrows of your folder in the Explorer side bar then do the same for the ‘src’ and ‘public’ folders and click on the ‘App.js’ file in the ‘src’ folder:

2. Everything in the return brackets can be deleted and replaced with the text of ‘Hello World’ using HTML. The logo import at the top can be deleted too:

Now we have a clean app. You have the option of cleaning the ‘App.css’ file to make room for your own CSS as you develop your app.

Using export default and adding the app name after allows you import that component when needed e.g. export default MyFirstReactApp
Never delete your export default App code. This lets you push your code into the ‘index.js’ file:
The ‘index.js’ file is where the package imports are made in order for the App to be rendered to the DOM.

3. When you want to add a separate component to your app, you need to add the new file under the ‘src’ folder by right-clicking the folder and name it with ‘.js’ at the end of the file name:

For example: I have created a stateful component with the property ‘name’ that can be entered by the user into an input.
Note: State consists of any data your application needs to know about that can change over time.
You add this new (child) component to the parent component.

Once you have all your components in the App component you can also style them using the ‘.css’ file with the same name — for added components you will need to create a new css file and import it similarly.
You do not need to export the css file.
Remember to save all your files in order to see a live update on your browser.

4. If you are running tests on your app for submission purposes like in freeCodeCamp, you can add script tag in the ‘index.html’ file located in the public folder. It has to be added just before the body closing tag: