Laravel 9 React and Vite Tutorial

on

install composer first

install node.js

install xampp (php 8.1)

Using windows 10 64 bit


 composer create-project laravel/laravel laravel-vite-react

cd laravel-vite-react


open in visual studio code

open terminal

run

php artisan serve

open package.json

delete line

"laravel-vite-plugin": "^0.4.0"

"vite": "^2.9.11"


npm install vite laravel-vite-plugin --save-dev


you will get updated laravel-vite-plugin and vite in your package.json

001:

npm install @vitejs/plugin-react --force


now cleare terminal

002:

npm install react@latest react-dom@latest --force


you will get these three  (step 001 and 002) in your dependencies in package.json


opne vite.config.js

overwrite with following


import { defineConfig } from 'vite';

import laravel from 'laravel-vite-plugin';

import react from '@vitejs/plugin-react'

export default defineConfig({

    plugins: [

        react(),

        laravel({

            input: ['resources/css/app.css', 'resources/js/app.js'],

            refresh: true,

        }),

    ],

});


save


open resources/js/

create components folder

add App.jsx

-----------------

import React from 'react'

function App() {

  return (

    <div>Laravel 9, vite and reactjs</div>

  )

}


export default App

-------------------

now open resources/js/app.jsx

-----------------------

import './bootstrap';

import React from 'react';

import ReactDOM  from 'react-dom';

import App from './components/App'

if(document.getElementById('app')){

    ReactDOM.render(

        <App/>

        ,document.getElementById('app')

    );

}

---------------------

Now open resources/views/welcome.blade.php

clear body content

remove class from body

and add followind code


<div id="app"></div>


now in the <head> tag add


@viteReactRefresh

@vite(['resources/css/app.css','resources/js/app.jsx'])



now run followin command


npm run dev


DONE


check browser






Comments

Post a Comment