Image is loading...

How to Install and Setup a React App on Ubuntu 18.04.1

React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base for the development of single-page or mobile applications.

It is a powerful library to deal with complex projects in an easy manner. React Native, one of the most lovable hybrid mobile application development frameworks is also based on React.

We can design interactive and beautiful User Interfaces(UIs) using React.js in record time. A React app can be divided into components. A component is simply the independent and reusable code block which contains its functions and view. A component’s data is stored in its state and the data from one component is passed to another component using props. React updates the right components when its data changes.

We know that it’s impossible to explain all about React in a single paragraph. So I have already made an article which explains the complete features and benefits of React. I am sure that the article can help you a lot.

So I am not explaining a lot about React because I know that you need a quick guide for the installation of React.js on your Ubuntu system.

Here I am going to explain the installation and set up of a React App on the Ubuntu platform.

Installation Steps

1. Install Nodejs

So we are going to setup React.js on our Ubuntu system. But it requires a server to run. The solution is Node.js. Node.js is an open-source server environment that uses JavaScript on the server.

This JavaScript runtime is built on top of Chrome’s V8 JavaScript engine, which is Google’s open-source high-performance JavaScript and WebAssembly engine.

So we need to install Node.js on our system first. 12.x is the current stable version of Node which is recommended for most users. Installation of Node.js 12.x can be done using the below command.

So open our Terminal and paste the below command.

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install -y nodejs

2. Update NPM(optional)

Node Package Manager or simply NPM is the package manager tool for Node.js. Many professionals and organizations use this to share the packages they have developed.

create-react-app, a tool for creating React application is shared under NPM. So we need the NPM tool to access it. We may also require it to install and use an NPM package required for our project.

All NPM packages used in our React application, are defined in a file, package.json.

Normally, NPM will be installed with the Nodejs itself. However, we can update it to the latest version using the below command.

sudo npm install [email protected] -g

3. Install Create-React-App Tool

So we have set up both Node.js and NPM in our system. Now we need can globally install the create-react-app tool using NPM. This tool is used to create a new project in React. It works on macOS, Windows and Linux operating systems.

So install create-react-app on our system using NPM as global using the below command.

npm install -g create-react-app

4. Creating a New React Project

After the successful installation of create-react-app, we can create our first React application using it.

create-react-app awesome-project

Here awesome-project is the name I have chosen for my React project.

An alternative method

So on step 3, I have explained the procedures to install create-react-app tool and using it, we can create a new React application which I have explained in step 4.

But we have an alternative option using NPX. We know that NPM is a Node.js package manager. But with NPM 5.2 or later versions, we get an additional tool called NPX, which is an NPM package runner. Simply we can say that NPM manages all the Node.js packages and NPX executes the Node.js packages.

So if we are going with this alternative method, we can skip steps 3 and 4 and simply create a new React application using a single command which I have given below.

npx create-react-app awesome-project

Here NPX will temporarily installs create-react-app tool and create a new react project named awesome-project.

5. Running the Application

After the successful creation of our React application, we can run it locally from our system.

Enter the project directory and execute npm start.

cd awesome-project
npm start

This will opens up the react application we have created in a new tab of our browser with the below URL.

http://localhost:3000

Note:- If the port 3000 is busy with another process, the app will open up in port 3001 or any other port available.

Have a nice code!

You Might Also Like
10 Comments
  • Dinushi Dhananjnai
    says:

    can not Creating a New React Project using flowing command I got err! massage,
    [email protected]:~$ npm install -g create-react-app
    npm WARN checkPermissions Missing write access to /usr/lib/node_modules
    npm ERR! code EACCES
    npm ERR! syscall access
    npm ERR! path /usr/lib/node_modules
    npm ERR! errno -13
    npm ERR! Error: EACCES: permission denied, access ‘/usr/lib/node_modules’
    npm ERR! [Error: EACCES: permission denied, access ‘/usr/lib/node_modules’] {
    npm ERR! stack: “Error: EACCES: permission denied, access ‘/usr/lib/node_modules'”,
    npm ERR! errno: -13,
    npm ERR! code: ‘EACCES’,
    npm ERR! syscall: ‘access’,
    npm ERR! path: ‘/usr/lib/node_modules’
    npm ERR! }
    npm ERR!
    npm ERR! The operation was rejected by your operating system.
    npm ERR! It is likely you do not have the permissions to access this file as the current user
    npm ERR!
    npm ERR! If you believe this might be a permissions issue, please double-check the
    npm ERR! permissions of the file and its containing directories, or try running
    npm ERR! the command again as root/Administrator.

    npm ERR! A complete log of this run can be found in:
    npm ERR! /home/dinushi/.npm/_logs/2019-11-01T16_38_58_347Z-debug.log

    • Syamlal CM
      says:

      First give write access to node_modules directory with the command below.

      sudo chown -R $USER /usr/local/lib/node_modules

      Now install create-react-app globally using npm.

      npm install -g create-react-app

  • roja
    says:

    There might be a problem with the project dependency tree.
    It is likely not a bug in Create React App, but something you need to fix locally.

    The react-scripts package provided by Create React App requires a dependency:

    “webpack”: “4.29.6”

    Don’t try to install it manually: your package manager does it automatically.
    However, a different version of webpack was detected higher up in the tree:

    /node_modules/webpack (version: 3.10.0)

    Manually installing incompatible versions is known to cause hard-to-debug issues.

    If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
    That will permanently disable this message but you might encounter other issues.

    To fix the dependency tree, try following the steps below in the exact order:

    1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
    2. Delete node_modules in your project folder.
    3. Remove “webpack” from dependencies and/or devDependencies in the package.json file in your project folder.
    4. Run npm install or yarn, depending on the package manager you use.

    In most cases, this should be enough to fix the problem.
    If this has not helped, there are a few other things you can try:

    5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
    This may help because npm has known issues with package hoisting which may get resolved in future versions.

    6. Check if /node_modules/webpack is outside your project directory.
    For example, you might have accidentally installed something in your home folder.

    7. Try running npm ls webpack in your project folder.
    This will tell you which other package (apart from the expected react-scripts) installed webpack.

    If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
    That would permanently disable this preflight check in case you want to proceed anyway.

    P.S. We know this message is long but please read the steps above 🙂 We hope you find them helpful!

    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! [email protected] start: `react-scripts start`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the [email protected] start script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in:

    • Syamlal CM
      says:

      There might be a problem with the project dependency tree.
      It is likely not a bug in Create React App, but something you need to fix locally.

      1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
      2. Delete node_modules in your project folder.
      3. Remove “webpack” from dependencies and/or devDependencies in the package.json file in your project folder.
      4. Run npm install or yarn, depending on the package manager you use.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: