React komponento integracija laravel framework'e
Turime blade pagrindinį views: resources/views/layouts/app.blade.php :
<!DOCTYPE html>
.... integruojame musu appsą
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
....
</head>
<body>
....ir žamiau turime yield
<main class="py-4">
@yield('content')
</main>
</div>
</body>
</html>
Turime blade pagrindinį views: resources/views/layouts/app.blade.php :
<!DOCTYPE html>
.... integruojame musu appsą
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
....
</head>
<body>
....ir žamiau turime yield
<main class="py-4">
@yield('content')
</main>
</div>
</body>
</html>
Krauname mūdų view resources/views/home.blade.php kuris 'praplečia' aukščiau esantį app.blade.php yielde užkraudamas kontentą:
@extends('layouts.app')
@section('content')
<div class="container">
<div id="root"></div>
</div>
@endsection
kontentas yra div su id root. Į jį rendinsismusu appsas. resources/assets/js/app.js :
....
require('./components/index');
Appsas į terpia index.js esantį kataloge components.
resources/assets/js/components/index.js :
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import App from './App';
if (document.getElementById('root')) {
ReactDOM.render(<App />, document.getElementById('root'));
}
Čia jau React kodas. Į krauname App.js ir renderiname <App/> į DOM elementą turintį id root.
App.js yra mūsų html turinys resources/assets/js/components/App.js :
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App 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">App Component</div>
<div className="card-body">
I'm an App component!
</div>
</div>
</div>
</div>
</div>
);
}
}
export default App;
Trumpiau:
Rezultate:
Komentarai
Rašyti komentarą