Skip to main content

Initialize a component

In this tutorial we'll see how to create and package a React component for Zint.

Create the repository​

To facilitate this we have a helper called create-zint-component. Let's run it :

yarn create zint-component

The helper will ask a few questions about what kind of data is expected to be sent to the component. For example, whether the data is binary or should be decoded as string, whether it should be JSON.parsed etc.

The component repository will then be created with all you need to build a component for Zint.

Component file structure​

Here is a basic description of each file and their roles:

File/folder description
src Source files of the component: These are the code that Zint will load and execute
├─ Component.tsx The main source code of your component
└─ index.js Webpack entry point for the component
test-app Source files of a mini React app that will use the component, that you can use to test and debug the component in a browser
├─ App.jsx
├─ index.html
├─ index.js
└─ testInputData.bin A binary file that contains example data that you plan to pipe into this component.
webpack.config.js The webpack config file, pre-configured to build a micro-frontend that Zint can use.
tsconfig.json TypeScript config
.babelrc babel configuration file, configured for React
package.json npm package description file

Building and Testing the component​

The repo contains a mini React app which allows to test in the browser while developing :

Start the test mini-app​

yarn start

Build the micro-frontend (production build, micro-frontend for use with Zint)​

yarn build