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にアクセスすると下記の画面が表示されます。
-
前の記事
Windows Server2012 R2 プリンタスプール削除方法 2019.11.13
-
次の記事
Laravel6でvue.jsを利用する 2019.11.14
コメントを書く