Javascript 如何导入北极星组件？_Javascript_Reactjs_Shopify_Polaris

Javascript 如何导入北极星组件？

javascript reactjs shopify

Javascript 如何导入北极星组件？,javascript,reactjs,shopify,polaris,Javascript,Reactjs,Shopify,Polaris,我对前端开发是全新的，所以我认为这个问题很基本，但我自己还没有找到答案。我想使用Shopify应用程序桥，这意味着使用Polaris React组件为Shopify应用程序创建UI。我对JS、React和npm都是新手，但我还是按照一些基本教程开始学习。当我看到指令“首先，将组件导入到您的项目中：”时，我迷路了。我猜导入行应该是js文件中的第一行，但是我的基本示例在添加导入行时停止工作。我尝试使用以下命令安装polaris： npm安装@shopify/polaris--保存添加导入

我对前端开发是全新的，所以我认为这个问题很基本，但我自己还没有找到答案。我想使用Shopify应用程序桥，这意味着使用Polaris React组件为Shopify应用程序创建UI。我对JS、React和npm都是新手，但我还是按照一些基本教程开始学习。当我看到指令“首先，将组件导入到您的项目中：”时，我迷路了。我猜导入行应该是js文件中的第一行，但是我的基本示例在添加导入行时停止工作。我尝试使用以下命令安装polaris： npm安装@shopify/polaris--保存

添加导入行之前我的文件：

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

My 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}from'@shopify/polaris'；”添加到js文件的顶部时，页面无法呈现，但我无法找出原因

为了能够导入组件，我缺少了什么

谢谢，

-Louise

您可以这样导入它：

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>


此处的更多信息：谢谢，但我仍然无法让它工作-当我尝试按照第二个链接中的说明操作时，添加导入时页面将不再呈现。添加导入后我必须做什么-我应该运行一些npm命令吗？我只是在本地打开我的HTML文件，我也试着在开发服务器上运行它，但没有任何运气。它在开发人员上运行，但在生产环境下运行。有什么想法吗？
<AppProvider>
    <Page title="Example app">
      <Card sectioned>
        <Button onClick={() => alert('Button clicked!')}>Example button</Button>
      </Card>
    </Page>
  </AppProvider>