有意思的是,和 在 Vue 的指南 中非常相似,我们也提供了 Geist UI 在 React 框架上的支持,包括数十个有着统一风格的组件,当然还有完善的文档支持。令人兴奋的是,所有的组件都以 React FC 的方式实现,它们都是以优雅的方案构建出的难以想象的高性能组件,也有着 React Hooks 与 Context 精彩的应用,在未来 Concurrent 受到支持时我们也会立刻考虑在它们在组件中的优化方案。就是这样,@geist-ui/react进步的,高效的,极简风格且优雅的组件库

注意:请确保你拥有最新版本的 NodeJS, 同时也需要准备 NodeJS 的包管理器 NPM 或是 Yarn

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

创建 React 项目

npx create-react-app my-app

使用 npx 命令可以在线运行命令

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

npm install @geist-ui/react

使用 npm 安装 UI 组件

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

引用组件库

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

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

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

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

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

第一个页面

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

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

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

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

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

额外的支持

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

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

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

问题和建议

Geist UI 是一个 公益性的开源项目,我们没有借助它盈利。但不用担心,项目至今为止已经开发且维护了超过一年,并且会持续地维护,你有任何的问题、想法,都可以在 这里 留言,我们很高兴看到每个新想法,即使你是一个刚刚入门的开发者,也可以帮助我们做的更好。