How to Install ReactJS on Ubuntu 20.04

Prerequisites

You must have a running Ubuntu 20.04 system with console access.

Step 1 – Install Node.js

Node.js is required to create and run a React.js application. The following steps will install Node.js 14 on your Ubuntu system.

  1. Add the Node.js 14 (current stable version) PPA to your Ubuntu system
curl -fsSL https://deb.nodesource.com/setup_17.x | sudo -E bash -
Code language: JavaScript (javascript)

2. Next, run the following command to install the Node.js to your system:

sudo apt-get install -y nodejs
Code language: JavaScript (javascript)

3. Finally, check the current active version of Node.js

node -v v14.15.3
Code language: CSS (css)

4. Also install Yarn package manager on your system.

npm install -g yarn

Step 2 – Create A New React Application

yarn create react-app myreactapp npx create-react-app myreactapp

On successful application creation, you will see a long result on screen. At the end, you will find the result like below with some useful commands.

Create React.js application Command line

Step 3 – Start React Application

cd myreactapp yarn start

Output:

Compiled successfully!
You can now view myreactapp in the browser.
  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.2:3000
Note that the development build is not optimized.
To create a production build, use yarn build.

Step 4 – Create React.js Production Build

yarn build
Compiled successfully.
File sizes after gzip:
  41.33 KB  build/static/js/2.a2554dc2.chunk.js
  1.62 KB   build/static/js/3.8ba9fa8a.chunk.js
  1.16 KB   build/static/js/runtime-main.f04ac2bc.js
  591 B     build/static/js/main.3ee865b4.chunk.js
  531 B     build/static/css/main.8c8b27cf.chunk.css
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
  yarn global add serve
  serve -s build
Find out more about deployment here:
  https://cra.link/deployment

No Comments

Send Comment Edit Comment


|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
Previous
Next