Get started with Industrial UI

GibboK — Fri, 10 Jul 2020 07:32:50 +0000

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! 👨‍💻

DEV Community: GibboK

Get started with Industrial UI

📦 How to set up a new project and import Industrial UI

📖 Details