Laravel5.5 + React 超入門チュートリアル その３ - ToDo一覧

一覧ページを作る

resources/assets/js/components/List.js を作る

// List.js

import React, {Component} from 'react';
import axios from 'axios';
import { Link } from 'react-router';
import TableRow from './TableRow';

class List extends Component {
  constructor(props) {
    super(props);
    this.state = {data: ''}
  }
  componentDidMount(){
    axios.get('http://localhost:8000/api/todos')
    .then(response => {
      this.setState({ data: response.data })
    })
    .catch(function (error) {
      console.log(error)
    })
  }
  tabRow(){
    if(this.state.data instanceof Array){
      return this.state.data.map(function(object, i){
        return <TableRow obj={object} key={i} />
      })
    }
  }

  render(){
    return (
      <div>
        <h1>ToDo List</h1>

        <div className="row">
          <div className="col-md-10"></div>
          <div className="col-md-2">
            <Link to="/create">+ New ToDo</Link>
          </div>
        </div><br />

        <table className="table table-hover">
            <thead>
            <tr>
                <td>ID</td>
                <td>Title</td>
                <td>Description</td>
                <td>Actions</td>
            </tr>
            </thead>
            <tbody>
              {this.tabRow()}
            </tbody>
        </table>
    </div>
    )
  }
}
export default List;

resources/assets/js/components/TableRow.js を作る

// TableRow.js

import React, { Component } from 'react';

class TableRow extends Component {
  render() {
    return (
      <tr>
        <td>
          {this.props.obj.id}
        </td>
        <td>
          {this.props.obj.title}
        </td>
        <td>
          {this.props.obj.description}
        </td>
        <td>
          <button className="btn btn-primary">Edit</button>
        </td>
        <td>
          <button className="btn btn-danger">Delete</button>
        </td>
      </tr>
    )
  }
}

export default TableRow;

resources/assets/js/app.js

  import Create from './components/Create';
+ import List from './components/List';

~~~
          <Route path="/create" component={Create} />
+         <Route path="/list" component={List} />
        </Route>

resources/assets/js/components/Main.js

- <li><a href="#">List</a></li>
+ <li><Link to="list">List</Link></li>

resources/assets/js/components/Create.js での新規TODO作成後の遷移を作る

-       // browserHistory.push('/list')
+       browserHistory.push('/list')

http://localhost:8000/list で表示される

---

React編：
(その1)http://www.hakopako.net/entry/2018/01/17/220538
(その2)http://www.hakopako.net/entry/2018/01/17/220620
(その3)http://www.hakopako.net/entry/2018/01/17/220707
(その4)http://www.hakopako.net/entry/2018/01/17/220730

API編：
Laravel5.5 で REST API 入門チュートリアル - 今からお前んちこいよ