How to create custom React component in Backendless UI

UI Builder
1

Hello,

As Backendless team says, Backendless supports React. But I’m not sure how to use React components in Custom Code in UI to create custom elements. For example, I would like to create a Button with and Icon from react-native-elements:

import { Button } from ‘react-native-elements’;
import Icon from ‘react-native-vector-icons/FontAwesome’;

<Button
icon={

}
title=“Button with icon component”
/>

But it doesn’t work like that. Something similar I found in How to create a PDF document in the Backendless
where Mark explains how to use an external PDF creation component. But he does it via backend API services. The example shows that we should download the project, install the external module with npm command and then deploy the service.
But what if I don’t want to use API service? Should I use it just to be able to install an external React component? Or is there an easier way to use React native components in Backendless UI?

Thank you

2

Hello @Evgeniy_Volkov

Thanks for your question!
First of all, let me explain a couple of basic principles of the UI-Builder and custom components

  1. Yes, an app built with UI-Builder is based on React
  2. it uses RequireJS for loading modules in runtime
  3. it doesn’t use any build-system like Webpack, Parcel, etc. it means each module (js file) has to be able to run in a web browser without any additional js code parser/compiler
  4. since it doesn’t use any js compiler it supports only plain JS, you can not use JSX or TypeScript and so on.
  5. each UI-Container can contain any folders/files inside, so you can put them and then use them in CustomComponents or in CustomCode (codeless block)

Now answering your question: in order to use a React module from NPM you should follow these points

  1. the module has to be adapted to run in a browser without any extra transformation, which means the module has to be already built, frequently you can find the composed file in your-npm-module/dist/index.js
  2. you can require it over CDN, check this out https://unpkg.com/
  3. or you can put the module straight into your custom component and then require it by relative path
  4. in the bundle.js file of a custom component you can use JSX, instead, it must be a plain js, take a look at this doc https://reactjs.org/docs/react-without-jsx.html
  5. when you create a new Custom Component there is a combo-box with a few options, you can play around with all of them to see how they work

The Custom Component feature is quite new and we still working on improving it, so if have proposals and/or suggestions feel free to let us know we will be glad to discuss

Regards, Vlad