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 となる状態。
URLからでもアクセス可能にする
Laravel側の設定が必要になる。
routes/web.php
// web.php
Route::get('/{any?}', function () {
return view('welcome');
})->where('any', ".*");
/
以外のURLにアクセスがあった場合にもwelcome.blade.php を表示するようにする。
これで、リロードなどでも動作する。他のAPIなどのルーティングの下に書く。でないとAPIのURLもwelcomeへのページと判断されてしまう。
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;
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