[英]How do I import Polaris React components?
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.
我想使用 Shopify App Bridge,这意味着使用 Polaris React 组件为 Shopify 应用创建 UI。 I am new to JS, React and npm, but followed some basic tutorials to get started.
我是 JS、React 和 npm 的新手,但遵循了一些基本教程开始。 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 .
当我在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.
我猜导入行应该是我的 js 文件中的第一行,但是当我添加导入行时,我的基本示例停止工作。 I tried installing polaris with this command: npm install @shopify/polaris --save
我尝试使用以下命令安装 polaris: npm install @shopify/polaris --save
My files before I add the import line:在添加导入行之前我的文件:
My HTML file:我的 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 test.js file:我的 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')
);
My package.json file:我的 package.json 文件:
{
"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';"当我添加“从‘@shopify/polaris’导入{AppProvider, Button};” to the top of the js file, the page cannot be rendered, but I cannot figure out why.
到js文件的顶部,页面无法呈现,但我不知道为什么。
What am I missing in order to be able to import the components?为了能够导入组件,我缺少什么?
Thanks, -Louise谢谢,-路易斯
You can import it like this:您可以像这样导入它:
import {AppProvider, Page, Card, Button} from '@shopify/polaris';
import '@shopify/polaris/styles.css';
And use it like this并像这样使用它
<AppProvider>
<Page title="Example app">
<Card sectioned>
<Button onClick={() => alert('Button clicked!')}>Example button</Button>
</Card>
</Page>
</AppProvider>
Here is a live example: https://stackblitz.com/edit/react-eaexfs这是一个活生生的例子: https : //stackblitz.com/edit/react-eaexfs
More information here: https://www.npmjs.com/package/@shopify/polaris更多信息在这里: https : //www.npmjs.com/package/@shopify/polaris
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.