ToDoリストを作ってみる
私はフロントのエキスパートではないので、
あくまでも動くものを作る超入門のチュートリアル。
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
パッケージ追加
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'));
サーバを起動して確認
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