Example: ReactJS

Example: ReactJS

This is a quick introduction on how you can use Node-red, uibuilder and react all together.

1. Install ReactJS & uibuilder using npm

Open a terminal/command prompt, cd to your node-red project

npm install node-red-contrib-uibuilder reactjs --save

2. Add reference for ReactJS to settings.js

Add the following to your ~/.node-red/settings.js file:

uibuilder: {
    userVendorPackages: ['reactjs'],
    debug: true
}

3. Init your uibuilder folder and create your reactjs project

a. Create a uibuilder node name it react_ui and deploy (you can choose automatic creation of .html and .css files) b. 'cd uibuilder' c. mkdir src d. 'cd src' e. Install react in here (https://reactjs.org/tutorial/tutorial.html) npm install -g create-react-app create-react-app my-app f. cd my-app g. IMPORTANT, in your react package file, add "hostpage":"/react_ui" h. In your setting file of node-red, add the following: uibuilder: { userVendorPackages: ['reactjs'], debug: true },

Note [Important]

TODO Need to fix line 161 in uibuilderfe.js (uibuilderfe.min.js) For now, you can only comment the line manually... for the project to compile.