laraveli kurduk. sonra sırayla;
|
1 2 3 |
npm i npm run watch // burada success dönecek mesajlar npm i react react-dom --save-dev |
|
1 |
npm install @babel/preset-react --save-dev --legacy-peer-deps |
daha sonra webpack.mix.js içine
|
1 2 3 4 5 |
mix.js('resources/js/app.js', 'public/js') .react() .postCss('resources/css/app.css', 'public/css', [ // ]); |
|
1 |
npm i react-router-dom --save |
buraya kadar kurduk. şimdi merhaba yazdıralım. resources/js içine index.js oluştur. içine aşağıdaki kodları yaz.
|
1 2 3 4 5 6 7 8 9 |
import React, {Component} from "react"; import ReactDOM from 'react-dom'; class Index extends Component{ render(){ return (<div>Merhaba</div>) } } ReactDOM.render(<Index/>,document.getElementById("index")); |
yine aynı klasördeki app.js içine
|
1 2 |
require('./bootstrap'); require('./Index'); |
index.blade.php oluştur view içine ona da
|
1 2 3 4 5 6 7 8 9 10 |
<html> <head> <title>Deneme</title> </head> <body> <div id="index"></div> <script src="{{ asset("js/app.js") }}"></script> </body> </html> |
web.php içine bütün routeları silerek
|
1 |
Route::view('/{path?}','index')->where('path','.+'); |
hepsi bu kadar