Read it in 7 Mins
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:
Why should we choose React, and what are its advantages?
There are certainly many other nice features about using React.
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.
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.
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.
There are many ways to install Node.js in an Ubuntu machine.
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.
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:
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.
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
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.
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:
Now let's run our first React app!
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!
What you have learnt:
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!
Enroll Now
Best Ways to Learn React
Effective React Code Splitting: A Practical Guide
Handling React Events - A Detailed Guide
Migrating From jQuery to React? Here’s How!
28 Jul 2022
25 Jul 2022
25 Jul 2022
25 Jul 2022
22 Jul 2022
22 Jul 2022