Apq/semi-design: 快速搭建美观的 React 应用。由抖音前端与 UED 团队维护。 @ main-pr

category: Getting Started title: Quick Start subTitle: Quick Start icon: doc-gettingstarted localeCode: en-US

order: 2

1. Installation of Semi

# with npm
npm i @douyinfe/semi-ui

# with yarn
yarn add @douyinfe/semi-ui

# with pnpm
pnpm add @douyinfe/semi-ui

2、Use components in a modular way 💫

import React, { Component } from 'react';
import { Button, Toast } from '@douyinfe/semi-ui';

class Demo extends React.Component {
    constructor() {
        super();
    }

    render() {
        return <Button onClick={() => Toast.warning({ content: 'welcome' })}>Hello Semi</Button>;
    }
}

It is recommended to introduce reset.css into the project, which can avoid introducing the default style of the browser.

Use UMD import in browser

We do not recommend using the built file directly, as this will introduce all components in full and cannot be loaded on demand. But if there is indeed a need for non-construction scenarios, you can quote in the following ways

Use script and link tags to import files directly in the browser, and use the global variable SemiUI、SemiIcons、SemiIllustrations

Please make sure you have import react and react-dom in advance
Import the JS file, the following example URL 2.0.0 is the version identifier, if you want to use a different version of Semi, just replace the corresponding value in version (note that the build file is only available after v1.3.0)
- semi-ui min：https://unpkg.com/@douyinfe/[email protected]/dist/umd/semi-ui-react.min.js
- semi-ui normal: https://unpkg.com/@douyinfe/[email protected]/dist/umd/semi-ui-react.js
- semi-icons min: https://unpkg.com/@douyinfe/semi-icons@latest/dist/umd/semi-icons.min.js
- semi-icons normal: https://unpkg.com/@douyinfe/semi-icons@latest/dist/umd/semi-icons.js
- semi-illustrations min: https://unpkg.com/@douyinfe/semi-illustrations@latest/dist/umd/semi-illustrations.min.js
- semi-illustrations normal: https://unpkg.com/@douyinfe/semi-illustrations@latest/dist/umd/semi-illustrations.js

Import the CSS style file of the Semi default theme

https://unpkg.com/@douyinfe/[email protected]/dist/css/semi.css

https://unpkg.com/@douyinfe/semi-icons@latest/dist/css/semi-icons.css

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
+       <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
+       <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

+       <script src="https://unpkg.com/@douyinfe/[email protected]/dist/umd/semi-ui-react.min.js"></script>
+       <link rel="stylesheet" href="https://unpkg.com/@douyinfe/[email protected]/dist/css/semi.css">

+       <script src="https://unpkg.com/@douyinfe/semi-icons@latest/dist/umd/semi-icons.min.js"></script>
+       <link rel="stylesheet" href="https://unpkg.com/@douyinfe/semi-icons@latest/dist/css/semi-icons.css">
+       <script src="https://unpkg.com/@douyinfe/semi-illustrations@latest/dist/umd/semi-illustrations.min.js"></script>

</head>
<body>
<div id="root"></div>
</body>
</html>

<script type="text/babel">
const { Input, Button, Toast, Icon, Form } = SemiUI;
const { IconHome } = SemiIcons;
const { IllustrationConstruction } = SemiIllustrations;
ReactDOM.render(
<div>
<Button onClick={() => Toast.warning({ duration: 0, content: 'Semi Design' })}>test</Button>
<Input defaultValue="semi" onChange={value => Toast.info('abc')}></Input>
<IconHome size="large" />
<IllustrationConstruction style={{width: 150, height: 150}} />
</div>, document.getElementById("root"));
</script>

4、Use in Next.js

Step1

Install @douyinfe/semi-next in the project root directory.

# with npm
npm i @douyinfe/semi-next --save-dev

# with yarn
yarn add @douyinfe/semi-next --dev

# with pnpm
pnpm add @douyinfe/semi-next --dev

Step2

Create next.config.js in the project root directory and configure it.

// next.config.js
const semi = require('@douyinfe/semi-next').default({/* the extension options */});
module.exports = semi({
    // your custom Next.js configuration
});

[Detailed documentation]() of @douyinfe/semi-next.

Step3

Introduce the full amount of semi css in global.css. Currently, on-demand introduction is not supported.

/* styles/globals.css */
@import '~@douyinfe/semi-ui/dist/css/semi.min.css';

index-en-US.md 5.1 KB 永久連結 文件歷史 原始文件