質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

2016閲覧

Laravel+Reactを使った開発について

Tsubasa0110

総合スコア10

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

1クリップ

投稿2019/03/07 11:15

編集2022/01/12 10:55

前提・実現したいこと

Laravel5.7でReactを利用した開発をしてみる
こちらのLaravelとReactを使った開発を元に同じようにコードを書いているのですが、Laravelのコントローラーでデータベースの値を持ってきてReactでレンダリングする処理(サイトで言う一覧機能の作成の部分)がうまくいかないです。
Laravelは5.7ではなく5.5を使っておりTodoAppとだけ表示される部分までは上手く行っております。
5.7と5.5ではレンダリングする際の書き方が変わってきたりするのでしょうか?

発生している問題・エラーメッセージ

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `TodoApp`. in TodoApp
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `TodoApp`.

コンソールにはこう表示されています。

該当のソースコード

React

1import React, { Component } from 'react'; 2import ReactDOM from 'react-dom'; 3 4//RenderRowsの機能実装 5function RenderRows(props) { 6 //mapでループしている(for相当) 7 return props.todos.map(todo => { 8 return ( 9 <tr key={todo.id}> 10 <td>{todo.id}</td> 11 <td>{todo.title}</td> 12 <td><button className="btn btn-secondary">完了</button></td> 13 </tr> 14 ); 15 }); 16} 17 18export default class TodoApp extends Component { 19 20 //コンストラクタ内でstateにtodosを宣言 21 constructor() { 22 super(); 23 this.state = { 24 todos: [] 25 } 26 } 27 28 //コンポーネントがマウントされた時点で初期描画用のtodosをAPIから取得 29 componentDidMount() { 30 axios 31 .get('/api/get') 32 .then((res) => { 33 //todosを更新(描画がかかる) 34 this.setState({ 35 todos: res.data 36 }); 37 }) 38 .catch(error => { 39 console.log(error) 40 }) 41 } 42 43 //テーブルの骨組みを描画し、行の描画はRenderRowsに任せる(その際、todosを渡す) 44 render() { 45 return ( 46 <React.Fragment> 47 <table className="table mt-5"> 48 <thead> 49 <tr> 50 <th>ID</th> 51 <th>タスク</th> 52 <th>完了</th> 53 </tr> 54 </thead> 55 <tbody> 56 {/* 行の描画 */} 57 <RenderRows 58 todos={this.state.todos} 59 /> 60 </tbody> 61 </table> 62 </React.Fragment> 63 ); 64 } 65} 66 67ReactDOM.render(<TodoApp />, document.getElementById('todoApp'));

blade

1<!doctype html> 2<html lang="ja"> 3<head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="csrf-token" content="{{ csrf_token() }}"> 7 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 8 <!-- CSS --> 9 <link rel="stylesheet" href="{{ asset('css/app.css') }}"> 10 11 <title>react test</title> 12</head> 13 14<body> 15 <div id="app"> 16 <div class="container"> 17 <h3 class="mt-5">Todo 管理システム</h3> 18 19 <div id="todoApp"></div> 20 21 </div> 22 </div> 23 24<!-- avaScript --> 25<script src="{{ asset('js/app.js')}}"></script> 26</body> 27</html>

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

Laravel5.5

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

xenbeat

2019/03/09 05:57

bladeの記述も追加した方が良いと思います。
noka_blank

2019/03/12 00:19

TodoAppコンポーネントとRenderRowsコンポーネントは、ご提示されたコードのように1ファイルに書かれいますか? importやexportのエラーのように見えます。ご確認いただけますでしょうか?
Tsubasa0110

2019/03/12 02:18

1ファイルに書いています。 Laravelの5.7では正常に動いたのでバージョンによる動作の違いなんでしょうかね…
Bremenkanp

2019/03/22 00:07

もしかしたらこの場合はexport defaultが要らないかもしれません・・・
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問