-
-
Notifications
You must be signed in to change notification settings - Fork 85
Example: ReactJS
This is a quick introduction on how you can use Node-red, uibuilder and react all together.
Open a terminal/command prompt, cd to your node-red project
npm install node-red-contrib-uibuilder reactjs --save
Add the following to your ~/.node-red/settings.js file:
uibuilder: {
userVendorPackages: ['reactjs'],
debug: true
}
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 },
/*Reactstuff*/
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { findDOMNode } from 'react-dom';
import uibuilder from '../../libs/uibuilder/uibuilderfe.js'
class UserData extends Component{
constructor(props){
super(props)
this.state = {
msg:'payload Hello World',
UIBuilderVersion: '',
webSocket : '',
msgReceived : '',
controlMsgReceived : '',
msgSent : '',
lastMsgReceived : '',
lastCtlMsgReceived : '',
lastMsgSent : ''
}
uibuilder.onChange('msg', (newVal) => {
this.setState({
msg: newVal
})
this.forceUpdate();
console.info("console.info: " + JSON.stringify(newVal))
})
uibuilder.onChange('msgsReceived',(newVal) =>{
console.info('New msg sent to us from Node-RED over Socket.IO.TotalCount:',newVal)
this.setState({
msgReceived: newVal
})
this.forceUpdate();
})
//IfSocket.IOconnects/disconnects
uibuilder.onChange('ioConnected',(newVal) =>{
console.info('Socket.IOConnectionStatusChanged:',newVal)
this.setState({
webSocket: newVal
})
this.forceUpdate();
})
//IfamessageissentbacktoNode-RED
uibuilder.onChange('msgsSent',(newVal) =>{
console.info('New msg sent to Node-RED over Socket.IO.TotalCount:',newVal)
this.setState({
msgSent: newVal
})
this.forceUpdate();
})
//IfwereceiveacontrolmessagefromNode-RED
uibuilder.onChange('msgsCtrl',(newVal) =>{
console.info('New control msg sent to us from Node-RED over Socket.IO.TotalCount:',newVal)
this.setState({
controlMsgReceived: newVal
})
this.forceUpdate();
})
// //Manually send a message back to Node-RED after 2 seconds
// window.setTimeout(function(){
// console.info('Sending a message back to Node-RED-after2sdelay')
// uibuilder.send({'topic':'uibuilderfe','payload':'I am a message sent from the uibuilder front end'})
// },2000)
}
render(){
return(
<div ref="root"style={{height:"50vh"}}>
<div>{'msg: ' + this.state.msg.payload}</div>
<div>{'msg Received: ' + this.state.msgReceived}</div>
<div>{'control MsgReceived: ' + this.state.controlMsgReceived}</div>
<div>{'msg Sent: ' + this.state.msgSent}</div>
<div>{'last Msg Received: ' + this.state.lastMsgReceived}</div>
<div>{'last Ctl Msg Received: ' + this.state.lastCtlMsgReceived}</div>
<div>{'last Msg Sent: ' + this.state.lastMsgSent}</div>
</div>
);
}
componentWillUnmount(){
this.state.ui.destructor();
this.state.ui=null;
}
shouldComponentUpdate(){
//ascomponentisnotlinkedtotheexternaldata,thereisnoneedinupdates
return false;
}
}
export default UserData
import UserData from './scenes/UserData'
class App extends Component {
render() {
return (
<div className="App">
<UserData title="User Data">
</UserData>
</div>
);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React Ui</title>
</head>
<body>
<div id="app">
<h1>
Welcome to REACT-UIbuilder for Node-RED!
</h1>
</div>
<div id="root">
<div id="app">
</div>
</div>
</body>
</html>
node-red-project/node_modules/node-red-contrib-uibuilder/nodes/src'-> src/libs/uibuilder/
my-app/build -> 'Node-red-project/uibuilder/uibuilderNodeName/dist
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.
Please feel free to add comments to the page (clearly mark with your initials & please add a commit msg so we know what has changed). You can contact me in the Discourse forum, or raise an issue here in GitHub! I will make sure all comments & suggestions are represented here.
-
Walkthrough 🔗 Getting started
-
In Progress and To Do 🔗 What's coming up for uibuilder?
-
Awesome uibuilder Examples, tutorials, templates and references.
-
How To
- How to send data when a client connects or reloads the page
- Send messages to a specific client
- Cache & Replay Messages
- Cache without a helper node
- Use webpack to optimise front-end libraries and code
- How to contribute & coding standards
- How to use NGINX as a proxy for Node-RED
- How to manage packages manually
- How to upload a file from the browser to Node-RED
-
Vanilla HTML/JavaScript examples
-
VueJS general hints, tips and examples
- Load Vue (v2 or v3) components without a build step (modern browsers only)
- How to use webpack with VueJS (or other frameworks)
- Awesome VueJS - Tips, info & libraries for working with Vue
- Components that work
-
VueJS v3 hints, tips and examples
-
VueJS v2 hints, tips and examples
- Dynamically load .vue files without a build step (Vue v2)
- Really Simple Example (Quote of the Day)
- Example charts using Chartkick, Chart.js, Google
- Example Gauge using vue-svg-gauge
- Example charts using ApexCharts
- Example chart using Vue-ECharts
- Example: debug messages using uibuilder & Vue
- Example: knob/gauge widget for uibuilder & Vue
- Example: Embedded video player using VideoJS
- Simple Button Acknowledgement Example Thanks to ringmybell
- Using Vue-Router without a build step Thanks to AFelix
- Vue Canvas Knob Component Thanks to Klaus Zerbe
-
Examples for other frameworks (check version before trying)
- Basic jQuery example - Updated for uibuilder v6.1
- ReactJS with no build - updated for uibuilder v5/6
-
Examples for other frameworks (may not work, out-of-date)
-
Outdated Pages (Historic only)
- v1 Examples (these need updating to uibuilder v2/v3/v4/v5)