概要
サーバサイドをexpress、フロントエンドをreactで構成するSPAのWebアプリケーションを作る流れを書いていきます。
Ubuntu 18.04 LTSで必要なものを一からinstallしながら進めていきます。
作業ディレクトリを作る
アプリケーションを作るディレクトリを作ります。ディレクトリ名をappとします。
mkdir ~/app
cd ~/app
git init
以下、作業はすべてappディレクトリで行うものとします。
appディレクトリの中はこうなりました。
.
└── .git/
.git にはGitの状態を管理するファイルが入っているので触らないように。
reactをインストール
Yarnを使ってreactをインストールします。
yarn add react react-dom
そうすると何やら動いてappが以下のようになります。
.
├── .git/
├── node_modules/
├── package.json
└── yarn.lock
package.json と yarn.lock はYarnがパッケージの状態を管理するためのテキスト情報が格納されていて、node_modulesは実際にダウンロードしたパッケージが格納されています。
node_modulesをGit管理対象外にする
作成されたファイル・ディレクトリはGitの管理対象になっています。
$ git status
ブランチ master
No commits yet
追跡されていないファイル:
(use "git add <file>..." to include in what will be committed)
node_modules/
package.json
yarn.lock
node_modulesは、今後もダウンロードしたパッケージがどんどん増えていくのでGitの管理対象になっているとリポジトリのサイズがどんどん大きくなって非常にウザいので、Gitの管理対象から外します。
Gitの管理対象外にするには、.gitignore というファイルを作ってそこに対象外にするファイルのパスを書きます。
node_modules
こうするとGitの管理対象から外れます。
$ git status
ブランチ master
No commits yet
追跡されていないファイル:
(use "git add <file>..." to include in what will be committed)
.gitignore
package.json
yarn.lock
ここまでで、一旦Gitにcommitします。
git add .
git commit
コーディング
ReactでHello, world!を出力するコードをコーディングしていきます。
脱create-react-app ~ 真面目に express × react 環境を構築する~ を参考にさせてもらいました。
src/client ディレクトリを作成して、その下に以下3つのファイルを作成します。
<html>
<head>
<meta charset="UTF-8">
<title>Hello world!</title>
</head>
<body>
<section id="index"></section>
</body>
</html>
import React from 'react';
import ReactDOM from 'react-dom';
import Page from './page';
ReactDOM.render(<Page />, document.getElementById("index"));
import React from 'react';
import ReactDOM from 'react-dom';
const Page = () => <div>Hello, World!</div>;
export default Page;
reactのコードを動かす
webでプログラムを動かすにはwebサーバが必要です。
最終的にはnode.jsで動かすわけなんですが、いきなりそこまでやると大変なので、webpack-dev-serverという開発・デバッグ用のserverを立てて動かします。
関連パッケージのinstall
yarn add -D webpack-cli webpack webpack-dev-server html-webpack-plugin
yarn add -D @babel/core @babel/cli @babel/preset-env @babel/preset-react
yarn add -D babel-loader babel-plugin-module-resolver
webpackの設定ファイル
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');
const htmlWebpackPlugin = new HtmlWebPackPlugin({
template: "./src/client/index.html",
filename: "./index.html"
});
module.exports = module.exports = {
entry: "./src/client/index.jsx",
output: {
path: path.resolve('dist'),
filename: '[name].js'
},
module: {
rules: [
{
test: /(\.js$|\.jsx$)/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
plugins: [htmlWebpackPlugin],
resolve: {
extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx'],
modules: [path.resolve(__dirname, 'src'), 'node_modules']
}
};
babelの設定ファイル
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
],
"plugins": [
["module-resolver", { "root": ["./src/client"] }]
]
}
以下のコマンドでwebpack-dev-serverを起動
yarn webpack-dev-server --config config/webpack.config.js
ブラウザで http://localhost:8080 にアクセス -> 「Hello, World!」 表示
お疲れ様でした！
参考
Webpack | Configration
Configure Babel
脱create-react-app ~ 真面目に express × react 環境を構築する~