"How to install Reactjs on Ubuntu" is a common question among developers. As someone who has built many web apps using ReactJS 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, ReactJS 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 ReactJS development environment on Ubuntu. Whether you are new to ReactJS or an experienced developer looking to switch to Ubuntu, this tutorial will teach you how to install ReactJS and launch your first React app in simple, step-by-step fashion. By the end, you will have the essential ReactJS 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 js on 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 ReactJS?
For those still unfamiliar, ReactJS 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
This blog assumes that you are using Ubuntu 16 or above versions and you have all the privileges to install the software in the machine, and also have access to the required websites mentioned in the blog.
System Requirements:
- Ubuntu 16 or above
- Minimum 4GB RAM
- Visual Studio Code installed.
Why should we choose React, and what are 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.
Install Node.js
There are many ways to install Node.js in an Ubuntu machine.
- Install Node.js from the Ubuntu repository
- 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.
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
- Set the NodeSource PPA: Run below command on terminal
Command: curl -sL https://deb.nodesource.com/setup_current.x | sudo -E bash –
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
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)
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
- Now Run create-react-app on terminal to setup a React-app.
Command: create-react-app hello-world
- 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.
- 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.
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.
- Readme.md: This is a markdown file where you specify the things which you want to show when someone visits your project on GitHub.
Now let's run our 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
This opens the app in your favourite browser as shown below:
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.
Now look at the browser where the app is running. It looks like the one in the image below.
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.
What you have learnt:
- What is React and why it should be used
- What is Node.js, and how it should be installed on Ubuntu.
- What is npm
- What is create-react-app
- How to setup React-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!
How to Test if ReactJS Installation is Properly Done?
Here are some ways to verify if your ReactJS 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!
How to Use ReactJS?
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 ReactJS apps after getting set up correctly:
- Outline possible UI components in the app like Header, Footer etc as individual building blocks
- Break down mocked designs into these reusable components with own logic & state
- Create components inside src/components/ folder like:
import React from 'React';
function Header() {
return <h1>My Website</h1>;
} export default Header;
Import and render components inside App.js file:
import Header from './components/Header';
function App() {
return (
<div>
<Header />
</div>
);
}
export default App; Add styles, interactions and effects gradually to the components
Compose complex UIs by combining multiple simpler components together
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. Their Knowledgehut React js syllabus covers key topics like JSX syntax, React components and props, hooks, routing and more.
Conclusion
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 guide aims to provide a smooth pathway for getting started with React on Ubuntu.
