React is getting popular nowadays. Ubuntu, an open-source operating system based on Linux is also getting a lot of attention. It will be greater to work on React with the support of the Ubuntu operating system. Here, we will see the steps to install React on Ubuntu 20.04.
React 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.
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.
Prerequisites
I am assuming that the reader has a basic knowledge of Unix/Linux commands. Otherwise please refer to the article Basic Linux Commands for Beginners.
What we will learn?
Here in this article, we will learn the following things.
- Install Node.js on anUbuntu system
- Updating NPM
- Creating a new React project
- Running the React application
Install and Setup a React App on Ubuntu
Let us start with the installation of dependencies and tools to work with React on Ubuntu. After that, we will install the create-react-app tool for creating a new react project.
Note that, we are executing all the commands in the Terminal of our Ubuntu system
Install Nodejs
So we are going to set up 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. 16.x is the current stable version of Node which is recommended for most users. Installation of Node.js 16.x can be done using the below command.
So open the Terminal on our system and paste the below command.
curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash - sudo apt-get install -y nodejs
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 applications 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 npm@latest -g
Creating a New React Project
After the successful installation of Nodejs and NPM, we can create our first React application using the create-react-app tool. The below command will temporarily install the create-react-app tool on our system and create a new react project.
npx create-react-app awesome-project
Here, awesome-project is the name I have chosen for my React project.
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 command.
cd awesome-project npm start
It starts the React application on port 3000 and opens a new tab on our browser with the address below.
http://localhost:3000
Note:- If port 3000 is busy with another process, the app will start in port 3001 or any other port available.
Summary
So, in this article, we have discussed the steps for the installation of React.js on an Ubuntu system. These steps are verified by our team and 100% working.
Thanks! very clear and helpful 🙂
Really helpful artical, Thanks.
it really helped thanks.
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! awesome-project@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the awesome-project@0.1.0 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:
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.
Very helpful
Thanks, It’s very helpful.
can not Creating a New React Project using flowing command I got err! massage,
“dinushi@dinushi:~$ 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
“
First give write access to node_modules directory with the command below.
sudo chown -R $USER /usr/local/lib/node_modulesNow install create-react-app globally using npm.
npm install -g create-react-apppeople who got access denied from 1st command can use 2nd one if NPM 5.2 or later versions-
npx create-react-app awesome-project
Thank You worked for me!
Thanks, Nice explanation
bEST TUTORIAL ON THE WEB.
THANKS.
I AM A USER FROM UGANDA.