React – Visual Studio Code on Ubuntu No.77

I will show you the development of a web site using React in Visual Studio Code on Ubuntu.

▼1. What is React ?

React is JavaScript library developed by Facebook for building user interfaces. the details is written in this document. React – A JavaScript library for building user interfaces (reactjs.org)

▼2. Prerequisites

2-1. Creating React application

https://releases.ubuntu.com/20.04/

2-2. Installing Visual Studio Code

sudo snap install --classic code

https://code.visualstudio.com/docs/setup/linux

2-3. Installing curl

sudo apt install curl

2-4. Installing Node.js and npm

W can install Node.js JavaScript runtime and npm using the following commands.

#Using Ubuntu
curl -fsSL https://deb.nodesource.com/setup_18.x |sudo -E bash -
sudo apt-get install -y nodejs

Ref:distributions/README.md at master · nodesource/distributions (github.com)
Download | Node.js (nodejs.org)

▼3. Deploying Web site

3-1. Creating a React application

We can create a React application under the folder “my-app” and install libraries that are related to this code.

npx create-react-app my-app

3-2. Running a React application and confirming the web site using localhost.

cd my-app
npm start

3-3. Starting Visual Studio Code

code .

3-4.  Updating index.js

Updating index.js to show Hello World! in the web site.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

var element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!');
ReactDOM.render(element, document.getElementById('root'));

reportWebVitals();

3-5.  Refreshing browser

3-6.  Adding homepage parameter into package.json

We need to add “homepage”: “./” into package.json.

xxxx
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "homepage":"./"
}

3-7. Build

npm run build
ls

build  node_modules  package.json  package-lock.json  public  README.md  src

3-8. Deploying the web site in my domain

Copy the build folder which is created by 3-7 build into a web server.

▼4. Reference

• React – A JavaScript library for building user interfaces (reactjs.org)
• React JavaScript Tutorial in Visual Studio Code

That’s all. Have a nice day ahead !!!