App.js

import React from 'react';

import { Page, Card } from '@shopify/polaris';
import { Form, FormLayout, TextField, Button } from '@shopify/polaris';

class App extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { apiKey, shopOrigin } = window;

        // choose view

return (
<Form>
  <Card title="Creating a new Supplier" sectioned>
    <FormLayout>
      <FormLayout.Group>
        <TextField
          label="Supplier Name"
          value="test"
          id="name"
          name="name"
        />
      </FormLayout.Group>

      <FormLayout.Group>
        <TextField
          label="Notes"
          value=""
          id="notes"
          name="notes"
          multiline
          helpText="This field expands on new lines! Write as much as you need!"
        />
      </FormLayout.Group>

      <FormLayout.Group>
        <TextField
          label="Carriage"
          value=""
          id="carriage"
          name="carriage"
          type="number"
          prefix="£"
        />

        <TextField
          label="Lead Time"
          value=""
          id="leadtime"
          name="leadtime"
          type="number"
          suffix="Days"
          step="1"
        />
      </FormLayout.Group>

      <FormLayout.Group>
        <Button submit primary>
          Create Supplier
        </Button>
      </FormLayout.Group>
    </FormLayout>
  </Card>
</Form>
)

    }
}

export default App;

index.js

import * as React from 'react';
import { render } from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import App from './App';

import { AppProvider } from '@shopify/polaris';

function renderApp() {
    const { apiKey, shopOrigin } = window;

    render(
        <AppContainer>
            <AppProvider shopOrigin={shopOrigin} apiKey={apiKey}>
                <App />
            </AppProvider>
        </AppContainer>,
        document.getElementById('root')
    );
}

renderApp();

if (module.hot) {
    module.hot.accept();
}

package.json

{
  "name": "products",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cross-env NODE_ENV=production webpack --config ./config/webpack.config.js --progress --profile --colors --optimize-minimize",
    "prod": "cross-env NODE_ENV=production npm run start",
    "dev": "cross-env NODE_ENV=development npm run start",
    "start": "node ./bin/www"
  },
  "dependencies": {
    "@shopify/polaris": "^2.0.0",
    "@shopify/shopify-express": "1.0.0-alpha.6",
    "chalk": "^2.4.1",
    "connect-redis": "^3.3.3",
    "cross-env": "^5.1.5",
    "express": "^4.16.3",
    "express-session": "^1.15.6",
    "isomorphic-fetch": "^2.2.1",
    "moment": "^2.22.1",
    "multer": "^1.3.0",
    "mysql": "^2.15.0",
    "prop-types": "^15.6.1",
    "pug": "^2.0.3",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "shopify-api-node": "^2.14.0",
    "webpack-hot-middleware": "^2.22.1",
    "webpack-middleware": "^1.5.1"
  },
  "devDependencies": {
    "autoprefixer": "^8.1.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.10",
    "eslint": "^4.18.2",
    "eslint-plugin-prettier": "^2.6.0",
    "global": "^4.3.2",
    "postcss-loader": "^2.1.1",
    "prettier": "^1.11.1",
    "react-hot-loader": "^4.0.0",
    "style-loader": "^0.20.2",
    "webpack": "^4.1.0",
    "webpack-dev-server": "^3.1.0",
    "webpack-cli": "^2.0.11"
  }
}