在 react 中使用

React 是一个用于构建用户界面的 JavaScript 库,Fower 非常适合在 React 中使用。

安装#

npm install @fower/react -S

使用组件库组件#

使用组件库组件可以做到真正的开箱即用,无需任何配置

import { Box } from '@fower/react'

使用组件,实现一个用户信息卡片界面。

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

使用 HTML 元素#

Fower 的原子属性(Atomic Props)也可以直接在 JSX html tag 中使用。也就是到说,你直接可以在 html 标签中添加原子属性,代码类似下面:

<div p6 textXL bgRed200>  Use fower in HTML tag</div>

要在 html 标签中使用原子属性,可以通过配置 babel,为项目添加 babel preset: @fower/babel-preset-fower

.babelrc
{  "presets": ["@fower/babel-preset-fower"]}

然后,你就可以在 HTML 元素中使用原子属性了:

import React from 'react'
export default () => {  return (    <div p6 textXL bgRed200>      Use fower with Babel Preset    </div>  )}

注意,如果你想获得 TypeScript 类型提示,你需要扩展 HTML 的属性类型,方法是在项目根目录新建一个 d.ts 类型文件,名字可以为 index.d.ts,内容如下:

index.d.ts
import 'react'import { AtomicProps } from '@fower/react';
declare module 'react' {  interface HTMLAttributes<T> extends AtomicProps {}}

实例源码#

你可以查看 React 中使用的源码:examples-react