はじめに
reactとreact-reduxを調べたときに概念や考え方など難しい話から入っているサイトやちょっと難しい(カッコいい)Web画面をサンプルに使用していて理解が難しいなと感じました。
そのため、単純なサンプルを使用して最低限の説明のみをしようと思います。
環境
- node.js: v12.18.2
- webpack: 4.44.1
- React: 16.13.1
環境作成
node.jsのインストール
公式のサイトに従ってインストールしてください
公式サイト: https://nodejs.org/ja/
プロジェクト用のファイルを作成
node.jsのプロジェクトではプロジェクトの設定やインストールしたパッケージなどをpackage.jsonに記載します。
次のコマンドでpackage.jsonを作成するといくつかの入力項目がありますが基本的にすべてデフォルトで問題ないです。
npm init
Babel
環境やブラウザのバージョンによって使用できるJavaScriptの仕様が異なります。その仕様の差分を埋めるために、Babelを使用して作成したJavaScriptを対応可能なものに変換します。
Babelのインストール
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react @babel/register
Babelの設定作成
Babelの設定はプロジェクト直下の.babelrc に記載します。そのため、このファイルを作成して以下の内容を記載します。
{
"presets": ["@babel/env", "@babel/preset-react"]
}
webpack
Web画面からJavaScriptを読みだす際にJavaScriptのファイルが多いと無駄な時間や処理が発生します。webpackを使用すると複数のファイルを一つにまとめていい感じにしてくれます。
webpackのインストール
webpackに必要なライブラリの他にもローカルでサーバを起動するために webpack-dev-server をインストールします。
npm install --save-dev webpack webpack-cli webpack-dev-server style-loader css-loader babel-loader
webpackの設定作成
webpackの設定はプロジェクト直下のwebpack.config.js に記載します。このファイルを作成して以下の内容を記載します。
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
mode: "development",
module: {
// ファイルをどのように変換すればよいのかのルールを設定。
// testで入力するファイルの条件、excludeで除外する条件、
//loaderで外部ライブラリのルールを参照する
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
// ビルドの順番を設定
resolve: { extensions: ["*", ".js", ".jsx"] },
// ビルド後の設定
// pathは、ビルド後のファイルを吐き出すフォルダ、
// filenameはビルド後のファイル名を設定
output: {
path: path.resolve(__dirname, "dist/"),
filename: "bundle.js"
},
// ローカルで起動するサーバの設定
// contentBaseでブラウザからアクセスしたときのルート、
// portはブラウザからアクセスするときのポート番号、
// hotOnlyはファイルを更新したときに自動読み込みをする設定
devServer: {
contentBase: path.join(__dirname, "public/"),
port: 8080,
hotOnly: true
},
plugins: [new webpack.HotModuleReplacementPlugin()]
};
react
reactのインストール
npm install react react-dom
Web画面のソースの作成
フォルダの作成
プロジェクトルート直下にsrcとpublicとdistのフォルダを作成してください。
※上のwebpackの設定を変えたときはここも変えてください。
project_root
├─dist // ビルド後のファイルを格納
├─public // htmlを格納
├─src // reactのJavaScriptファイルやCSSファイルを格納
├─.babelrc
├─package.json
├─webpack.config.js
htmlファイルの作成
ブラウザからアクセスした際に一番最初にアクセスされるhtmlファイルを作成します。
※webpackのビルド後のファイルをインポートするのを忘れないでください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React Sample</title>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>
reactのrendarファイルの作成
reactの機能をつかってレンダリングするJavaScriptファイルを作成します。
ReactDOM.render()にコンポーネントファイルとdocument.getElementById(置き換えるhtmlのid)を指定してあげます。
上のindex.htmlの<div id="app"></div>とAppコンポーネントを置き換えたいのでReactDOM.render()に<App />とdocument.getElementById('app')を指定します。
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('app')
);
reactのコンポーネントファイルの作成
実際にWeb画面に表示するための情報を書いたコンポーネントのJavaScriptファイルを作成します。
基本的にはコンポーネントファイルを増やして、Web画面を増やしたりWeb画面の要素を増やしたりします。
※上のindex.jsのimport App from './App';でこのファイルをインポートしています。最後の行のexportを忘れないでください。
import React, { Component} from "react";
class App extends Component{
render(){
return(
<div className="App">
<h1> Hello, World! </h1>
</div>
);
}
}
export default App;
Web画面の起動
ビルド
開発用のサーバを起動するときに同時にビルドが走るので特に必須ではないですが、webpackの設定や作成したファイルが間違っていないかをチェックするために一旦ビルドします。
プロジェクトのルートで次のコマンドを実行するとビルドが走ります。Windowsの場合はダブルクォーテーションで囲まないとうまくいかないです。
"./node_modules/.bin/webpack"
ビルドが成功するとdictフォルダ内にJavaScriptファイルが一つできるはずです。
開発用サーバの起動
プロジェクトのルートで次のコマンドを実行するとビルドとサーバの起動が走ります。Windowsの場合はダブルクォーテーションで囲まないとうまくいかないです。
"./node_modules/.bin/webpack-dev-server"
サーバが起動したらブラウザからlocalhost:8080にアクセスするとHello, World!が表示されます。
終わりに
Reduxやaxiosとの連携を書こうと考えていましたが、予想以上に長くなったので今回はここまでにします。
次回以降にReduxとaxiosのサンプルと簡単な説明を書いていこうと思います。
それぞれまとめました。
Redux:ReduxとReduxToolkitを使用してReact内でデータを管理する
axios:ReactのRedux内でaxiosを使用した通信をする