cancel
Showing results for 
Search instead for 
Did you mean: 

PWA react components and libraries with Page Builder

PWA react components and libraries with Page Builder

Can you use react components and libraries with Page Builder? I found this article below but doesn't mention how to use react components with Page Builder. Is there any docs on how to use already made react components in page builder with PWA studio?

 

https://cedcommerce.com/blog/magento-pwa-studio-and-other-leading-pwa-development-tools-for-magento/...

1 REPLY 1

Re: PWA react components and libraries with Page Builder

Hello @nickwhawkr4637 

 

  • To use React components with Page Builder in Magento 2, please follow the steps below:
    • Create a React component:
      • First, create a React component that you want to use in Page Builder. You can create the component using a build tool like Webpack or create-react-app.
    • Bundle the React component:
      • Once you have created the React component, bundle it into a single JavaScript file. This can be done using a build tool like Webpack.
    • Upload the JavaScript file to Magento:
      • Upload the bundled JavaScript file to your Magento server, either by FTP or through the Magento admin panel.
    • Register the JavaScript file in Magento:
      • To make the JavaScript file available to Page Builder, you need to register it in Magento. This can be done by creating a new module and adding the JavaScript file to the module's view/frontend/web directory.
    • Add the React component to Page Builder:
      • Finally, you can add the React component to a Page Builder layout using the "Custom Content" element. In the "Custom Content" element, select the "HTML" option and insert a <script> tag that references the JavaScript file you uploaded in Step #3. Then, add the React component to the page by calling it in the <script> tag.
      • Here's an example of how the <script> tag might look:
        <script type="text/javascript" src="https://example.com/js/my-react-component.js"></script>
        <script type="text/javascript">
          // Call the React component
          ReactDOM.render(
            React.createElement(MyReactComponent, null),
            document.getElementById('my-react-component')
          );
        </script>
        <div id="my-react-component"></div>
      • In this example, MyReactComponent is the name of the React component, and my-react-component is the ID of the HTML element where the component will be rendered.

By following the above steps, you can use React components with Page Builder in Magento 2.

 

If you find our reply helpful, please give us kudos.

 

A Leading Magento Development Agency That Delivers Powerful Results, Innovation, and Secure Digital Transformation.

 

WebDesk Solution Support Team

Get a Free Quote | | Adobe Commerce Partner | Hire Us | Call Us 877.536.3789

Thank You,


WebDesk Solution Support Team
Get a Free Quote | Email | Adobe Commerce Partner | Hire Us | Call Us 877.536.3789


Location: 150 King St. W. Toronto, ON M5H 1J9