How to Install and Set Up React JS v19 with Node.js, Bun, and Vite

Welcome to Thapa Technical's official React v19 series! In this blog, we will guide you through the installation and setup process for React JS v19 using VSCode, Node.js, and Bun package manager. We'll also show you how to create your first "Hello World" program in React and upgrade from React v18 to the v19 Release Candidate (RC). At the end, you'll find the source code and the presentation slides. Let's get started!

Step 1: Installing Node.js

Node.js is essential for running React applications. Follow these steps to install Node.js:

1. Visit the Node.js official website.
2. Download the LTS version suitable for your operating system.
3. Run the installer and follow the prompts to complete the installation.

Step 2: Setting Up Visual Studio Code (VSCode)

VSCode is a powerful and popular code editor for web development. Here's how to set it up:

1. Go to the VSCode official website.
2. Download and install the latest version for your OS.
3. Open VSCode and install the necessary extensions for React development (e.g., ESLint, Prettier).

Step 3: Installing Bun Package Manager

Bun is a fast and modern package manager for JavaScript. Here's how to install it:

1. Open your terminal or command prompt.
2. Run the following command to install Bun:

npm install -g bun (make sure to add -g flag)

If it's not working then 👇 

curl -fsSL https://bun.sh/install | bash

3. Follow the on-screen instructions to complete the installation.

Step 4: Creating a React App with Vite

Vite is a build tool that provides a fast and efficient way to set up a React project. Follow these steps to create your first React app:

1. Open your terminal or command prompt.
2. Run the following commands to create a new React project using Vite:

bun create vite@latest reactthapaapp --template react
cd my-react-app
bun install

3. Start the development server:

bun run dev

Step 5: Writing Your First "Hello World" Program

Now that your React app is set up, let's write a simple "Hello World" program:

1. Open src/App.jsx in VSCode.
2. Replace the default code with the following:

import React from 'react';

function App() {
  return (
    

      
Hello World
    
  );
}

export default App;

3. Save the file and see the changes live in your browser.

Step 6: Upgrading to React v19 RC

If you're using React v18 and want to upgrade to React v19 Release Candidate, follow these steps:

1. Open your terminal or command prompt.
2. Run the following command to update React:

bun install react@rc react-dom@rc

Conclusion

Congratulations! You've successfully installed and set up React JS v19 using VSCode, Node.js, Bun, and Vite. You've also created your first "Hello World" program and learned how to upgrade to React v19 RC.

Source Code and Presentation

You can find the source code and the presentation slides for this tutorial here.

Thank you for following along! Stay tuned for more tutorials in our official React v19 series by Thapa Technical.