Agrh! Now I remember why I gave up on REACT!
This will take me longer to do that it will probably take you to fix so let me explain and hopefully that will be enough to get you going.
Before I do though, are you sure you want to use REACT? Because I can tell you it is much more complex to get started with than VueJS is even putting aside uibuilder.
Well anyway, here is what you need:
Install uibuilder from the Node-RED palette menu
add the "vue" example from the import menu
change the name and url in the resulting node to something helpful to you
Use uibuilder's library manager to install
reactjs. Actually, you can skip this for now if you like and use REACT direct from CDN
index.html using uibuilder's source code editor and replace the VueJS example with a simple REACT example such as the one in the link above. Make sure that works.
Add the uibuilderfe library to
index.html library by including the following link:
uibuilder.start() somewhere that will be triggered once REACT is loaded and running.
Finally, you will want to create a function that listens for incoming messages from Node-RED, you can do that with the following example. I think it should go just below wherever you put
console.log('[uibuilder.onChange] Updated count of received msgs:', msg)
Once all of that is working, you can play with the code and see how uibuilder works.
Once you understand the basics, the next step would be to configure a build step because REACT examples very rarely come without needing one. So configure webpack or similar in the root folder for your node instance.
That is to say, if you have installed Node-RED the normal way and on Linux & if you are not using Node-RED projects and have given uibuilder a URL of
reactjs, then you will need access to your servers filing system at
~/.node-red/uibuilder/reactjs. That folder contains 2 sub-folders
src. Your front-end code as discussed above should be in the
src folder. Configure webpack to build into the
dist folder & configure it for REACT. Then you can use a more standard REACT example such as the one in the WIKI, run your build and everything should just work since uibuilder should now ignore the
src folder and load everything from the
dist folder automatically.
Hoping this makes some sense?
If so and you get things working, I'd love to get a copy of your code and webpack configuration so that I can create a workable WIKI entry.