Laravel + Reactの設定備忘録

今回もはまったポイントを備忘録しときます。

Laravelの設定

Laravelインストールした段階ではReactはpackage.jsonに含まれていないため、そのあたりから設定する。

インストール直後だと

Laravel 5.5 LTSなら

php artisan preset react

1	php artisan preset react

で簡単設定してくれます。

設定されるポイントは

/resources/assets/js/app.js -> //require('./components/Example.js');

/resources/assets/js/components/ExampleComponent.vue -> Example.js

/package.json //vue関連 -> react react-dom など

/webpack.mix.js ->  mix.react('resources/assets/js/app.js', 'public/js')

/resources/assets/js/app.js -> //require('./components/Example.js');

/resources/assets/js/components/ExampleComponent.vue -> Example.js

/package.json //vue関連 -> react react-dom など

/webpack.mix.js -> mix.react('resources/assets/js/app.js', 'public/js')

こんな感じで上書きされたと思います。

既存のプロジェクトでする場合は綺麗さっぱりしちゃうので注意です。

まぁここまで大丈夫。コマンド一発でなんとかなる。

問題はここから。

React使ってみる。

あるドキュメントで試しに使ってみたいと思ってコピペして npm run watchしてみる。

ERROR in ./resources/assets/js/components/Example.js
Module build failed: SyntaxError: Unexpected token (8:8)

   6 |
   7 | export default class VisibilityExampleCallbackFrequency extends React.Component {
>  8 |   state = {
     |         ^
   9 |     continuous: false,
  10 |     log: [],
  11 |     logCount: 0,

 @ ./resources/assets/js/app.js 16:0-43
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

ERROR in ./resources/assets/js/components/Example.js

Module build failed: SyntaxError: Unexpected token (8:8)

6 |

7 | export default class VisibilityExampleCallbackFrequency extends React.Component {

> 8 | state = {

| ^

9 | continuous: false,

10 | log: [],

11 | logCount: 0,

@ ./resources/assets/js/app.js 16:0-43

@ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

SyntaxError => ちゃんと私の分かる言語で書いてよね。　プログラムはわがままである。

ここからわかるのは、class構文でstate宣言できないってことぐらい。

Reactの基本的な使い方は

export default class VisibilityExampleCallbackFrequency extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      column: null,
      data: tableData,
      direction: null
    }
  }
  render(){
    return(
      ...
    );
  }
}

export default class VisibilityExampleCallbackFrequency extends React.Component {

constructor(props){

super(props);

this.state = {

column: null,

data: tableData,

direction: null

}

render(){

return(

...

);

}

こんな感じでコンストラクターでstateを宣言するのが一般的。

一つ前の構文は何だこれってコンパイル側も思ったのだろう。

余談

Reactとは

React -> Babel -> ES2015以前のJavascript みたいな感じでコンパイルされて実行される。

その時に仮想DOMとして生成する。

右クリック->『ページのソースを表示』でほとんど表示されないページがそれです。

以前まではjQueryなどでHTMLのidやclass tagを指定してDOMを生成してました。

だがこの近年ブラウザ間の互換性がなくなってきたのもあってjQueryから仮想DOMに移行することが多くなってきた。

また以前Googleが言ってたモバイルファーストの話もあり容量の少ないことが重要になってきた。

その中で文字数を減らしながら高速に動作するを追求した結果、Reactのような仮想DOMでほとんどDOMを持たないSPAが誕生したのだ。

と私は思っている。笑

Babel Presets

まぁそうはいっても、世間ではまだ古いOSやバージョンの低いブラウザを使っている人もいるわけで、私の親世代になるとアップデートも怖くてできないって人もいるぐらい新しい技術は歓迎されない。

ってことでReactをBabelでコンパイルして昔のブラウザでも動くようにしようってのが今の段階なのです。

そのときに重要になるのがPresetになります。

babel-preset-es2015 //ES2015から
babel-preset-react  //Reactから
babel-preset-stage-0  //stage-0から

babel-preset-es2015 //ES2015から

babel-preset-react //Reactから

babel-preset-stage-0 //stage-0から

LaravelはWebpackを使いやすくしたLaravel-mixというもので管理されていて公式ではbabel-preset-reactが使われていると書かれています。

https://laravel.com/docs/5.5/mix#react

Behind the scenes, Mix will download and include the appropriate babel-preset-react Babel plug-in.

なのでES2015とstage-0は未対応なのでコンパイルエラーが出るみたいです。

npm install --save-dev babel-preset-es2015 babel-preset-react babel-preset-stage-0

1	npm install --save-dev babel-preset-es2015 babel-preset-react babel-preset-stage-0

プロジェクトルートに.babelrcを作成

{
  "presets": [ "es2015", "react", "stage-0"]
}

{

"presets": [ "es2015", "react", "stage-0"]

}

これでnpm run watchなどでコンパイルできるはずです。

トラブルシューティング

ここまで設定してもコンパイルエラーが直らないことがあります。

まずnpm run watchし直す。

node_modules削除 -> npm install -> npm run watch

私はこれでコンパイルエラーが解消されました。

あとがき

フロントエンドを触り始めたのが9月上旬でその時ちょうどReactの権利問題が話題になっていたためVueを使っていました。

つい最近そのことが気になって調べてみたらMITになっていてびっくりしてReact触ってみようと思ったのです。

MITの発表が9月23日だったのでタッチの差ですね。笑

まぁこれから色々と触って行こうと思ってるのですが、初心者の感想としてVueはディレクティブがすごくわかりやすく、ReactはComponentの方法がわかりやすいなぁと思いました。

おしまい。