npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

guui-react

v0.0.24

Published

[![CircleCI](https://circleci.com/gh/jrg-team/guui-react.svg?style=svg)](https://circleci.com/gh/jrg-team/guui-react)

Downloads

84

Readme

谷UI

CircleCI

原则

  1. 所有组件不得存储数据(state),只能从外部接受数据(props),并把数据的变化用事件的形式发出(event)。如果一定要存储数据,必须由用户开启此功能。
  2. 所有组件不得将容器的样式(尤其是宽高和zIndex)写死,必须可以接受外部 CSS 的覆盖。
  3. 分支覆盖率不得低于 90%。
  4. 除了 react、react-dom 和 prop-types,不得有其他外部依赖

命名

  1. 普通变量只能用名词,如 let user = {...} 对,let getUser = {...} 错
    1. 不允许添加 info、data 后缀,如 userInfo 错,userData 错
  2. 布尔变量只能有下面几种形式
    1. 形容词,如 active
    2. be 动词接名词,如 isAdmin
    3. 动词的完成态(也就是动词的ed形态),如 created, destroyed, broken
    4. has 接名词,如 hasChildren
    5. 介词接名词,如 inCache
  3. 函数
    1. 无参数函数用不及物动词,如 die()
    2. 有参数函数用及物动词,如 remove(id)
    3. 回调函数用介词(before、after、on)加动词或动词的名词形式,如 onClickButton、afterAnimation
      1. 不推荐用 handleClick
    4. getter/setter用名词形式,如 person.name
    5. 钩子函数跟 React 风格统一,用表时态的动词,如 willAnimate, didAnimate
  4. 缩写
    1. 禁止任何缩写,如 cnt 错,cls 错,btn 错,str 错
    2. 如果某个缩写是行业共识,则可以使用,如 html、dom
      1. 但是如果这些缩写需要大写,请只大写第一个字母,如 renderHtml 对,renderHTML 错
    3. 禁止用 2 表示 to,如 string2Date 必须写成 stringToDate

如何开发

  1. cd guui-react
  2. yarn start, 打开 http://localhost:8080
  3. 脚手架
    1. 创建函数组件 yarn task create fc tabItem
    2. 创建类组件 yarn task create c tabItem
  4. 打开 example.tsx 添加路由和组件的展示代码