プログラマになって初めての常駐先でreactを使用し、興味を持ったので自宅で勉強がてら環境を作ってみます。
プロジェクトの他メンバーにreactの環境構築について色々聞いたので、忘れないうちにメモ。ちなみに私の理解度は素人同然なので、ふわっとした感じで書いていきます。
内部の設定ファイルのことを何もわからなくても、コマンドでcreate-react-appだとすぐに動く環境を作れるのですが、何が起こっているかわからないという気持ち悪さが残ったので、色々聞いて、雰囲気だけ掴み、一から構築してみました。
#手順1 node.jsをインストール
https://nodejs.org/ja/ からインストールする。
#手順2 空のディレクトリを作る。
名前は好きに決めます。私はmyappにします。この中にファイルを作成していきます。
#手順3 package.jsonの作成
cdコマンドで作成した空ディレクトリに移動して
$ npm init
と入力するとpackage.jsonというファイルが作られる。
色々聞かれますがとりあえずenterの連打。
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
このファイルに書かれている情報を元に必要なファイルをインストールしてくれるらしい。
各部分の説明はこちらの方の記事が非常に参考になりました。
（というかこの方の記事で環境作れるっぽい笑）
https://qiita.com/righteous/items/e5448cb2e7e11ab7d477
package.jsonを少々いじって（コピペ）インストールの準備をします。
package.jsonは調べるといろんな方が自分の環境設定を公開しているらしい。
私はreact-reduxを使用したいので、職場の方のgithubよりコピペして作りました。
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode production",
"develop": "webpack -d --watch"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.7"
},
"dependencies": {
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-redux": "^7.1.1",
"redux": "^4.0.4"
}
}
babelは主に新しいjsを古いjsに書き換えてくれる役割らしい。
webpackはここではjsファイルをひとつにしてくれる役割らしい。
多分相当ざっくりな感じです。
#手順4 必要なファイルの作成
引き続きmyappでコマンドを入力
$ npm install
するとさきほどのpackage.jsonの情報を元に必要なファイルがインストールされました。
node_modulesというフォルダの中にpackage.jsonで指定した情報を含む様々な実体が置いてある。
babel,webpackにもそれぞれ必要なファイルがあるのでmyapp直下にファイルを作成して用意しておきます。こちらもgithubよりコピーしてきました。
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'public/js')
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
webpackに関してはこちらの記事が非常にわかりやすかったです。
https://qiita.com/one-kelvin/items/b810aafb6b5ef90789a3
myapp直下に .babelrc という名前の隠しファイルも作成しておきます。
babelさんが使うらしい。
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
#手順5 index.htmlの作成
myappの直下にindex.htmlを作成します。
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title>myapp</title>
</head>
<body>
<div id="myapp-page"></div>
</body>
</html>
#手順6 srcフォルダの作成
myapp直下にsrcフォルダを作成し、ここにjsファイルを作成していきます。
先ほど設定したwebpackの設定内容で起点となるファイルindex.jsをsrc内に作成します。
import React, {useState} from 'react'
import ReactDom from 'react-dom'
import { Provider, useSelector, useDispatch } from 'react-redux'
import { createStore } from 'redux'
const App = () => {return (<div>HELLO REACT</div>)}
ReactDom.render(
<App/>,
document.getElementById('myapp-page')
)
#手順7 完成品のjsファイルを作成する
この状態で
$ npx webpack
というコマンドをうつと、新たにフォルダができて、webpackの設定ファイルに記載したように、public/jsの中にbundle.jsという完成品のjsファイルができます。
#手順8 index.htmlにjsファイルを読み込ませる。
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title>myapp</title>
</head>
<body>
<div id="myapp-page" /></div >
<script type="text/javascript" src="./public/js/bundle.js"></script>
</body>
</html>
#手順9 ブラウザでindex.htmlを開いてみる
これで動いているはずです。