New feature "Edit Template" really make React Studio much more powerful!

With Edit Template, generated code near to approach final code, I can do much more to customizing output code to make app really flexible and code structure cleaner.

But if React Studio can include “outside javascript code” into project, it make React Studio so much more fun. Because we don’t need to maintain outside code, it include in generated code make “structure of code” reliable, cleaner, manageable, easy to update.

I mean “outside js code” is code which connect to backend system or some pluggable template, lib, …



Could you check if these tips would help achieving your needs:

  1. App Settings; React template settings. You can customize the files included in the export using this feature. To get an editable copy of the default setup, first enter a subfolder’s name in the field, then click on “Write default template into folder”. You can then add files into the created folder.

  2. Plugins can also write files into exported project. They’re a good choice for something like a back-end system, because then you can use the same plugin in any project.

I have tried, but nothing happened, I have checked exported src folder also working in progress src folder but found nothing added.

Hi, as it says in the description the template folder should be written in the project file folder, not in the export folders. Please check again the folder containing the project file.

I have added add-on .js file into template inside project folder, but I don’t know how can I set it into sub folder of “exported src folder” when export to code?

can I config in order to export add-on .js file into “src/helper/APIservice.js”

it make code project structure cleaner, manageable

I have made sub folder “src/helper/APIservice.js” into template folder, but when exported, add-on js file not appear, it seem to be that you have copied it first, then overwrite it with exported code.


I think the more important thing than “put js file into sub folder” is that, some “generated code” need to call “async” function from “add-on code”.

So I take much time to edit “exported code” to adding “async (ev)” any where which call add-on “await” function.

I think if you have a choice between “async” or “none async” when create Script code is make React Studio much more helpful !

thank you

You can solve the async issue by wrapping the implementation inside an async function in a React Studio script. Your code would turn into something like this:

onClick_state0_elCompCopy3 = (ev) => {


  async function asyncCall() {
    let obj = await vzBldgResolver.mobifaDeleteMember(this.props.appActions.dataSlots['ds_member_id']);




I have another solution, after export to code, I run fixing command like following:

for i in $(grep -H -r “await helper_” src/*.js| cut -d: -f1|uniq); do
echo “fixing …$i”
gsed -i -e “s/import helper from ‘./helper/BuildingAPIService’//g” $i
gsed -i -e ‘s/helper_mobifa/helper.mobifa/g’ $i
gsed -i -e ‘s/= (ev) =>/= async (ev) =>/g’ $i
gsed -i -e ‘s///#//g’ $i

then all outside async function I can put it into a external js file.

1 Like