ReactとLaravelの連携における出力エラー問題
【React】Componentフォルダー内の記述が反映されないエラーを解決したいです
開発環境
PHP -v8.0.2
laravel -v9.0
MySQL -v8.0.28
React -v17.0.2
使用API
Stripe API -v1.31.0
use-shopping-cart -v3.1.2
ディレクトリー
ishizueWeb
└ app
・・・
└ public
└ resources
└ js
└ components
└ Cart.js
└ Example.js
└ app.js
・・・
└ views
└ cart.blade.php
└ route
└ web.php
・・・
ディレクトリーに関する説明
Laravelプロジェクトではviewsにフロントファイルを追加し、コントローラーを通してweb.phpでルーティングをして表示をしています。
React連携する際に自動で[componentsフォルダ, Example.js, app.js]が生成された。
Reactの部分に関してはcomponentsフォルダ内に記載した内容をapp.jsを通して、cart.blade.phpにimportして表示をしているという認識をしています。
プロジェクトに関する説明
プロジェクトの目的は当初事業紹介のサイトを作成するところから状況が変わり体験予約機能や決済システム、生徒や保護者に向けての受講状況を共有するダッシュボード機能を追加したWebアプリに開発目標が変更になりました
その過程を経てLaravelワークフレームを使って開発を進めています。
当初はHTML,CSS,Jqueryを使用したものから決済システムの導入にあたりReactの使用が必要になり後発で追加しました
Reactは決済システムのカート機能を追加する際にuse-shopping-cartのAPI部分で使っています。
発生している問題・エラー
まず手始めに問題はエラーが発生してないにもかかわらず表示したい内容が表示されない事にあります。
以下が関連するソースコードになります
cart.blade.php(/plansを通してブラウザで表示している部分)
@extends('common')
@section('intro')
<div class="intro">
<div class="container">
<h1>Make your neighbors envious!</h1>
<p>Let the professionals at We Dew Lawns, Inc. service your lawn.</p>
</div>
</div>
@endsection
@section('content')
<div id='example'></div>
<script src="{{asset('/js/app.js')}}"></script>
@endsection
app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes React and other helpers. It's a great starting point while
* building robust, powerful web applications using React + Laravel.
*/
require('./bootstrap');
/**
* Next, we will create a fresh React component instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
require('./components/Cart');
require('./components/Example');
Example.js
import React from 'react';
import ReactDOM from 'react-dom';
class Example extends Component {
render(){
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="card-header">Cart</div>
<div className="card-body">plans</div>
</div>
</div>
</div>
</div>
);
}
}
export default Example;
if (document.getElementById('example')) {
ReactDOM.render(<Example />, document.getElementById('example'));
}
Cart.js
import React from 'react';
import ReactDOM from 'react-dom';
import { CartProvider } from 'use-shopping-cart'
import { formatCurrencyString } from 'use-shopping-cart'
ReactDOM.render(
<CartProvider >
mode = "payment"
cartMode = "client-only"
stripe = { pk_live_51KH70nHS7H1udQiRtYbTf7TPIUO6lO1KOVu8va9FPOd3rMCfHVVXso3CdDF6ctj7KjKSnrOASerKDXlFdNONQFYR000zkH7fJA }
successUrl = "stripe.com"
cancelUrl = "twitter.com/dayhaysoos"
currency = "JPY"
allowedCountries = {
['US', 'GB', 'CA','JP']
}
billingAddressCollection = { true }
<App />
</CartProvider>,
document.getElementById('root')
)
const productData = [
{
name: 'Bananas',
price_id: 'price_xxxx',
price: 400
},
{
name: 'Tangerines',
price_id: 'price_xxxx',
price: 100
}
]
class Cart extends Component {
render(){
const productData = [
{
name: 'Bananas',
price_id: 'price_xxxx',
price: 400
},
{
name: 'Tangerines',
price_id: 'price_xxxx',
price: 100
}
]
return (
<div>
<h1>Cart</h1>
<ul>
{productData.map(product => (
<li key={product.price_id}>
{product.name} ({formatCurrencyString({ value: product.price, currency: 'JPY' })}) <br />
<button>
Add 1 to Cart
</button>
</li>
))}
</ul>
</div>
);
}
}
export default Cart;
if (document.getElementById('cart')){
ReactDOM.render(<Cart />, document.getElementById('cart'));
}
自分で試したこと
Cart.jsやapp.jsの階層を変更したり、viewsの中にjsのフォルダを作成しcomponentsフォルダーを生成したりしました。
またインポート時にnpm run devを行なった際にExample.jsの出力が行われていたためExample.js内のhtmlの
タグなどを少し変更し出力を確かめました。
確かめた際には変更が反映されておらず、そちらの原因も解決方法を探しているところです。
