CentOs8にReact.jsをインストールしてHello Worldまでしてみる

CentOs8にReact.jsをインストールしてHello Worldまでしてみる

Reactの導入からHello Worldまでの手順

環境

  • OS  CentOS Linux release 8.0.1905 (Core)
  • node V10.16.3
  • npm 6.9.0

※centos8にnodeのインストール手順はこちら

React.jsとは

React.jsは、Facebookにより開発されたJavaScriptのビュー・ライブラリです。

create-react-appのインストール

testuserというユーザーで実行してます

## インストール
sudo npm install -g create-react-app

プロジェクト作成

test-projectという名前でプロジェクトを作成します

## プロジェクト作成
create-react-app test-project

Firewall設定

外部からアクセスできるようにfirewallを設定します

## 3000番ポートを恒久的に許可
sudo firewall-cmd --add-port=3000/tcp --zone=public --permanent

## 再起動
sudo firewall-cmd --reload

実行

とりあえず、実行してみます

## 移動
cd test-project

## 実行
npm start

<出力結果>
Compiled successfully!

You can now view test-project in the browser.

Compiled successfully!

You can now view test-project in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://プライベートIP:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

ブラウザよりhttp://プライベートIP:3000にアクセスすると下記の画面が表示されます。

src/App.jsのコード編集

test-project/src/App.jsを編集してhello worldを出力する

## 編集
vi src/App.js

<編集>

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Hello World!
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Editt src/App.js and save to reload.

Hello World!
に変更しただけ

ブラウザよりhttp://プライベートIP:3000にアクセスすると下記の画面が表示されます。