Laravel5.5 + React 超入門チュートリアルその１

ToDoリストを作ってみる

f:id:hakopako03:20180117204825p:plain

私はフロントのエキスパートではないので、
あくまでも動くものを作る超入門のチュートリアル。
API編は別記事なので、そちらも参考にどうぞ。
＝＞ Laravel5.5 で REST API 入門チュートリアル - 今からお前んちこいよ

Laravel + React プロジェクトの作成

プロジェクトの作成

$ composer create-project laravel/laravel laravel-react-example "5.5.*"
$ cd laravel-react-example
$ php artisan preset react
$ npm install

resources/views/welcome.blade.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel React Example</title>
        <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="example"></div>
        <script src="{{asset('js/app.js')}}" ></script>
    </body>
</html>

コンパイル

$ npm run dev

public/js/app.js が作られる。　
サーバ起動して確認

$ php artisan serve

http://localhost:8000 f:id:hakopako03:20180117125141p:plain

パッケージ追加

package.json

+  "react-router": "2.8.1"

$ npm install

app.jsを書き換える

コンパイラを起動させ、コード変更時に随時自動で実行させる

$ npm run watch

resources/assets/js/app.js

// app.js

require('./bootstrap');
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';
import Example from './components/Example';

render(<Example />, document.getElementById('example'));

resources/assets/components/Example.js

// Example.js

import React, { Component } from 'react';

export default class Example extends Component {
    render() {
        return (
            <div className="container">
                <div className="row">
                    <div className="col-md-8 col-md-offset-2">
                        <div className="panel panel-default">
                            <div className="panel-heading">Example Component</div>

                            <div className="panel-body">
                                I am an example component!
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

サーバ起動して確認。
先ほどと見た目での変化はないはずです。

ヘッダー部とコンテンツ部を作る

resources/assets/js/components/Main.js を作成

// Main.js

import React, {Component} from 'react';
import { Router, Route, Link } from 'react-router';

class Main extends Component {
  render(){
    return (
      <div className="container">
        <nav className="navbar navbar-default">
          <div className="container-fluid">
            <div className="navbar-header">
              <a className="navbar-brand" href="/">ToDoList</a>
            </div>
            <ul className="nav navbar-nav">
              <li className="active"><a href="#">Home</a></li>
              <li><a href="#">Create</a></li>
              <li><a href="#">List</a></li>
            </ul>
          </div>
      </nav>
          <div>
              {this.props.children}
          </div>
      </div>
    )
  }
}
export default Main;

resources/assets/js/app.js

// app.js

require('./bootstrap');
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';
import Main from './components/Main';

render(<Main />, document.getElementById('example'));