How to integrate ReactJS with Magento 2 frontend

[irfanmomin]

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.

[Tom Robertshaw]

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

[jzetlen]

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!

[briankimball]

Do you have a time frame available for pwa studio?

[yehor_shytikov]

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).

[yshytikov_yshytikov]

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...

[Erwin]

 If you want to learn how to use React with Magento 2, you can use the React Magento 2 solution called GraphCommerce:

https://www.graphcommerce.org/

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

[Erwin]

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

[carmellabl3891]

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.

[deransmithb2ae]

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.