Как импортировать компоненты Polaris React? - PullRequest
Новая
       35

Как импортировать компоненты Polaris React?

0 голосов
/ 16 января 2019

Я новичок в разработке веб-приложений, поэтому я думаю, что этот вопрос довольно простой, но я не смог найти ответ сам, хотя. Я хочу использовать Shopify App Bridge, что означает использование компонентов Polaris React для создания пользовательского интерфейса для приложения Shopify. Я новичок в JS, React и npm, но следовал некоторым основным учебникам, чтобы начать Я теряюсь, когда попадаю в инструкцию «Сначала импортируй компонент в свой проект:» на https://polaris.shopify.com/components/get-started#navigation. Я предполагаю, что строка импорта должна быть первой строкой в ​​моем файле js, но мой основной пример перестает работать, когда я добавляю строку импорта. Я попытался установить полярис с помощью этой команды: npm install @ shopify / polaris --save

Мои файлы перед добавлением строки импорта:

Мой HTML-файл: 

<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>

Мой файл test.js: 

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')
);

Мой файл package.json: 

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

Когда я добавляю "import {AppProvider, Button} из '@ shopify / polaris';" к началу файла js страница не может быть отображена, но я не могу понять, почему.

Чего мне не хватает, чтобы можно было импортировать компоненты?

Спасибо, -Louise

1 Ответ

0 голосов
/ 16 января 2019

Вы можете импортировать это так: 

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

...