Industrial UI is a React toolkit built by Actyx, a German tech company specializing in distributed edge computing for factories.
The toolkit features over 45 components such as buttons, tabs, cards, navigation all of which have designed and tested to maximize operators' user experience and productivity in industrial environments.
GitHub project can be found here:
https://github.com/Actyx/industrial-ui
ðŠ How to set up a new project and import Industrial UI
In this mini-tutorial, you will learn how to set up a React project based on TypeScript and how to include Industrial UI.
You need to have Node.js® installed on your machine.
First of all make sure you install Create React App, which is an officially supported way to create single-page React applications.
We suggest it as it offers a modern build setup with no configuration, but you can otherwise use Industrial UI on any React TypeScript projects.
npm i -g create-react-app
In your folder of choice set up a new React project based on TypeScript:
npx create-react-app my-app --template typescript
Open the folder project and edit src/App.tsx
such:
import React from 'react';
import './App.css';
import { Typography, Button } from '@actyx/industrial-ui'
function App() {
const [text, setText] = React.useState('')
return (
<div>
<Button
variant="raised"
color="primary"
icon="announcement"
text="Say hello world!"
onClick={() => setText('Hello, World! ð')}
/>
<div>
<Typography variant="giant">{text}</Typography>
</div>
</div>
)
}
export default App;
Now run your project by using npm start
, your hello world page is visible at http://localhost:3000/
ð Details
At the top of the file we have imported Industrial UI components by using:
import { Typography, Button } from '@actyx/industrial-ui'
In the App
component, we use React hook, which lets you use state without writing a class.
const [text, setText] = React.useState('')
Variable text
will contain a string with our message, and function setText()
will be used to change the value of text
.
Add a Button component from Industrial UI, you can choose between different colors and styles, please reference our documentation.
<Button
variant="raised"
color="primary"
icon="announcement"
text="Say hello world!"
onClick={() => setText('Hello, World! ð')}
/>
The onClick
property accept a function callback, which will set variable text
via setText()
.
Simply show the content of our variable text
in a nice typography element.
<Typography variant="giant">{text}</Typography>
And that is! You just learn how to include Industrial UI in a new project. ð
For more information about Industrial UI API please refer to the documentation.
If you want to learn a modern way of digitizing factory processes, build and run apps on a secure, performant decentralized edge platform with no servers, no brokers, no datacenter, please visit Actyx website.
Happy coding! ðšâð»
Top comments (0)