import Layout from 'lib/components/layout'
import { Code, Spacer, Dot, Tabs, Snippet, Text } from 'components'

export const meta = {
  title: '安装',
  group: '快速上手',
  index: 10,
}

## 安装

### 配置

请确认你的 [NodeJS](https://nodejs.org/zh-cn/download/) 处于最新版本，
并已有包管理器: [NPM](https://www.npmjs.com/) 或是 [Yarn](https://yarnpkg.com/)。

此外，Geist 是基于 React 框架的组件库，这意味着您也必须了解如何 [创建项目](https://zh-hans.reactjs.org/docs/hello-world.html) 与框架基础知识。

<h4>
  <Dot type="success">安装依赖</Dot>
</h4>

<Tabs initialValue="yarn" hideDivider hideBorder align="flex-end" mt="-46px">
  <Tabs.Item label="Yarn" value="yarn">
    <Snippet>yarn add @geist-ui/core</Snippet>
  </Tabs.Item>
  <Tabs.Item label="Npm" value="npm">
    <Snippet>npm i @geist-ui/core</Snippet>
  </Tabs.Item>
</Tabs>
<Spacer h={0.5} />
<h4>
  <Dot type="success">添加引用</Dot>
</h4>

```jsx
// NAME: /src/app.js
import { GeistProvider, CssBaseline } from '@geist-ui/core'

export default () => (
  <GeistProvider>
    <CssBaseline /> // --> 基础样式
    <AppComponent /> // --> 你的根组件
  </GeistProvider>
)
```

<Spacer h={0} mb="8px" />
<h4>
  <Dot type="success">使用组件</Dot>
</h4>

```jsx
import { Button, Page, Text } from '@geist-ui/core'

const Home = () => (
  <Page>
    <Text h1>Home Page</Text>
    <Button>Submit</Button>
  </Page>
)
```

### CRA 项目

[create-react-app](https://github.com/facebook/create-react-app) 是创建 React 项目最常见的脚手架，它可以大幅度减少用户配置工具链的时间。
对于所有 CRA 类项目，用户都不用做任何配置变更，只需引入组件库即可。

此外，这里有一个在 CRA 上使用 Geist 的完整 [项目示例](https://github.com/geist-org/react-getting-started) 供作参考。

### Next.js 项目

[Next.js](https://nextjs.org/) 是一个 React 服务端渲染框架。在 Next.js 上使用 Geist 需要定制 `_app.jsx` 文件，
项目初始化完成后，可在 `/pages` 文件夹下添加 `/pages/_app.jsx` 文件并补充下述内容。

```jsx
// NAME:pages/_app.jsx
import { GeistProvider, CssBaseline } from '@geist-ui/core'

const App = ({ Component, pageProps }) => {
  return (
    <GeistProvider>
      <CssBaseline />
      <Component {...pageProps} />
    </GeistProvider>
  )
}

export default App
```

如果你需要在 Next.js 项目中应用服务端渲染，请参考 [服务端渲染](/zh-cn/guide/server-render) 小节完成配置。

此外，我们也提供了一个完整的 [Next.js 应用](https://github.com/geist-org/geist-ui/blob/master/examples/create-next-app/README.md) 示例以供参考。

<Text h3>
  在 Windows 上渲染字体{' '}
  <Text span type="secondary" font=".75em" style={{ textTransform: 'uppercase' }}>
    [可选的]
  </Text>
</Text>

Web 应用中的一些字体在 _Windows_ 平台上无法得到最好的渲染效果，
或是你认为一些字符集没有得到最好的渲染 (如中文字符)，
在这类场景下，你可以额外引入字体库来优化渲染效果：

> 不需要修改任何 CSS 文件或是声明字体。

#### 安装 `inter-ui`

<Snippet>yarn add inter-ui</Snippet>

#### 添加 `Inter Font` 到你的项目中:

<Code block my={0} width="100%">
  <span className="token keyword module">import</span>{' '}
  <span className="token string">'inter-ui/inter.css'</span>
</Code>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
