Installing VS Code

Visual Studio Code is a source-code editor developed by Microsoft. It can be used to write JavaScript, JSX, HTML, CSS, and many other types of code.

VS Code
   ↓
Write Code
   ↓
React Project
   ↓
Web Application

VS Code provides several features that are useful when developing React applications.

• JavaScript and JSX editing
• Syntax highlighting
• Code completion
• Integrated terminal
• Extensions
• Git integration
• Debugging support
• Project file management

VS Code can be downloaded from the official Visual Studio Code website.

Official VS Code Website
          ↓
      Download
          ↓
Choose Operating System
          ↓
       Install

Choose the installer appropriate for your operating system.

VS Code is available for major desktop operating systems.

• Windows
• macOS
• Linux

Download the appropriate version for your computer.

On Windows, download the VS Code installer and run the downloaded setup file.

Download Installer
       ↓
Run Setup
       ↓
Accept License
       ↓
Choose Options
       ↓
Install
       ↓
Launch VS Code

On macOS, download the appropriate VS Code package and install the application according to the platform's normal installation process.

Download
   ↓
Install VS Code
   ↓
Open VS Code
   ↓
Create / Open Project

VS Code can also be installed on Linux using a suitable package or installation method for the selected distribution.

Linux
  ↓
Install VS Code
  ↓
Open Editor
  ↓
Open React Project

After installation, open Visual Studio Code from your operating system's application menu or shortcut.

VS Code
   ↓
Welcome Screen
   ↓
Open Folder
   ↓
Project

The VS Code interface contains several important areas.

+--------------------------------------+
| Menu / Toolbar                       |
+------+-------------------------------+
|      |                               |
| Side |        Editor                 |
| Bar  |                               |
|      |                               |
+------+-------------------------------+
|        Integrated Terminal           |
+--------------------------------------+

The Explorer panel allows you to view and manage files and folders inside your project.

my-react-app/
 |
 +-- src/
 +-- public/
 +-- package.json

You can open files directly from the Explorer.

The editor area is where you write and edit your source code.

function App() {

    return (
        <h1>Hello React</h1>
    );

}

You can open multiple files using editor tabs.

VS Code includes an integrated terminal, allowing you to run commands without opening a separate terminal application.

npm --version
node --version
npm run dev

This is especially useful for React development.

You can open the integrated terminal from the VS Code interface. You can also use the terminal shortcut supported by your operating system and VS Code configuration.

VS Code
   ↓
Terminal
   ↓
Command Prompt / PowerShell / Shell
   ↓
Run Commands

Use the VS Code file or folder opening option to open your React project.

VS Code
   ↓
Open Folder
   ↓
my-react-app/
   ↓
Project Files

Opening the project folder allows VS Code to display the complete project structure.

You can create new files from the Explorer panel. For example:

src/
 |
 +-- App.jsx
 +-- main.jsx
 +-- components/
       |
       +-- Header.jsx

The exact file names depend on the project structure you use.

VS Code provides built-in editing support for JavaScript.

const name = "Amit";

function greet() {
    return `Hello ${name}`;
}

Features such as syntax highlighting and code completion can make JavaScript development easier.

React applications commonly use JSX. VS Code can provide syntax highlighting and editing support for JSX files.

function App() {
    return (
        <div>
            <h1>Hello React</h1>
        </div>
    );
}

VS Code can provide suggestions while you type code.

console.
document.
Array.
React.

Code completion can help developers discover available properties, methods, and symbols.

VS Code uses syntax highlighting to make different parts of source code easier to distinguish.

const name = "React";

function App() {
    return <h1>{name}</h1>;
}

Different language elements are visually distinguished by the editor.

VS Code supports extensions that can add functionality to the editor.

• Language support
• Formatting tools
• Linting tools
• Git tools
• Debugging tools
• Productivity features

Install extensions only when they are useful for your project.

Depending on your project, you may use extensions that improve JavaScript, JSX, formatting, or code quality workflows.

VS Code
   ↓
Extensions
   ↓
JavaScript / JSX Tools
   ↓
Better Development Experience

The exact extension choices can vary between projects and teams.

Code formatters can help keep React code consistently formatted.

function App() {
    return (
        <h1>Hello React</h1>
    );
}

A consistent formatting style makes code easier to read and maintain.

VS Code provides built-in source control features that can be used with Git repositories.

React Project
     ↓
Git Repository
     ↓
VS Code Source Control
     ↓
Commit / Branch / Changes

This allows developers to inspect and manage many Git operations directly from the editor.

VS Code provides debugging capabilities through its development environment and extensions.

Application
     ↓
Debugging
     ↓
Breakpoints
     ↓
Inspect Values
     ↓
Find Problems

Debugging tools can help developers understand how their code runs.

The VS Code terminal can be used to execute commands related to your React project.

node --version
npm --version
npm install
npm run dev

The exact commands available depend on the project configuration.

If the VS Code command-line launcher is configured on your system, you can open a project directory from a terminal.

cd my-react-app
code .

The code . command means opening the current directory in VS Code when the command is available.

my-react-app/
│
├── public/
│
├── src/
│   ├── App.jsx
│   ├── main.jsx
│   └── components/
│
├── package.json
└── node_modules/

VS Code lets you work with all these files from one project window.

Open VS Code
      ↓
Open Project Folder
      ↓
Open Source File
      ↓
Write React Code
      ↓
Open Terminal
      ↓
Run Development Command
      ↓
Test Application
      ↓
Edit Code

• Install VS Code.
• Open VS Code.
• Open your React project folder.
• Verify that the Explorer displays project files.
• Open the integrated terminal.
• Check Node.js with node --version.
• Check npm with npm --version.
• Install useful extensions when required.
• Open a React source file.
• Run the project's development command.

VS Code provides a convenient development environment for working with React projects. You can manage project files, write JSX and JavaScript, use the integrated terminal, install extensions, work with Git, and debug your application.

VS Code
   ↓
React Project
   ↓
Write JSX / JavaScript
   ↓
Terminal
   ↓
Run Development Tools
   ↓
Test React Application