React DOM is a module in the React library that provides an abstraction of the web's DOM (Document Object Model) and a set of methods for manipulating it. React DOM enables developers to create dynamic and interactive user interfaces for web applications by rendering React components to the browser.

Setup laravel with vite (bundler)

Create a new Laravel project by running the command:

 laravel new project-name

Navigate to the root directory of the project using the command line and install Vite by running the following command:

 npm init vite@latest

Install the required dependencies by running the following command:

 npm install

In the Laravel project, create a new folder called "resources/js" to store the JavaScript files for your application.

Create a new file called "app.js" in the "resources/js" folder and add your JavaScript code.

In the Laravel project, create a new blade template or modify an existing one to include the JavaScript file. For example, you can add the following code to the head section of your layout file:

    
    <head>
        <script type="module" src="{{ mix('js/app.js') }}"></script>
    </head>

Run the Vite development server by running the following command:

 npm run dev

Building our react application

Create component called example

    
    // resources/assets/js/components/Example.js
    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
        
    class Example extends Component {
        render() {
            return (
                <div>
                    <h1>Cool, it's working</h1>
                </div>
            );
        }
    }
        
    export default Example;
    
    // this is important to render the component
    if (document.getElementById('example')) {
        ReactDOM.render(<Example />, document.getElementById('example'));
    }

We will also need to update our Webpack entry point — namely, app.js — to import our new component. You can get rid of all the Vue-related code in that file and replace it with this:

    
    require('./bootstrap');
    import Example from './components/Example';

And, finally, in resources/views/welcome.blade.php, add the following code:

    
    <div id="example"></div>

Now, we can use a JavaScript facade to pass variables from our PHP to our JavaScript, and the PHP-Vars-to-Js-Transformer package will automatically inject them into our footer.blade.php. To test that it's working, let's pass our name along in the HomeController.php file:

    
    public function index()
    {
        JavaScript::put([
            'name' => Auth::user()->name
        ]);

        return view('welcome');
    }

And then in our example.js file, we can access that variable:

    
    class Example extends Component {
        render() {
            return (
                <div>
                    <h1>Cool, it's working</h1>
                    <p>My name is {window.name}.</p>
                </div>
            );
        }
    }

react component in laravel

Setup laravel with vite (bundler)

Building our react application