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

Я новичок в развитии веб-интерфейса, поэтому я думаю, что этот вопрос довольно простой, но я так и не смог найти ответ сам. Я хочу использовать Shopify App Bridge, что означает использование компонентов Polaris React для создания пользовательского интерфейса для приложения Shopify. Я новичок в JS, React и npm, но следовал некоторым основным учебникам, чтобы начать. Я теряюсь, когда попадаю в инструкцию "Сначала импортируй компонент в свой проект:" по адресу https://polaris.shopify.com/components/get-started. Я предполагаю, что строка импорта должна быть первой строкой в ​​моем файле js, но мой основной пример перестает работать, когда я добавляю строку импорта. Я попытался установить polaris с помощью этой команды: 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, страница не может быть отображена, но я не могу понять, почему.

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

Спасибо, Луиза

Источник

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

Источник
Другие вопросы по тегам