View source for React with JSBridge

{{Wikipedia|React (software)}} {{Bridge_TOC}}
'''React''' is a free and open-source front-end JavaScript library for building user interfaces based on components. 

[[Resco Mobile CRM]] application functionality can be extended using [[Resco JavaScript Bridge|HTML + JavaScript code]] which means you can use almost any JavaScript library, including React. Here are a few steps you need to follow to make it work.

== Create React application ==

Open the terminal (command line) and execute this line to create a new React application (replace my-app with any name which most suits your application): 

<code>npx create-react-app my-app --template typescript </code>

== Install JSBridge ==

To install JSBridge, still in the terminal, go to the folder created in the previous step (my-app) and execute this command: 

<code>npm i @resconet/jsbridge </code>

== Add homepage to package.json file ==

Open the package.json file located in the my-app folder with any text editor and add this line to it. This ensures that all the asset paths are relative to index.html:

<code>"homepage": "./", </code>

Example of a modified package.json file:

<syntaxhighlight lang="json" highlight="5">
{
  "name": "sample",
  "version": "0.1.0",
  "private": true,
  "homepage": "./",
  "dependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.14.1",
    "@resconet/jsbridge": "^16.0.4",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.38",
    "@types/react": "^18.2.14",
    "@types/react-dom": "^18.2.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}</syntaxhighlight>

== Write your React application ==

Now you can write the code for your application. 

=== JSBridge ===

To communicate with the client application, JSBridge becomes handy. Please refer to the [[Resco JavaScript Bridge|JSBridge guide]] to learn more about it. 

==== Import ====

To be able to use it in your code, import the JSBridge library in the import section of the source code files where you want to use it: 

<code>import "@resconet/jsbridge" </code>

==== Usage ====

Now you can add code to communicate with client application, e.g., to read account’s name: 

<syntaxhighlight lang="typescript">
const [name, setName] = useState(""); 
useEffect(() => { 
    MobileCRM.UI.EntityForm.requestObject( 
      function (entityForm) { 
        const entity = entityForm.entity; 
        setName(entity.primaryName); 
        return true; 
      }, 
      function (err) { 
        MobileCRM.bridge.alert("An error occurred: " + err); 
      }, 
      null 
    ); 
  }, []) 
</syntaxhighlight>

See the sample code to see the full code.

== Build your React application  ==

To build your React application, go back to the terminal and again, in your application’s folder, execute this command: 

<code>npm run build </code>

== Add your React application to MobileCRM ==

Once the build of your React application succeeds, you can add it to your mobile project and try to run it in the Resco Mobile CRM application. 

=== Pack the build ===

Your built React application is now in the ''build'' folder in your application’s folder. To easily upload it to your mobile project, zip the content of the build folder. 

=== Add to mobile project ===

# Start Woodford.
# Edit the app project where you want to add your React application.
# Select '''Offline HTML''' from the Project menu.
# (Optional) We recommended to store your React application in a dedicated folder. Click '''New Folder''', enter a name, then click '''OK'''.
# Go to the folder where you want to store the React app.
# Click '''Upload''' and select the build zip file (or drag the zip file into the Offline HTML folder).
# Save all changes.

After successful upload, your folder should look like this:

[[File:React-build-in-offline-html.png|alt=React with JSBridge: React application uploaded to Offline HTML folder|600px]]

=== Add React application to an iframe ===

You can add and run your React application to any iframe, but in this tutorial, we show how to use it on the account entity form.

# Select '''Account''' from the '''Project''' menu and click '''Show UI''' to display the list of views, forms, and charts.
# Edit a form, or create a new one.
# On the '''Tabs''' pane, double-click '''Iframe''' to add it to your form. 
# Set up your iframe:<br>[[File:React-add-iframe-to-form.png|alt=Add React to the iFrame on the form|600px]]
#* Enter a name.
#* To fill the '''URL''', click '''Browse''' and select index.html in your build folder, then click '''OK'''.
# Click '''OK''' to close the iframe configuration.
# Save all changes and publish the app project.

When you synchronize your app, your account form should now have an extra tab displayed using React.

[[File:React-content-in-the-app.png|alt=React content in the app|600px]]

== Debugging ==

To debug your React application, follow the guide about [[debugging offline HTML]]. If the build of your React application contains map files, you should be able to see and debug React code.

[[File:React-debugging.png|alt= React web debugging|600px]]

== Sample application ==

If you don't want to start developing from scratch, you can download the sample React application used in the screenshots above. It uses [https://mui.com/ Material UI]’s text field to edit the account’s name. It uses JSBridge to read and write data and colorize text fields according to the app's [[theme]].

# Download the sample from [https://docs.resco.net/mediawiki/images/f/ff/React_sample.zip here].
# Unzip the zip file.
# In the terminal, go to the application’s folder and install the required dependencies using the <code>npm i</code> command.
# Continue from section [[React_with_JSBridge#Build_your_React_application|Build your React application]].





{{Feedback}}
[[Category:Business logic]]