バックエンドはLaravelでフロントエンドはreactでやってみるという練習帳です。react自体のことをあまりよくわかっていない人はreact単体で動かせるように練習しておいた方がよいと思います。
お金をかけちゃっても問題ない人はudemyなどのモダンJavaScriptの基礎から始める挫折しないためのReact入門を見てみるというのもよいかもしれません。
とろあえずまだ全然わからないのでLaravelに組み込む前にreactを触ってみます。
まずはanyenvでnpmの開発環境を作ってゆきます。まずはanyenvを導入します。もしまだ導入していない場合はanyenvの環境を作ってください。macOSでanyenvの環境をつくるを参考にしてもらえればと思います。
$ anyenv --version
anyenv 1.1.4
nodeをインストールして開発環境を準備します。
cd /PROJECT_DIR
nodenv local 16.9.1
バージョンを確認しておきます。
$ node --version
v16.9.1
$ npm --version
7.21.1
npmの準備
$ npm init
......
package name: (react-tutorial)
version: (1.0.0)
description:
entry point: (index.js) webpack.config.js # <- "webpack.config.js" 入力(先にwebpack.config.js 作っておけばデフォルトで選択される)
test command:
git repository:
keywords:
author: Your Name
license: (ISC)
......
webpack関連のインストール
$ npm install --save-dev webpack webpack-cli webpack-dev-server
$ npm install -g webpack webpack-cli
$ npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
$ npm install --save-dev react react-dom
ここまででreactが動くようになってます。
webpack.config.js ファイルを作成し、バンドリングルールを書いていきます。
下記のようにwebpack.config.js を設定することで./src/js/client.js を起点にファイル内部のimport 構文を読み取りそれらソースコードをモジュールバンドリングしていくようになります。
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: path.join(__dirname, "src"),
entry: "./js/client.js",
module: {
rules: [{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: [{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react', '@babel/preset-env']
}
}]
}]
},
output: {
path: __dirname + "/src/",
filename: "client.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
]
};
次にsrc/index.html ファイルを作成します。
src/index.html ではwebpack により作成されたclient.min.js をロードするように指定します。client.min.jsはwebpackのコマンドで生成されるファイルになります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Tutorials</title>
<!-- change this up! http://www.bootstrapcdn.com/bootswatch/ -->
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cosmo/bootstrap.min.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="app"></div>
<script src="client.min.js"></script>
</body>
</html>
client.jsを作成します。これがいわゆるreactのコンポーネントにあたる感じになるのかな。
import React from "react";
import ReactDOM from "react-dom";
class Layout extends React.Component {
render() {
return (
<h1>Welcome!!!!</h1>
);
}
}
const app = document.getElementById('app');
ReactDOM.render(<Layout/>, app);
ここまでできたらwebpackでビルドみたいなことをすればOKです。
$ webpack --mode development
これでビルドに成功したらindex.htmlをブラウザーで見ます。welcome画面が見れると思います。ここまでがhello world的なところまでです。
今から始めるReact入門 〜 React の基本
roughlang/react-tutorial
webpackがない。
$ webpack -v
zsh: command not found: webpack
こういうときはパスを通さないと駄目です。
$ npm install webpack-dev-server -g
これでも駄目だったら、パスを手動で通す。(自分の環境に合わせてください。）
export /Users/USER_NAME/react-tutorial/node_modules/webpack/bin
それでも駄目だったらフルパスで一応動きます。
~/react-tutorial/node_modules/webpack/bin/webpack.js --mode development