How do I use react in some part on my laravel website.

Can I use react in some view of my laravel website

Sep 1 '21 Comments: 1 Answers: 0

I have a laravel website that is currently live and is using blade template for the views and I am thinking of using react JS in some views.

I want to know if it's possible to use react in some views while still having the blade template rendering some views.

…

Top comments (1)

Heiker • Sep 1 '21

It is possible. But now there are other questions:

Are you going to support IE 11?
Are you willing to add a build step just for react?
How do you plan to use it? Is it inside a blade template or in its own file?

There is a snippet I like to share with people, to show how you can use react without a build step in a plain html file. Maybe this can give you a hint. The only catch is that it needs a modern browser, and that you need to use a couple of packages to overcome some limitations:

htm
es-react

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>single page react boilerplate</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="your-name-here">
</head>

<body>
  <div id="place-app"> </div>
  <script type="module">
    import { React, ReactDOM } from "https://unpkg.com/es-react";
    import htm from 'https://unpkg.com/htm?module';

    const html = htm.bind(React.createElement); 

    var App = (props) => {
        return html`
            <div>
                Hello Universe!
            </div>
        `;
    };

    ReactDOM.render(App(), document.getElementById('place-app'));
  </script>
</body>
</html>

You also might want to consider using preact instead of react because its "lighter" (3 kb).