cancel
Showing results for 
Search instead for 
Did you mean: 

How to integrate ReactJS with Magento 2 frontend

How to integrate ReactJS with Magento 2 frontend

Hello Everybody,

 

Anybody know how ReactJS we can integrate with Magento 2 Frontend files? 
And How we can convert files to JS while we use the ReactJS?

 

Please let me know here!

Thanks,
Irfan Momin.

9 REPLIES 9

Re: How to integrate ReactJS with Magento 2 frontend

I think that this is probably a larger question than can be  answered on the magento forums but there are a few in the community working on these kinds of solutions that you could read up on, e.g. https://www.youtube.com/watch?v=ElZ5UtTXpzQ

----
If you've found one of my answers useful, please give "Kudos" or "Accept as Solution" as appropriate. Thanks!

Re: How to integrate ReactJS with Magento 2 frontend

Hi, Irfan. Your question is eerily timely.

 

I should first say that lots of really talented and skilled people in our community have made React-based custom frontends for Magento 2. Our PWA Studio project is going to make React-powered Progressive Web Applications a standard part of Magento 2. That will make it easier to learn, build, and maintain modern Magento stores. It will run React by default, and support a modern pipeline for you to use your choice of custom tooling (e.g. TypeScript or Flow or Less or Sass, if you want them). And our goal is to support the same level of customization, extensibility, and support that you're used to from Magento. So of course, since it's my project, I'm gonna suggest that you use it when it becomes available!

 

If you choose not to wait for more of our PWA efforts to emerge, and build in React today, you can definitely achieve the same level of success as some of our outstanding community projects; but you'll have to blaze your own trail, and stores in your React system will take more advanced developer time to maintain or upgrade. But that's not necessarily a deterrent, just a choice!

 

Re: How to integrate ReactJS with Magento 2 frontend

Do you have a time frame available for pwa studio?

Re: How to integrate ReactJS with Magento 2 frontend

Integrate React and Magento 2 relay easy. You should use this  module - https://github.com/Genaker/reactmagento2.

This module integrates Magento 2 with WebPack for React and JSX compilation. This module provides auto deployment and overloads Magento page if you bundle js file has changes (live reload).

Re: How to integrate ReactJS with Magento 2 frontend

There is a good example of the Magento 2 Module build with the ReactJS

 

https://github.com/Genaker/Magento_ReactJS_Example_Module_Game

 

And Mageno theme Luma React with the ReactJS UI components:

 

https://github.com/Genaker/Luma-React-PWA-Magento-Theme

 

There is a article how to use ReactJS with Magento

 

https://yegorshytikov.medium.com/magento-2-reactjs-ui-components-how-to-use-react-with-magento-in-th...

 

 

 

Re: How to integrate ReactJS with Magento 2 frontend

 If you want to learn how to use React with Magento 2, you can use the React Magento 2 solution called GraphCommerce:
 
It is an open-source React, Next.js storefront for Magento 2 / Adobe Commerce. The stack includes:

 

  • Typescript
  • React
  • Next.js
  • Mui
  • Adobe Commerce
  • GraphCMS
 
 

Re: How to integrate ReactJS with Magento 2 frontend

You can also take a look at this React Next.js Magento 2 demo store

Re: How to integrate ReactJS with Magento 2 frontend

To integrate ReactJS with Magento 2 frontend, follow these steps:

 

  1. Set up a development environment with Node.js and npm.
  2. Create a new ReactJS application.
  3. Customize and build React components.
  4. Configure the Magento 2 theme to load the ReactJS app.
  5. Establish communication between Magento 2 and ReactJS using APIs or GraphQL.
  6. Test and deploy the integrated solution. This integration allows you to enhance the frontend of your Magento 2 store with ReactJS components and functionalities.

Re: How to integrate ReactJS with Magento 2 frontend

Beyond their technological prowess, K2 Snowboard boots are a visual delight. With sleek designs and attention-grabbing graphics, these boots allow riders to express their individual style on the mountain.