How create and Integrate React Project with SAP CAPM.

[avik_saha0104_28]

Hello,

I didn't find any SAP CAP application with React. It would be great if somebody can share some tips how to integrate React with SAP CAP and build teh MTA file. 

Thanks for your help.

Best Regards

Avik

[Ivan-Mirisola]

Hi avik_saha0104_28,

In addition to what my colleague Hongjun_Qian has already answered, here are some additional information:

CAPM is not opinionated on the front-end UI you choose - you are free to choose which framework you want to use.

You will need the usual:

1) Have the web app integrated via SAP App Router so you would be able to consume the OData Services you develop under the 'srv' module. 

2) Make sure the MTA builder and packager handles the pre-compilation phase required by each framework. the 'mbt' command line tool is fully capable to handle pre/post activities required by the chosen framework via mta.yaml file.

BAS already comes with templates to create project for React Web Apps. 

Please check the following tutorial:

https://community.sap.com/t5/technology-blogs-by-sap/react-development-with-sap-business-application...

You could potentially create a unified experience for SAP customers by using the UI5 Web Components for React - which will allow you to use UI5 front-end web components while still making usage of a React Application development cycle. 

There is a mission available here which explains the development of a web app using UI5 Web Components for React:

https://developers.sap.com/mission.react-spa.html

And also the accompanying video from Devtoberfest 2023:

https://www.youtube.com/watch?v=zyOxgjoSnGw

You can also find other tutorials involving React programming for BTP here:

https://developers.sap.com/tutorial-navigator.html?search=react

Best regards,
Ivan

[Hongjun_Qian]

React, Angular and Vue are famous technologies for building HTML5 applications. 

See following two blogs, it may help.

Develop and deploy a HTML (Angular/Vue/React) app ... - SAP Community

Develop and deploy a HTML (Angular/Vue/React) app ... - SAP Community