React Basics: Getting Started with React and Visual Studio Code

See how Vite and VS Code, with its rich ecosystem of extensions including AI code assistants, can boost your development power and flexibility.

React has come a long way from the days when scaffolding a new project meant running a single command with Create React App (CRA). As of February 2025, the React team has officially deprecated CRA for new applications, recommending existing apps migrate to a framework or switch to a modern build tool like Vite, Parcel or RSBuild.

This shift marks a broader evolution in the React ecosystem, one that prioritizes performance, modularity, and a smooth developer experience. In this guide, you’ll learn how to scaffold a React application using Vite and Visual Studio Code (VS Code).

Prerequisite

• Node.js 18+ or 20+ installed on your machine
• npm or yarn package manager installed on your machine; we will be using npm in this tutorial

Setting Up a React App with Vite

Vite is a modern build tool for frontend development created by Evan You. It is a blazing fast frontend build tool for powering the next generation of web applications. Vite is widely regarded as the natural successor to Create React App (CRA) for building modern single-page React applications.

Often seen as an unofficial replacement for the now-deprecated CRA, Vite offers a similar seamless setup configuration without major deviations. Unlike CRA, which relied on webpack, Vite leverages esbuild under the hood, making it significantly faster. It’s also lighter weight and requires less configuration.

Setting up a React app with the Vite build tool allows you to work with React’s core fundamentals without the added complexity of a full-fledged framework like Next.js.

In this section, we will create a new React project using the Vite tool from the command line.

Run the following command in your terminal to create a new project with Vite:

npm create vite@latest  my-react-app

This command will run to configure every necessary tool to scaffold a React local development environment.

After that, Vite will prompt you to select a framework:

> npx
> "create-vite" my-react-app

│
◆  Select a framework:
│  ○ Vanilla
│  ○ Vue
│  ● React
│  ○ Preact
│  ○ Lit
│  ○ Svelte
│  ○ Solid
│  ○ Qwik
│  ○ Angular
│  ○ Marko
│  ○ Others
└

Vite can be used to bootstrap a range of frontend frameworks and libraries, not just React. Use your keyboard arrow key to select React. Once you select the React framework, Vite will ask you to choose a language, either JavaScript or TypeScript. You can pick whichever one you prefer for your project.

For this example, use your arrow keys to select JavaScript:

◆  Select a variant:  
│  ○ TypeScript  
│  ○ TypeScript + SWC  
│  ● JavaScript  
│  ○ JavaScript + SWC  
│  ○ React Router v7 ↗  
│  ○ TanStack Router ↗  
│  ○ RedwoodSDK ↗

You can see other options with SWC. SWC (Speedy Web Compiler) is a JavaScript/TypeScript compiler used in Vite for transforming JavaScript and TypeScript code. It’s a fast, low-level JavaScript and TypeScript compiler built with Rust, designed to deliver faster build times and better performance.

After setting up the framework, you will see an output that the project has been scaffolded in your project folder. Vite will then instruct you to install dependencies using npm:

◇  Scaffolding project **in** /Users/mac/my-react-app...  
│  
└  Done. Now run:  
  
cd my-create-app  
npm install  
npm run dev  

Navigate to your project folder as directed:

cd my-react-app

Then, install the dependencies for this project:

npm install

Next, start the development server to make sure everything is working. Use the following command to run the development server:

$ npm run dev

This command will then run your project in development mode. It will prompt the following outputs:

VITE v6.3.5 ready **in** 1227 ms  
  
➜  Local:  http://localhost:5173/  
➜  Network: use --host to expose  
➜  press h + enter to show help

Next, click on the link (http://localhost:5173/) to open the project in your browser:

Setting Up Visual Studio Code

Visual Studio Code, or VS Code for short, has become one the most sought-after code editors for web development compared to other IDEs out there due to its simplicity of getting things up and running with plugins to suit any type of web development project.

To get started, go to https://code.visualstudio.com/ to download a copy for the type of system you’re using (Mac, Windows, Linux). It will automatically detect the installer version for your system. I’m using a Mac for this tutorial:

Once your download finishes, go ahead and run the installer on your local machine and follow the steps afterward to set it up. Once you’re done find it in your application folder to start it up or open it directly with this code below from the terminal in your previously created my-react-app folder:

$ code .

This will open VS Code automatically with the project file:

VS Code Extensions for React Projects

VS Code extensions add debuggers and development tools directly to your editor, enhancing your workflow and productivity. This flexible extensibility model is a major reason many React developers prefer VS Code. A wide range of extensions are available to help streamline and improve web development experience.

Here are my top five extensions to speed up your React development:

• ESLint: The VS Code ESLint extension integrates ESLint into your editor. It analyzes your code statically to quickly identify and fix problems, helping you avoid bugs and write cleaner, more consistent code. To install it, open the Extensions tab in VS Code and search for “ESLint.”

• Prettier: Prettier is an opinionated code formatter that enforces a consistent style across your codebase. The Prettier extension lets you easily configure your editor to format code automatically on save. To install it, search for Prettier - Code formatter in the Extensions tab of VS Code.

• npm Intellisense: npm Intellisense is a plugin that offers autocomplete suggestions for npm modules in import statements. It automatically handles imports for npm packages, helping you reduce keystrokes and save time. To install it, search for npm Intellisense in the Extensions tab in VS Code.

• Simple React Snippets: Simple React Snippets is a handy extension that provides a collection of predefined React code snippets and commands designed to speed up your development workflow. With this extension, you can quickly generate commonly used React boilerplate code. To install it, search for “Simple React Snippets” in the Extensions tab in VS Code.

• Import Cost: Import Cost is another excellent VS Code extension that displays the size of imported packages directly in the editor. It uses Webpack to detect the size of each import, helping you stay aware of the impact your dependencies have on bundle size. To install the extension, open the Extensions tab in VS Code and search for “Import Cost.”

Click on Code in the top-left corner, then select Settings and click on Extensions. Alternatively, you can press ⇧+⌘+X on Mac, or Ctrl+Shift+X in Windows, to open the VS Code Extensions Marketplace installer panel:

VS Code offers a vast extension marketplace with a wide range of tools tailored for React developers.

VS Code AI Extensions for Web Development

As generative AI continues to transform the software development landscape, the Visual Studio Code Marketplace now features more than 400 AI-powered extensions.

Here are some of my top five to speed up your web development project:

Github Copilot: GitHub Copilot is one of my favorites out of all these extensions. It is an AI peer programming tool that helps you write code faster and more intelligently. It seamlessly adapts to your unique needs—letting you choose the best model for your project, customize chat responses with specific instructions and use agents for smooth, AI-driven pair programming sessions. When you install it in Visual Studio Code, it includes two extensions: GitHub Copilot and GitHub Copilot Chat.

Intellicode: IntelliCode enhances the standard code-completion features of IntelliSense by going beyond just analyzing your project’s context. Instead, it leverages insights from thousands of open-source GitHub repositories to surface the most relevant and commonly used code suggestions at the top of the list. You’ll need Visual Studio Code October 2018 Release 1.29.1 or later to use this extension.

Windsurf Plugin(formerly Codeium): Windsurf is a free AI-powered code acceleration toolkit. It is a modern coding superpower built on cutting-edge AI technology. It provides functionalities like autocomplete, chat and search capabilities in 70+ languages, with lightning-fast speed and state-of-the-art suggestion quality. Search for Windsurf Plugin in the extension tab in the VS code to install it.

Tabnine: Similar to Windsurf, Tabnine offers best-in-class AI code completion and AI-powered chat that increases productivity and accelerates the entire software development lifecycle. Search for Tabnine in the extension tab in the VS Code to install it.

Qodo Gen: Qodo Gen is a quality-first generative AI-powered coding agent platform that helps you write, understand, test and review code with your team. With Qodo Gen, you can easily streamline your development workflow straight from the IDE, generate test suites and documentation, improve code quality and much more. Search for Qodo Gen in the extension tab in the VS code to install it.

Conclusion

Vite offers a faster, leaner and more modern alternative to Create React App, giving developers the freedom to build React projects without the constraints of an opinionated framework. Combined with Visual Studio Code and its rich ecosystem of extensions, including AI-powered coding assistants like GitHub Copilot, your development setup can be both powerful and flexible.

Happy coding!

Remember, if you are a Progress KendoReact user, it comes with a native AI Coding Assistant so you use AI trained on the docs!