Installing and using React on Linux: A Step-by-Step Guide

React is a popular JavaScript library for building user interfaces, developed and maintained by Facebook. It allows you to create reusable UI components and manage the state of your application in a more efficient and organized manner compared to traditional web development techniques.

In this guide, we will walk through the process of installing React on a Linux system, specifically Ubuntu 20.04/22.04 or CentOS/RHEL 7. We will cover the following steps:

1. Installing Node.js and npm
2. Creating a new React application
3. Running the development server
4. Building the application for production
5. Serving the application with a web server

Before we begin, it’s important to note that React is just a library for building user interfaces, and it is often used in conjunction with other tools and libraries to create a complete web application. For example, you might use React with a backend framework like Express.js or a state management library like Redux.

However, for the purposes of this guide, we will focus on the basics of getting React up and running on your Linux system.

Prerequisites

Before we begin, you will need to have the following installed on your system:

• A terminal emulator (such as Gnome Terminal or Konsole)
• A text editor (such as Sublime Text, Atom, or Visual Studio Code)
• Git (optional, but recommended for managing your application’s code)

You should also have a basic understanding of the Linux command line and be comfortable with commands such as cd, ls, and mkdir.

Installing Node.js and npm

Node.js is a JavaScript runtime environment that allows you to run JavaScript code outside of a web browser. It is required for running React applications, as well as many other modern web development tools.

npm (Node Package Manager) is a package manager for Node.js that allows you to easily install and manage third-party libraries and dependencies.

To install Node.js and npm on Ubuntu 20.04, run the following commands:

$ sudo apt update
$ sudo apt install nodejs npm

On CentOS 7, you can install Node.js and npm using the following commands:

$ sudo yum update
$ sudo yum install nodejs npm

Once the installation is complete, you can verify that Node.js and npm are installed by checking their versions:

$ node --version
v18.19.0
$ npm --version  
10.2.3

Note that the exact versions may vary depending on when you are reading this guide.

Creating a new React application

Now that we have Node.js and npm installed, we can create a new React application using the create-react-app tool. This is a command-line utility that sets up a new React project with a pre-configured build pipeline and development server.

To create a new React application, open your terminal and navigate to the directory where you want to create your project. Then, run the following command:

$ npx create-react-app my-app

Replace my-app with the name of your project.

This command will create a new directory called my-app and set up a basic React application inside it. The application is pre-configured with a development server, a build script, and a basic file structure.

Once the command has finished running, you can navigate into your new project directory:

$ cd my-app

Running the development server

Now that your React application has been created, you can start the development server to see your app in action.

To start the development server, run the following command:

$ npm start

This command will compile your application and start a local development server on http://localhost:3000. It will also automatically open your default web browser to this address.

You should now see a default React page with the text “Edit src/App.js and save to reload.” This is the default React application that is created by create-react-app.

As you make changes to your application’s source files, the development server will automatically detect the changes and reload your application in the browser. This makes it very easy to iterate on your application’s design and functionality during development.

Building the application for production

When you are ready to deploy your React application, you will need to build a production-ready version of your application.

To build your application for production, run the following command:

$ npm run build

This command will compile your application and output a static version of your application in the build directory of your project.

The build directory contains all the files necessary to serve your application on a web server, including:

• index.html: The main HTML file that loads your application
• static/: A directory containing your application’s static assets (such as CSS and JavaScript files)

Serving the application with a web server

Now that you have a production-ready version of your application, you can serve it using a web server.

There are many different web servers you can use to serve your React application, but for the purposes of this guide, we will use the serve package from npm.

To install the serve package, run the following command in your terminal:

$ npm install -g serve

The -g flag installs the package globally, so you can use the serve command from anywhere on your system.

Once the package is installed, you can start the web server by running the following command in the root directory of your project:

$ serve -s build

The -s flag specifies the directory to serve, which in this case is the build directory.

This command will start a web server on http://localhost:5000 by default. You can access your application by navigating to this address in your web browser.

If you want to serve your application on a different port, you can specify the port number using the -l flag:

$ serve -s build -l 8080

This command will start the web server on http://localhost:8080.

Note that this is just a basic web server for serving static files, and it may not be suitable for a production environment. For a more robust solution, you may want to consider using a dedicated web server such as Apache or Nginx.

Conclusion

In this guide, we have covered the basics of installing React on a Linux system using Ubuntu 20.04 or CentOS 7. We have walked through the process of installing Node.js and npm, creating a new React application, running the development server, building the application for production, and serving the application with a web server.

There are many more advanced topics you can explore as you continue to work with React, such as state management, routing, and testing. However, this guide should provide you with a solid foundation to get started with React development on your Linux system.