How to install React on Ubuntu 20.04

React is a JavaScript library for building fast, interactive user interfaces. It was created at Facebook (now Meta) in 2011, open-sourced in 2013, and has grown into one of the most popular libraries for building web apps (and, with React Native, mobile apps).

Note: Earlier versions of this guide used Create React App, which the React team has since deprecated. This guide now uses Vite, a fast and widely used build tool for new React projects.

Prerequisites

Before we create a React app, you'll need a few things:

• A server running Ubuntu 20.04 or newer. I'm using a dedicated server from Spin Servers.
• About 10 minutes and a cup of coffee or hot tea. I prefer vanilla chai with a dash of whole or almond milk, depending on my mood that day.

Step 1: Install Node.js and npm

React projects are built with npm (Node package manager), a command-line tool and registry that hosts thousands of JavaScript packages. npm comes with Node.js.

Vite needs a current version of Node.js (20 or newer). The version in Ubuntu 20.04's default repository is too old, so install a current LTS release from NodeSource instead. Our guide on how to install Node.js on Ubuntu 20.04 covers this in more detail.

curl -fsSL https://deb.nodesource.com/setup_lts.x -o nodesource_setup.sh
sudo -E bash nodesource_setup.sh
sudo apt install nodejs

Bam! That was easy. Now check the versions of Node.js and npm:

node --version
npm --version

Step 2: Create a React application

Now for the fun stuff! Let's create your first React app. The process is simple, and you can have an application up and running in a matter of minutes.

To create the app, run the following command, replacing my-app with whatever name you like. Go ahead, go crazy.

npm create vite@latest my-app -- --template react

If npm asks to install the create-vite package, type y and press Enter.

Then move into your new app's directory and install its dependencies:

cd my-app
npm install

This downloads all the necessary packages and tools, which may take a minute or two.

Step 3: Run your new application

Your fancy new app is ready, so let's run it. Since the app is on a remote server, start the development server with the --host option so you can reach it from your own browser:

npm run dev -- --host

You should see output showing the addresses and port number (5173 by default) where you can view your application. If you use UFW, allow the port first:

sudo ufw allow 5173

Open your web browser and go to:

http://your-server-ip:5173

You should be greeted by the default Vite + React page. Congratulations! You've just created your first React app, and now you can develop to your heart's desire. Press Ctrl + C in the terminal to stop the development server.

The development server is meant for building and testing. When your app is ready for production, run npm run build and serve the generated dist folder with a web server such as Nginx.

The server behind this guide

Speaking of your heart's desire: to make these how-to guides possible, I use a dedicated server from Spin Servers. My configuration is:

• Dual Intel Xeon E5-2630L (12 cores at 2.00 GHz)
• 128 GB DDR3 RAM
• 4 × 2 TB HDD in hardware RAID-10
• 10 TB bandwidth on a 10Gbps port
• Dallas, TX location

I get this configuration for $89/month with the code DUALE5FOR89, from the Spin Servers promotion on Web Hosting Talk.

If you have questions about any of our services, please contact us via email at [email protected] or by using our live chat at spinservers.com.

Spin Servers is a US-based provider of dedicated servers & affordable private cloud solutions. Our motto is to let you "spin up servers" fast, seamlessly, and affordably.