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:
- Installing Node.js and npm
- Creating a new React application
- Running the development server
- Building the application for production
- 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 applicationstatic/
: 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.