Syed Suraj Basha (SyedPegaUI)
Associate Architect
SyedPegaUI Member since 2014 5 posts
Posted: March 30, 2020
Last activity: March 30, 2020
Posted: 30 Mar 2020 14:56 EDT
Last activity: 30 Mar 2020 14:57 EDT

Using React with Pega

A Case Worker portal built entirely with a React framework, using the Pega Digital Experience APIs

React Starter Pack

How you can stay in React to change styles, controls, and layouts. You’ll also see how UI elements changed using Pega’s no-code designer immediately become reflected in React without additional coding.

React (Styles, Controls and Layouts)

Installation Instructions

1.  Install Yarn. Installation link [here](https://yarnpkg.com/lang/en/docs/install/#mac-stable). 2.  Using a terminal, cd into PegaApp directory (the directory this file is in). 3.  Run the following commands:     * `yarn install`     * `yarn start` 4.  This should open your browser to http://localhost:3000, which is where the application will be served.

Then tried to modify the endpoints.js file to point the application to your server.

For example, https://{your system URL}/prweb/api/{v1}

Here, v1 is the name of the api. Search in your pega application with corresponding api name and you will get the full web address of desired system.

Pega React component

https://collaborate.pega.com/question/pega-react-component https://collaborate.pega.com/question/how-use-react-pega#comment-819526

Where we can React Components for Designer Studio

Designer Studio -> User Interface -> Gallery -> UI Elements -> React components (under Extending your Pega UI section)



***Edited by Moderator Marissa to update Content Type from Idea to Discussion***

Pega Knowledge 8.2 User Experience Cross-Industry Front-End Developer Developer Knowledge Share