Laravel + React

参考

https://www.engilaboo.com/laravel-react-csrf/
https://note.com/laravelstudy/n/n17fd31eb64e4
https://qiita.com/shomffl/items/644656c4de086d547429
https://reffect.co.jp/laravel/laravel_inertia_js_react

bladeをReactに置き換える場合

sample

JS版サンプルlaravel_react_js.zip(130)
TypeScript版サンプルlaravel_react_typescript.zip(128)

ルーティング

https://zenn.dev/hitoshiasano/articles/9d71cb400e8a17

csrfトークン

概要

headのmetaタグにcsrfトークンを埋め込んで、reactでそれを参照し、form送信時にトークンを渡す

サンプル

 import React from 'react';
 class Form extends React.Component {
     constructor(props) {
         super(props);
         let csrf_token = document.head.querySelector('meta[name="csrf-token"]').content;
         this.state = {
             csrf_token: csrf_token
         }
     }
     render() {
         return (
             <>
                 <form action="/hoge" method="post">
                     <input type="hidden" name="_token" value={ this.state.csrf_token } />                    
                     <input type="text" name="item" />
                     <input type="number" name="amount" />
                     <button type="submit">登録</button>
                 </form>
             </>
         );
     }
 }
 export default Form;