PLATFORM
  • Tails

    Create websites with TailwindCSS

  • Blocks

    Design blocks for your website

  • Wave

    Start building the next great SAAS

  • Pines

    Alpine & Tailwind UI Library

  • Auth

    Plug'n Play Authentication for Laravel

  • Designer comingsoon

    Create website designs with AI

  • DevBlog comingsoon

    Blog platform for developers

  • Static

    Build a simple static website

  • SaaS Adventure

    21-day program to build a SAAS

Question By
Solved

How to use React on specific pages ?

Solved
frederickigeit

Jan 6th, 2021 10:18 PM

Just bought Wave, really loving the product so far. Best Saas Kit I've ever seen.

I have a couple of custom pages that I'm likely going to build in react, due to them being highly interactive

I know there's a way to use react in fresh Laravel projects using 'artisan preset'

Are there any recommended best practice you'd suggest for using React in Wave? Thanks!

andrewpeacock1969

Jan 7th, 2021 02:28 AM

Hi, I'm looking for some help on this as well. When I run "php artisan ui react", artisan fails due to missing /resources/js/bootstrap.js

Regards, Andy

andrewpeacock1969

Jan 7th, 2021 03:16 AM

Best Answer

Ah, I got it working!

Can't quite remember the exact steps, but this should get you started:

Go to /resources/views/themes/ npm install npm install react react-dom

In the assets/js/app.js file for your theme, add the following:

import React from 'react'; import ReactDOM from 'react-dom';

ReactDOM.render(

Hello, world!

, document.getElementById('reacthere') );

Then add a DIV element with ID of 'reacthere' to your blade template.

Go back to /resources/views/themes/

Run 'npm run dev'

I had to also update node-sass, which seems to be a continual PITA.

That's got me up and running.

Hope it helps!

Andy

Report
1