React in WordPress

Voor het gebruik van React in WordPress moet je het volgende doen:

Voeg de volgende packages toe in de ‘package.json’ file:

{
  "devDependencies": {
    "@roots/bud": "6.12.3",
    "@roots/bud-sass": "6.12.3",
    "@roots/bud-tailwindcss": "6.12.3",
    "@roots/bud-react": "6.12.3", <------
    "@roots/sage": "6.12.3",
  },
  "dependencies": {
    "react": "18.2.0", <------
    "react-dom": "18.2.0" <------
  }
}

Draai yarn om de packages te installeren. Start daarna yarn dev of yarn start opnieuw op.
Bepaal waar je de React component wilt renderen. In dit voorbeeld gebruik ik app.blade.php.

Zet hier een div in met een id, bijvoorbeeld:

<div id="helpbot"></div>

In resources/scripts/components maak je een nieuw component aan. Als je je component wilt opsplitten in meerdere files, is dit handig om in een folder te doen.

In dit voorbeeld maak ik een folder genaamd helpbot, daarin maak ik een file die helpbot.jsx heet.

Hierin bouw je je component op:

import {useState} from 'react';

const HelpBot = () => {
  const [count, setCount] = useState(0)
  console.log('React works!');

  const handleClick = () => {
    setCount((count) => count + 1);
  }
  return (
    <>
      <button onClick={handleClick}>
        Clicked: {count}
      </button>
    </>
  );
};

export default HelpBot;

Mocht je meerdere files willen maken, dan importeer je deze in je helpbot.jsx file.

Nieuwe file title.jsx:

const Title = ({title}) => {
  return (
    <>
      <h1>{title}</h1>
    </>
  );
};

export default Title;

In helpbot.jsx:

const HelpBot = () => {
  import Title from "./title";
  console.log('React works!');

  return (
    <>
      <Title title="Dit is een title" />
    </>
  );
};

export default HelpBot;

Bron voor stap 1: https://discourse.roots.io/t/sage-10-with-react-18/24458/5