React + Node + Docker + Postgres （#1 React構築）

ぱぱ頑晴れ

この環境を構築するのに手間取ってしまったので、簡単にまとめておこうと思いこちらの記事を書くことにしました。
イメージはこちらになります。

構成図

開発環境

Mac： Catalina
Node： v12.14.0

React構築

ターミナルからアプリ用のディレクトリを作成します。
npm initコマンドでパッケージを管理するpackage.jsonを作成します。

mkdir node-react-docker-postgres
cd node-react-docker-postgres
npm init -y

React、webpack、babelのパッケージをインストールしていきます。

npm i -S react react-dom
npm i -D webpack-cli webpack webpack-dev-server html-webpack-plugin
npm i -D babel-core babel-loader@7 babel-preset-env 
npm i -D babel-preset-react babel-preset-es2015 babel-preset-stage-0
npm i -D css-loader style-loader

package.jsonは下記のようになります。

{
 "name": "react-node-docker-postgres",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "dependencies": {
   "react": "^16.13.1",
   "react-dom": "^16.13.1"
 },
 "devDependencies": {
   "babel-core": "^6.26.3",
   "babel-loader": "^7.1.5",
   "babel-preset-env": "^1.7.0",
   "babel-preset-es2015": "^6.24.1",
   "babel-preset-react": "^6.24.1",
   "css-loader": "^4.3.0",
   "html-webpack-plugin": "^4.5.0",
   "style-loader": "^1.3.0",
   "webpack": "^4.44.2",
   "webpack-cli": "^3.3.12",
   "webpack-dev-server": "^3.11.0"
 }
}

webpack.config.jsを作成します。

mkdir config
touch ./config/webpack.config.js

webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path')

const htmlWebpackPlugin = new HtmlWebPackPlugin({
 template: "./src/front/index.html",
 filename: "./index.html"
});
module.exports = {
 entry: "./src/front/js/main.js",
 output: {
   path: path.resolve('dist'),
   filename: '[name].js'
 },
 module: {
   rules: [
     {
       test: /\.jsx?$/,
       exclude: /node_modules/,
       use: {
         loader: "babel-loader",
         options: {
           presets: ["env", "react", "es2015", "stage-0"]
         }
       }
     },
     {
       test: /\.css$/,
       use: ["style-loader", "css-loader"]
     }
   ]
 },

 resolve: {
   extensions: [".js", ".jsx"]
 },

 plugins: [htmlWebpackPlugin]
};

HTMLファイルとJSファイルを作成する

mkdir -p ./src/front/js
touch ./src/front/index.html
touch ./src/front/js/main.js

index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>React+Node+Docker+Postgres</title>
</head>
<body>
<section id="root"></section>
</body>
</html>

main.js

import React from "react";
import ReactDOM from "react-dom";

const Index = () => {
 return <div>Hello React</div>;
};

ReactDOM.render(<Index />, document.getElementById("root"));

package.jsonのscriptsにコンパイル用のスクリプトを記載します。

  "scripts": {
   "front": "webpack-dev-server --config ./config/webpack.config.js --open --mode development"
 },

Reactを起動します。

npm run front

ブラウザが起動し、「Hello React」が表示されます。

画像3

​

main.jsの「Hello React」に「!」を追加してみます。
自動的にブラウザの表示も「Hello React!」となります。

画像2

ここまでのものはこちらになります。
https://github.com/YosukeKondo/react-node-docker-postgres/releases/tag/v1.0_react

次はNodeを構築し、フロントエンドと接続します。


この記事が気に入ったらサポートをしてみませんか？