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).
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.
Why should we choose React, and what are its advantages?
There are certainly many other nice features about using React.
You can read more about Nodejs here.
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.
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.
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!
Your email address will not be published. Required fields are marked *
Full stack developer roles are among the hottest c... Read More