How to set up a React application development environment

Introduction

This tutorial demonstrates how simple and quick it is to set up the React application development environment using the Vite build tool. Let’s get started.

Pre-requisite:

• Basic knowledge of Javascript, and React
• Proficient in the use of any modern code editors i.e. VS Code
• A computer system with Node.js runtime engine installed.

Step #1: Install Node.js (Optional)

• Download and install Node.js from the official website: official website: . Note: Vite requires Node.js version 18+.

• To confirm that Node.js is installed, open the terminal in Mac or command prompt in Windows, and run the command below:

   node -v

• If it displays the version number, Node.js is installed successfully, else try reinstalling it again.

Step #2: Create a new React project with Vite

• In the terminal, locate a folder or directory location where you intend to create the React project, then run the command below to create a new project directory called "hello-world-react-app" :

npm create vite@latest hello-world-react-app -- --template react

• The above command will scaffold a new React application project in a folder named "hello-world-react-app " with the default configurations.

Step #3: Edit the App.jsx file

• Open the "hello-world-react-app" folder in any code editor of your choice i.e. VS code
• Locate the "src" folder and open the "App.jsx" file. Replace the existing code in the file with the code snippet below:

import React from 'react';

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

export default App;

Step #3: Start the development environment server

• Go back to the terminal or open the terminal tab in VS code using the menu - Terminal > New Terminal, then run the command below to start the development server:

npm run dev

• This will start the server and launch the web page in the default browser. You should see the "Hello World React App" displayed in the browser using the Vite build tool. You can add more texts and go to the browser to see the chance.

Conclusion

That's it! This completes the steps for stepping up a development environment for a new React application project.

Additional Resource

Scaffolding Your First Vite Project for details