2

I am brand new to frontend development, so I think this question is quite basic, but I have not been able to find the answer myself though. I want to use the Shopify App Bridge which means using Polaris React components to create the UI for a Shopify App. I am new to JS, React and npm, but followed some basic tutorials to get started. I am lost when I get to the instruction "First, import the component into your project:" at https://polaris.shopify.com/components/get-started#navigation. I am guessing the import line should be the first line in my js file, but my basic example stops working when I add the import line. I tried installing polaris with this command: npm install @shopify/polaris --save

My files before I add the import line:

My HTML file:

<html>
<head>
    <link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/3.4.0/polaris.min.css" />
</head>
<body>
<div id="root"></div>

<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script  src="scripts/test.js"></script>
</body>
</html>

My test.js file:

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

ReactDOM.render(
  React.createElement(Hello, {toWhat: 'World'}, null),
  document.getElementById('root')
);

My package.json file:

{
  "name": "somename",
  "version": "1.0.0",
  "dependencies": {
    "@shopify/polaris": "^3.4.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0"
  }
}

When I add "import {AppProvider, Button} from '@shopify/polaris';" to the top of the js file, the page cannot be rendered, but I cannot figure out why.

What am I missing in order to be able to import the components?

Thanks, -Louise

4

1 回答 1

1

您可以像这样导入它：

import {AppProvider, Page, Card, Button} from '@shopify/polaris';
import '@shopify/polaris/styles.css';

并像这样使用它

<AppProvider>
    <Page title="Example app">
      <Card sectioned>
        <Button onClick={() => alert('Button clicked!')}>Example button</Button>
      </Card>
    </Page>
  </AppProvider>

这是一个活生生的例子：https ://stackblitz.com/edit/react-eaexfs

更多信息在这里：https ://www.npmjs.com/package/@shopify/polaris

于 2019-01-16T13:47:32.550 回答