For enquiries call:



HomeBlogWeb DevelopmentHow to Install and Setup React JS on Ubuntu?

How to Install and Setup React JS on Ubuntu?

09th May, 2024
view count loader
Read it in
7 Mins
In this article
    How to Install and Setup React JS on Ubuntu?

    "How to install React.js on Ubuntu" is a common question among developers. As someone who has built many web apps using React JS over the years, I can say that it has become my go-to JavaScript library for crafting immersive user interfaces. While it does have a learning curve, React JS makes creating interactive front-end experiences incredibly enjoyable once you get the hang of it.

    In this article, I will guide you through the process of setting up a React JS development environment on Ubuntu. Whether you are new to React.js or an experienced developer looking to switch to Ubuntu, this tutorial will teach you how to install React JS in Ubuntu and launch your first React app in simple, step-by-step fashion. By the end, you will have the essential React JS toolchain installed on Ubuntu and the knowledge to start building excellent React-powered apps right away.

    Listen up, because I'm going to walk you through how to install React in Ubuntu step-by-step. First things first, you'll need to update your package manager. Then we'll install some dependencies like Node.js and npm. Once those packages are in place, we can use npm to install React globally. Make sure you pay attention, as these are the key steps to getting React up and running on an Ubuntu system.

    What is React JS?

    For those still unfamiliar, React JS is an open-source JS library created by Facebook’s web engineers for building fast, dynamic user interfaces. Instead of one monolithic interface, React breaks down the UI into individual reusable pieces called components. This modular component architecture makes it efficient to build complex UIs that can handle lots of changes.

    I personally love working with React because the mental model of UI as a component tree just clicks with how I think about the front-end. And seeing your changes render live as you code is intoxicating - it makes building UIs almost fun! While it’s not a framework but a library, React integrates nicely with other tools and has a vast community behind it.

    With its growing community, ecosystem of tools and ability to integrate with other frameworks cleanly, ReactJS has emerged as an ideal choice for building complex web apps today. Exploring React.js becomes systematic with a well-structured Reactjs syllabus, guiding learners through key concepts, such as component-based architecture, state management, and JSX syntax, to build a strong foundation in modern web development. 

    Hope this gives you a peek into why React is so darn popular nowadays! Now let me show you how I got it running smoothly on my own Ubuntu dev environment.

    Prerequisites to Install React.js in Ubuntu

    Before starting with installing React JS on your Ubuntu system, ensure that you have the following prerequisites setup:

    • Ubuntu 18.04 or 20.04 LTS - Recent long term support versions work best for React JS development on Ubuntu.
    • Text editor like Visual Studio Code or Sublime Text for coding React apps.
    • Node.js runtime environment (version >= 8.10) which allows us to run JavaScript on the server.
    • NPM package manager which comes bundled with Node.js installation.
    • A terminal like Bash or Zsh shell to run install commands.

    That's about it! These basic requirements are fairly simple to install on Ubuntu. As long as you have an updated Ubuntu version and Node.js with npm, you are good to go to answer how to install React.js in Ubuntu.

    Hardware and Software Requirements

    No special hardware is required for React.js itself since it is just a JavaScript library. However, some additional RAM and multi-core processors can help with running extensive apps.

    For software, make sure your Ubuntu OS is updated fully. Also have the latest or LTS version of Node.js. An updated web browser like Chrome or Firefox is required to run ReactJS apps. Text editors like VS Code and terminal are necessities.

    If you don’t have node.js or npm installed, don’t worry I will make sure they are installed on the system in the steps.

    How to Install React JS on Ubuntu? [Step-by-Step]

    Let's explore into the detailed step-by-step process of installing a React.js on Ubuntu, ensuring a smooth setup and seamless development environment.

    Step 1: Installing NPM package manager in Ubuntu

    Since React apps are built primarily with Node.js based JavaScript runtime, we need to install the NPM package manager first.

    Open new Ubuntu terminal window and type:

    sudo apt update

    This will fetch the latest package lists from repositories.

    Now install Node.js environment and NPM tool using apt command:

    sudo apt install nodejs npm

    Supply your system password when prompted

    Verify successful install with:

    node -v
    npm -v

    This should display installed versions

    Installing NPM package manager in Ubuntu

    With NPM added to our Ubuntu system, we can proceed with installing essential ReactJS development tools.

    Step 2: Installing create-React-app Utility

    The create-React-app command line utility allows us to generate React project scaffolds quickly without complex manual configurations. This official tool from Facebook makes starting new apps easier.

    Install it using NPM as a global module with:

    sudo npm install -g create-React-app

    This adds the create-React-app command to your system PATH. Verify it was registered properly with:

    create-React-app --version

    Installing create-React-app Utility
    Step 3: Create & Launch Your First React Application

    Now we will use create-React-app to generate our first React project easily:

    create-React-app my-first-React-app

    This scaffolds a new React app in a folder called “my-first-React-app” inside the current directory.

    Create & Launch Your First React Application

    Navigate into this newly created app folder:

    cd my-first-React-app

    And launch start script to run the app locally:

    npm start

    Launch start script to run the app locally

    This should automatically open your default browser with the starter React app loaded!

    Starter React app loaded

    How to Test If React JS Installation in Ubuntu is Properly Done?

    Here are some ways to verify if your React JS environment was set up correctly in Ubuntu:  

    • Check if the create-React-app command displays a version without errors. 
    • Generate a sample app using create-React-app and test if it launches without issues. 
    • Modify source files and check if changes reflect live during npm start. 
    • Create React components in src/ folders and test rendering correctly. 
    • As long as scaffolding new apps, launching dev server, building and basic component rendering all work - your React app is ready to roll!

    Methods to Install Node.js in Ubuntu

    There are many ways to install Node.js in an Ubuntu machine.

    1. Install Node.js from the Ubuntu repository
    2. Install Using a PPA (personal package archive)

    Using the first method we will not get the latest version of Node.js installed so we will choose the second method where we will get the latest version of Node.js installed.

    1. Installing Using a PPA (personal package archive)

    To get the latest version of Node.js installed on ubuntu, add a PPA (personal package archive). It is maintained by NodeSource.

    Open terminal and run below commands:

    • Install curl: Run below command on terminal
      Command: sudo apt-get install curl

    Install And Setup React App on Ubuntu

    • Set the NodeSource PPA: Run below command on terminal
      Command: curl -sL | sudo -E bash –

    Install And Setup React App on Ubuntu

    The PPA will be added to your configuration and your local package cache will be updated automatically.

    You can read more about available versions of Node.js in nodesource here.

    • Install Node.js: Run the below command on terminal
      Command: sudo apt-get install -y nodejs

    • Check for Node.js Installation: Run below command on terminal
      Command: node -v
      It has to show the version of node installed in this case v15.4.0

    Install And Setup React App on Ubuntu

    Now let's see how we can install and setup React app in Ubuntu machine

    • Using create-react-app (installing create-react-app using npm)
    • Using npx (Recommended in React docs)

    2. Using create-react-app (npm)

    In setting up a React project we come across tools like babel and webpack which are not easy to understand and configure for a person who is new to React and JavaScript. There are several tools that help to sort this problem. One of them is create-react-app. This is the easiest to setup. Create-react-app comes with production grade configurations pre-built. You can alter the configurations by ejecting from the create-react-app as well.

    Follow the below steps to install using npm create-react-app

    • Go into your desired location where you want to start your react app using ‘cd’ command 
    • Run below command to install create-react-app using npm 
      Command: npm install -g create-react-app

    Install And Setup React App on Ubuntu

    • Now Run create-react-app on terminal to setup a React-app. 
      Command: create-react-app hello-world

    Install And Setup React App on Ubuntu

    • This creates a folder with the name hello-world. You can navigate into the folder using ‘cd’ command and look at the project structure.

    This gives the React app which we can use, but React recommends using npx.

    Using npx command:

    npx is the package runner, since npm version 5.2.0 npx is pre-bundled with npm.

    Read more about differences npx and npm here.

    Follow the below steps to setup using npx.

    • Go into your desired location where you want to start your react app using ‘cd’ command
    • Run the below command to setup React app using npx
      Command: npx create-react-app my-app
      That’s it! Your React app is ready with a single command.

    Install And Setup React App on Ubuntu

    • This creates a folder with the name hello-world. You can navigate into the folder using ‘cd’ command.  
    • Now open the project in vs-code

    When you open the project in visual studio code the structure looks like this.

    Install And Setup React App on Ubuntu

    Now let's have a look at the files and folders we have:

    • node_modules: This folder is managed by package manager (npm) and contains all the project library dependencies. We should not edit any file inside this folder.
    • public: This folder contains the assets that should be served publicly without any restrictions and contains files like index.html, favicon, manifest.json
    • src:  This is the folder that contains all the files that are used to create web applications. As a react developer you are likely to spend a lot of time in this folder creating components and other sources of code.
    • .gitignore: This file has all the assets which should be ignored by git while we publish our code to GitHub eg: node_modules
    • package.json: This is a JSON file which has all information about the app such as name, dependencies, scripts we use to run the application etc.
    • This is a markdown file where you specify the things which you want to show when someone visits your project on GitHub.

    How to Run First React App?

    • Open the terminal integrated with Visual studio code or just stay in the ubuntu terminal; either is fine. Let's use the integrated terminal.
    • Run the app using the following command: 
      Command: npm start

    Install And Setup React App on Ubuntu

    This opens the app in your favourite browser as shown below:

    Install And Setup React App on Ubuntu

    Now, let's make our first code changes:

    On navigating to src folder, you will find App.js file, through which the whole app is run inside the browser. Change the code as you see below and save by hitting ctrl+s.

    Install And Setup React App on Ubuntu

    Now look at the browser where the app is running. It looks like the one in the image below.

    Install And Setup React App on Ubuntu

    Congratulations on making your first React app!

    Are you a developer looking to level up your skills? Look no further! Our Python course for developers is here to help you master this powerful language. Join us today and unlock endless possibilities.

    Why Should We Choose React and Its Advantages?

    • React is built on JavaScript which makes it easier to learn and easier to use.
    • React is component based which means we can write re-usable components. Start with small things, which you use to build bigger things, which you use to build apps.
    • React is lightweight compared to Angular; which in turn makes your application faster to load—which is very important from the user’s point of view.
    • React ensures faster rendering of DOM (document object model), this has been achieved by the introduction of Virtual DOM-currently, one of the benefits of using React for heavy loaded and dynamic software solutions.
    • React has a helpful and interactive developer toolset which makes it easy to debug. React Developer Tools is a browser extension available for both Chrome and Firefox. It enables developers to observe reactive component hierarchies, discover child and parent components, and inspect their current state and props.  
    • React uses JSX(JavaScript XML) which has HTML-like syntax, making it easy to code and understand.
    • React has strong community support on Github, Stackoverflow and many other platforms.
    • React is SEO friendly.

    There are certainly many other nice features about using React.

    What is Node.js?

    Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js is an Open Source Server Environment that is free and runs on almost all Operating Systems (Windows, Linux, Unix, Mac OS X, etc.).

    You can read more about Nodejs here!

    Why Do We Need Nodejs for React Apps?

    Node.js lets developers use JavaScript to develop variety of applications like network applications, command line tools, web APIs, mobile applications, web applications etc.

    React usually runs on Node Server in development, but we can make use of other Servers likes Apache or Nginix to run React App in production. You do not need NodeJS to run React in production.

    What is NPM, Why Do We Need NPM for React Apps?

    NPM (Node Package Manager) is a dependency management tool for JavaScript applications. It is Open Source and also has command line utility for interacting with the application that aids in package installation, version management, and dependency management.

    React does not ship with all the features by itself, so it uses external packages to add the required features to the React application. These packages are maintained by NPM (Node package manager) which is shipped with Nodejs in development.

    You can read more about npm here. We can use yarn instead of NPM during development and production for React apps.

    How to Use React.js?

    Pay attention now - I recommend you enrol in a online Web Development certificate program. These courses allow you to gain direct training in areas like JavaScript and online web development certificate holders can demonstrate up-to-date skills to potential employers after finishing web projects. Here are some tips to start coding React.js apps after getting set up correctly: 

    1. Outline possible UI components in the app like Header, Footer etc as individual building blocks
    2. Break down mocked designs into these reusable components with own logic & state
    3. Create components inside src/components/ folder like:
    import React from 'React';
    function Header() { 
      return <h1>My Website</h1>;  

    export default Header; 

    1. Import and render components inside App.js file:

    import Header from './components/Header'; 
    function App() { 
      return ( 
          <Header /> 
    export default App; 
    1. Add styles, interactions and effects gradually to the components

    1. Compose complex UIs by combining multiple simpler components together 

    1. Maintain unidirectional data flow between components with props and callbacks 

    The key is to effectively fragment the UI into stand-alone components that can act as flexible building blocks for crafting intricate interfaces. I recently learned about KnowledgeHut's React js course. The KnowledgeHut React.js syllabus covers key topics like JSX syntax, React components and props, hooks, routing and more.  

    What you have learnt:

    • What is React and why it should be used?
    • What is Node.js, and how to install react app in ubuntu.
    • What is npm?
    • What is create-react-app?
    • How to setup React.js app on Ubuntu?
    • How to run the React app?
    • How to make code changes to create your first React application.

    React has rapid changes for every new version. It is important to keep yourself updated with the latest releases of React, so that you can make your life as a React developer easier!


    In this detailed guide on installing React.js on Ubuntu, I shared my recent experience transitioning to my Linux machine. We began by setting up Node.js and npm dependencies, then quickly scaffolded and launched our first React project using create-React-app. I demonstrated how to structure UIs with reusable components, simplifying complex interfaces. As you dive deeper, remember to explore tools like React Router and Redux for routing and state management. React's vibrant community and features like Hot Reloading make development enjoyable and efficient. Don't hesitate to start experimenting with React for your next project, regardless of scale or complexity. This how to install react on ubuntu guide aims to provide a smooth pathway for getting started with React on Ubuntu. 

    Frequently Asked Questions (FAQs)

    1What is the recommended way to create a new React app on Ubuntu?
    • Install Node.js and npm, which provides access to create-React-app.
    • Use npm to install create-React-app globally: npm install -g create-React-app.
    • Create a new app by running: create-React-app my-app.
    • This generates a fresh React project setup with build scripts, configs, and boilerplate code to start coding immediately!
    2What is the command to build a React app for production on Ubuntu?

    First, navigate into your React project directory that contains the package.json.

    Then execute the dedicated production build command:

    npm run build 

    This bundles all assets optimised for production into a /build folder that can be deployed to any web server. 

    3How do I update Node.js and npm on Ubuntu for my React project?

    Here are the steps to update Node.js and npm on Ubuntu for a React project:

    First clear the apt repository cache with:

    sudo apt update 

    Now install the latest Node.js version with:

    sudo apt install nodejs 
    sudo apt install npm

    Verify the installed versions are updated with:

    node -v
    npm -v

    In your React project folder, update project-specific npm modules:

    npm update

    Rebuild your React app to compile it using the updated Node.js environment:

    npm run build 

    And that's it! Both the system-level Node and project-specific modules are updated to the latest for your React app. Always keep them recent for best build compatibility. 


    Bala Krishna Ragala

    Blog Author

    Bala Krishna Ragala, Head of Engineering at upGrad, is a seasoned writer and captivating storyteller. With a background in EdTech, E-commerce, and LXP, he excels in building B2C and B2B products at scale. With over 15 years of experience in the industry, Bala has held key roles as CTO/Co-Founder at O2Labs and Head of Business (Web Technologies) at Zeolearn LLC. His passion for learning, sharing, and teaching is evident through his extensive training and mentoring endeavors, where he has delivered over 80 online and 50+ onsite trainings. Bala's strengths as a trainer lie in his extensive knowledge of software applications, excellent communication skills, and engaging presentation style.

    Share This Article
    Ready to Master the Skills that Drive Your Career?

    Avail your free 1:1 mentorship session.

    Your Message (Optional)

    Upcoming Web Development Batches & Dates

    NameDateFeeKnow more
    Course advisor icon
    Course Advisor
    Whatsapp/Chat icon