Setting Up Your Development Environment

Before you can build modern web applications with React and JavaScript, you need to set up a development environment on your computer. A good setup not only makes your work easier and more efficient but also teaches you essential skills like working with the terminal, version control, and using modern developer tools.

In this lesson, we’ll cover everything you need to get started: installing Node.js and npm, setting up Visual Studio Code (VS Code), configuring GitHub Copilot, and creating your first project folder with Git initialized.

Installing Node.js and npm

Node.js is a JavaScript runtime that allows you to run JavaScript code outside of the browser — it’s widely used to build tools and servers, and it’s required for React development. npm (Node Package Manager) comes bundled with Node.js and is used to manage libraries and dependencies for your project.

Steps to install Node.js and npm:

  1. Download Node.js:
    Visit the official Node.js website at https://nodejs.org. You’ll see two download options: LTS (Long Term Support) and the latest version. For beginners, the LTS version is recommended because it’s more stable.
  2. Install Node.js:
    Run the downloaded installer and follow the on-screen instructions. By default, npm will also be installed along with Node.js.
  3. Verify installation:
    Open your terminal (Command Prompt on Windows, Terminal on macOS or Linux), and type the following commands to check the installed versions:
1
2
node -v
npm -v
  1. You should see version numbers for both Node.js and npm, confirming that the installation was successful.

Setting up VS Code for web development

Visual Studio Code (VS Code) is one of the most popular code editors among web developers. It’s lightweight, powerful, and highly customizable with extensions.

Steps to install and set up VS Code:

  • Download VS Code:
    Go to https://code.visualstudio.com and download the installer for your operating system.
  • Install VS Code:
    Run the installer and follow the setup instructions.
  • Recommended extensions for web development:
    • ESLint: Helps you catch common JavaScript errors and enforce consistent code style.
    • Prettier: Automatically formats your code for better readability.
    • Bracket Pair Colorizer (or native bracket highlighting): Makes it easier to see matching brackets.
    • GitLens: Enhances built-in Git capabilities in VS Code.
    • npm Intellisense: Provides autocompletion for npm modules.
  • Configure settings:
    You can customize settings like font size, themes, tab size, and formatting preferences to match your style. Click on the gear icon in the lower left corner and select "Settings" to explore options.
  • Integrated terminal:
    VS Code comes with an integrated terminal, which lets you run commands without leaving the editor. You can open it using Ctrl + `` (backtick) on Windows/Linux or Cmd + `` on macOS.

Installing and configuring GitHub Copilot

GitHub Copilot is an AI-powered coding assistant that suggests code completions and entire code snippets as you type. It can help you write code faster and even learn new patterns as you go.

Steps to install GitHub Copilot in VS Code:

  • Get access:
    You need a GitHub account and a subscription to GitHub Copilot (there’s usually a trial period available). Sign in to your GitHub account and activate Copilot if you haven’t already.
  • Install the extension:
    • Open VS Code.
    • Go to the Extensions panel on the left sidebar (or press Ctrl + Shift + X).
    • Search for "GitHub Copilot".
    • Click "Install".
  • Sign in to GitHub:
    After installation, VS Code will prompt you to sign in with your GitHub account to enable Copilot.
  • Start using Copilot:
    Once enabled, start typing a comment describing what you want (for example, // create a React component) and Copilot will suggest code below. You can accept suggestions using the Tab key or keep typing to get new options.

Using Copilot is a big shift in how developers work. Rather than writing every line from scratch, you can describe your intent and let AI help you scaffold or complete code, speeding up your workflow and reducing the effort on repetitive tasks.

Creating your first project folder and initializing Git

Version control is an essential part of modern development, and Git is the most widely used system for tracking changes in your code.

Steps to create your first project folder:

  • Create a new folder:
    You can create a new folder manually (e.g., named my-react-app) or by running a command in your terminal:
1
2
mkdir my-react-app
cd my-react-app
  • Open the folder in VS Code:
    In VS Code, select "File" > "Open Folder" and choose your new project folder.
  • Initialize Git:
    • Open the integrated terminal in VS Code (`Ctrl + ``).
    • Run:
1
git init

This command sets up a new Git repository in your project folder. You’ll see a .git folder created, which stores all version history.

  • Create an initial commit:
    • Create a simple file, such as README.md, and add some content (e.g., # My React App).
    • Save the file.
    • Run:
1
2
git add .
git commit -m "Initial commit"

This sets a foundation for your project, enabling you to track every change you make, collaborate with others, and roll back if needed.

Final thoughts

By completing these setup steps, you’ve laid the groundwork for modern web development. You now have Node.js and npm to handle packages, VS Code configured with essential extensions and AI assistance, and Git initialized to manage your code changes.

From here, you’re ready to start building real, interactive web applications with React — all using a professional, modern toolchain that mirrors what developers use in production today.

Previous LessonNext Lesson

Frequently Asked Questions