Geist UI 是一个优雅美观,拥有浓厚 Geek 风格的 React 组件库。

借助 Geist 在文字排版、明暗表达、伸缩组件等诸多别具一格的优势,你可以轻易创建简洁有力的个人站点,或是基于高度可定制化设计系统快速构建现代化 Web 应用。

对于用户来说,使用 Geist 并不需要你有非常丰富的 React 开发经验,如果你只是希望搭建一个 Blog 系统、项目主页,通常能够在几分钟内完成。

为了轻易的和任何 React 项目接轨,也作为简易的示范,我们使用受到社区广泛应用的脚手架 create-react-app 创建通用项目。即便你的项目并非此脚手架创建,也能以此通用项目作为参考,非常简单的使用 Geist UI

创建 React 项目

npx create-react-app my-app

安装成功后可运行 npm start 确认。现在只需要将 @geist-ui/core 组件库安装至项目即可:

npm install @geist-ui/core

至此为止我们已经准备好了基础项目。如果你是初学者,在这一步遇到困难,可以在 这里 留下你的问题。

引用组件库

src/index.js 中,我们添加基础的 Context 支持 GeistProvider 到根组件下,同时别忘了引入组件 CSSBaseline,它提供基础的样式重置与声明,类似于你熟知的 normalize.css

// ...
import { GeistProvider, CssBaseline } from '@geist-ui/core'

ReactDOM.render(
  <React.StrictMode>
    <GeistProvider>
      <CssBaseline /> // 基础样式组件
      <App />
    </GeistProvider>
  </React.StrictMode>,
  document.getElementById('root'),
)

你可以在 示例项目 中查看这次的代码变更,以确保完成了引入工作。

是的,@geist-ui/core 没有任何 .css 文件,我们把每个组件的样式分发给组件本身,你完全无需考虑样式的问题。这在你未来需要统一定制主题风格时非常有帮助,甚至能帮助你在服务端渲染时获的最佳效果。有关定制主题等高级内容,你可以参阅 如何定制主题的文档

第一个页面

在最初使用组件库时,完全可以不必知晓组件的属性与用法。现在可以清理 src/app.js 的内容,添加一些 Geist UI 组件先试试:

// ...
import { Card, Code, Note, Spacer } from '@geist-ui/core'

function App() {
  return (
    <div className="app">
      <Card>
        hello, world. I am using <Code>@geist-ui/core</Code> !
      </Card>
      <Spacer h={1.5} />
      <Card shadow>
        <Note type="success">This note details something important.</Note>
      </Card>
    </div>
  )
}

我们添加了一些基础的组件,现在运行 npm start 就可以在页面中看到不错的效果。到此为止我们似乎做的不错,运用 Geist UI 构建了一个简单的页面。你可以在 示例项目 中查看这次的提交。

想要了解更多的组件?你可以看看 Geist - UI React 的 官方文档

额外的支持

Geist 还默认提供了一套非常易于使用的黑暗模式,当你切换到黑暗模式时,所有的组件、文字、色彩都会自动的跟随变化,现在你所看到的博客页面就使用了它,点击下方的图标按钮可以预览效果。

当然,任何时候你都可以自定义所有的样式变量,这包括主题与单个组件。同时,在自定义这些基础变量时也无需担心过多的重复渲染 (re-render),Geist 只会重新渲染那些你自定义过的色彩、间距或其他表现力参数,我们在样式的框架设计上充分利用了 React API 提供的 memoizeddiff,在你的页面获得最佳表现力时也确保了性能与体验。

最后,Geist 完整且优先的提供 Server Render 支持,你所见的博客与我们的文档都是由服务端预渲染所完成,你可以在 这里了解如何配置