f:id:hakopako03:20180117144949p:plain

Create ページを作る

resources/assets/js/components/Create.js

// Create.js

import React, {Component} from 'react';

class Create extends Component {
    render() {
      return (
      <div>
        <h1>Create a ToDo</h1>
        <form>
          <div className="row">
            <div className="col-md-6">
              <div className="form-group">
                <label>Title:</label>
                <input type="text" className="form-control" />
              </div>
            </div>
            </div>
            <div className="row">
              <div className="col-md-6">
                <div className="form-group">
                  <label>Description:</label>
                  <input type="text" className="form-control col-md-6" />
                </div>
              </div>
            </div><br />
            <div className="form-group">
              <button className="btn btn-primary">Create</button>
            </div>
        </form>
  </div>
      )
    }
}
export default Create;

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';
import Create from './components/Create';

render(
  <Router history={browserHistory}>
      <Route path="/" component={Main} >
        <Route path="/create" component={Create} />
      </Route>
    </Router>,
        document.getElementById('example'));

resources/assets/js/components/Main.js のヘッダー部分のリンク先を修正

-  <li><a href="#">Create</a></li>
+  <li><Link to="create">Create</Link></li>

サーバを起動して確認
メニューからの遷移はできるが、リロードなどするとNotFound となる状態。
f:id:hakopako03:20180117141045g:plain

URLからでもアクセス可能にする

Laravel側の設定が必要になる。
routes/web.php

// web.php

Route::get('/{any?}', function () {
    return view('welcome');
})->where('any', ".*");

/ 以外のURLにアクセスがあった場合にもwelcome.blade.php を表示するようにする。これで、リロードなどでも動作する。他のAPIなどのルーティングの下に書く。でないとAPIのURLもwelcomeへのページと判断されてしまう。

f:id:hakopako03:20180117144842g:plain

Ajax で Post する

axios をつかって通信する。

resources/assets/js/components/Create.js

// Create.js

import React, {Component} from 'react';
import { browserHistory } from 'react-router';

class Create extends Component {
  constructor(props){
    super(props)
    this.state = {title: '', description: ''}
  }
  handleChangeTitle(e){
    this.setState({title: e.target.value})
  }
  handleChangeDesc(e){
    this.setState({description: e.target.value})
  }
  handleSubmit(e){
    e.preventDefault()
    const todo = {
      title: this.state.title,
      description: this.state.description
    }
    let uri = 'http://localhost:8000/api/todos'
    axios.post(uri, todo).then((response) => {
      // browserHistory.push('/list')
      console.log("success")
    })
  }
  render() {
    return (
    <div>
      <h1>Create a ToDo</h1>
      <form onSubmit={this.handleSubmit.bind(this)}>
        <div className="row">
          <div className="col-md-6">
            <div className="form-group">
              <label>Title:</label>
              <input type="text" className="form-control" onChange={this.handleChangeTitle.bind(this)}/>
            </div>
          </div>
          </div>
          <div className="row">
            <div className="col-md-6">
              <div className="form-group">
                <label>Description:</label>
                <input type="text" className="form-control col-md-6" onChange={this.handleChangeDesc.bind(this)}/>
              </div>
            </div>
          </div><br />
          <div className="form-group">
            <button className="btn btn-primary">Create</button>
          </div>
      </form>
    </div>
    )
  }
}
export default Create;