トップ 差分 一覧 ソース 置換 検索 ヘルプ PDF RSS ログイン

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(51)
TypeScript版サンプルlaravel_react_typescript.zip(48)

 ルーティング

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;

API(Laravel)とフロント(React)を完全に分離する場合


[カテゴリ: プログラミング言語 > PHP]

[通知用URL]



  • Hatenaブックマークに追加
  • livedoorクリップに追加
  • del.icio.usに追加
  • FC2ブックマークに追加

最終更新時間:2022年08月07日 23時19分32秒