[React] #7. クイックリンク

クイックインストール

mkdir express-react
cd express-react
npm install express

以下のように構成されている.

最初のページを作成します。

mkdir public
cd public
touch main.html

サーバの作成

index.jsファイルを作成したら、次のように

を作成します.

const express = require('express');
const app = express();
const path = require("path");

app.use("/", express.static( path.join( __dirname, "public")  ) );

app.get('/', function (req, res) {
    res.sendFile( path.join( __dirname, "public/main.html") );
});
  

大体このような構造です.

サーバの実行後の検証

node index.js

ここまで来れば成功だ

リアクターの取り付けと構築

次のコマンドで反応器を設定します.

npx create-react-app react-project
cd react-project
npm run build

応答バージョンが完了した場合、buildフォルダを表示できます.

リアクターをexpressに接続する

index.jsファイルを変更します.

const express = require('express');
const app = express();
const path = require("path");

app.use("/react", express.static( path.join( __dirname, "react-project/build")  ) );
app.use("/", express.static( path.join( __dirname, "public")  ) );

// /react 로 접속하면 리액트 라우팅 사용 가능
app.get('/react', function (req, res) {
  res.sendFile( path.join( __dirname, "react-project/build/index.html") );
});

// / 로 접속하면 express 라우팅 사용 가능
app.get('/', function (req, res) {
    res.sendFile( path.join( __dirname, "public/main.html") );
});
  


var server = app.listen(3001, function () {
  var host = server.address().address;
  var port = server.address().port;
});

反応項目の包装.jsonファイル

に追加

"homepage": "/react"

/react接続すると生成される反応メイン画面が表示されます.