2

I'm trying to install React JS on Ubuntu, but the instructions in the tutorial are only for Windows. How can I continue?

I've checked some other tutorials on the internet and I find that no two websites suggest the same things in order, also I'm not sure if it's safe to install the stuff third party websites say. I'm totally confused with this setup.

2
15

Assuming you do not have anything installed yet, install nodejs and npm using:

sudo apt-get install nodejs npm

Make a project directory to build your app:

mkdir reactApp
cd reactApp

Initialize your npm project and add all your project lib/dependencies. You can press enter for all of the questions asked during the npm init. Or you can use npm init -y to skip all questions.

npm init OR npm init -y
npm install webpack --save
npm install webpack-dev-server --save
npm install react --save

Alternatively, you can use the library created by the good facebook folks to bootstrap a react project so that you do not have to worry about webpack, babel-core and the rest... Simply run:

npm install -g create-react-app

Then after it has been installed globally, you can now use it to create a project

create-react-app projectname

Keep project name all in lowercase or you will get an error (this just started of recent). When that is done,

cd projectname

and Voila!

npm start or yarn will start up your program at port 3000.

6
  • thanks for the answer, Is webpack necessary for this? – Harsha Apr 5 '17 at 14:42
  • 1
    Thanks, but I used create-react-app for this and it's ready after typing just two commands in the terminal. – Harsha Apr 6 '17 at 5:44
  • 1
    I got a npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules when trying npm install -g create-react-app – lapisdecor May 5 '17 at 16:05
  • @lapisdecor Not sure it’s recommended but you may want add sudo before the command so it can write to /usr/local/lib. – Parag Feb 19 '18 at 19:42
  • What's the difference between the "projectname" and "reactApp" directories? – MikeB Dec 24 '18 at 6:28
2

Create a folder named react

sudo apt install npm

These four commands are optional:

npm install -g babel-cli
npm install babel-preset-es2015 babel-preset-react
npm install -g browserify
npm install -g watchify

After installation run the following commands:

npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

You will get something like this:

Success! Created hello-world at `/your-directory/react/hello-world`

Inside that directory, you can run several commands:

  • Start the development server:

    npm start
    
  • Bundle the app into static files for production:

    npm run build
    
  • Start the test runner:

    npm test
    
  • Remove this tool and copies build dependencies, configuration files and scripts into the app directory (if you do this, you can’t go back!):

    npm run eject
    

We suggest that you begin by typing:

cd hello-world
npm start
1
1

I used create-react-app for this and it's ready after typing just two commands in the terminal. Just use sudo to the commands if it doesn't work initially.

1
  • The problem with doing it that way is version control (of nodejs) and portable deployment. If you use nvm, you can be sure you're not missing anything when you tell someone how to deploy a more complex project. – RobotHumans May 26 '18 at 10:48
-1

To install Node.js:

sudo apt-get install python-software-properties
curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
sudo apt-get install nodejs
node -v 
npm -v 

For installing React we need to install some dependencies too:

npm install -g babel-cli  
npm install babel-preset-es2015 babel-preset-react
npm install -g browserify
npm install -g watchify

Now to install React:

npm install -g create-react-app

To create a project:

  1. Go to DocumentRoot:

  2. Create project by

    create-react-app react-project  
    cd react-project  
    npm start  
    

Successfully done.

0

Not the answer you're looking for? Browse other questions tagged or ask your own question.