【公式】Polaris
Visual Studio Code への拡張機能のインストール
Visual Studio Code でPolarisで検索して[Polaris for VS Code]をインストールします。
Reactへインストール
【公式】github.com/Shopify/polaris
$ npm install @shopify/polaris --save
スタイルシートをインポートします。
import '@shopify/polaris/build/esm/styles.css';
トランスレーションと必要な要素をインポートします。
import enTranslations from '@shopify/polaris/locales/ja.json';
import {AppProvider, Page, Card, Button} from '@shopify/polaris';
サンプルコード
ReactDOM.render(
<AppProvider i18n={enTranslations}>
<Page title="Example app">
<Card sectioned>
<Button onClick={() => alert('Button clicked!')}>Example button</Button>
</Card>
</Page>
</AppProvider>,
document.querySelector('#app'),
);
実行結果