一覧ページを作る
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