React is a JavaScript library for building user interfaces. It is opensource and maintained by Facebook.
You can read more about React here.
In this blog we are going to learn how to install and setup a React App on Ubuntu (version 16 and above). Moreover, also read about Install Jenkins on Ubuntu and usereducer.
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!
