Tutorial using create-react-app
Build a simple app using ux4iot in development
Last updated
Was this helpful?
Build a simple app using ux4iot in development
Last updated
Was this helpful?
Use to bootstrap your React application:
Add the dependency:
Edit the file src/App.js
and add the imports:
At the top, add the initialization of the ux4iot instance:
You can retrieve the connection string from the Azure Portal:
Replace the existing App
component with this:
By creating the Context here, all sub-components (like MyView
) can use the ux4iot hooks. Now, add the MyView
component:
Your App.js
should now look like this:
As usual with create-react-app
you can start the application with:
If you do not already have an IoT devices sending data, you can easily simulate one. First, create a device with device ID simulated-device
in the IoT Hub:
Now copy the connection string for the device.
This will publish a random value of the temperature
telemetry. The messages look like this:
You should now see the value reflected in your React application.
Use .env
and .env.local
files to store your app's environment variables. Read more about that in
With the connection string you can start a simulator using Docker by invoking the following command. (The GitHub repo of the simulator can be found .)