📚 前 1% 的 React 开发者使用的 8 个 repos 🏆 如何找到前 1% 的开发者使用的 repos？🔦 🪮 jsxstyle/jsxstyle 💨 alangpierce/sucrase 🎨 wooorm/refractor 🐦 transitive-bullshit/react-static-tweets 🖨️ preactjs/preact-render-to-string 🏆 bikeshaving/crank 🎯 evoluhq/evolu 📸 jest-community/snapshot-diff

2025-06-07

📚 前 1% 的 React 开发者使用的 8 个 repos 🏆

我们如何找到排名前 1% 的开发者使用的 repos？🔦

🪮 jsxstyle/jsxstyle

💨 alangpierce/蔗糖酶

🎨 wooorm/折射器

🐦 transitive-bullshit/react-static-tweets

🖨️ preactjs/preact-render-to-string

🏆 bikeshaving/crank

🎯 evoluhq/evolu

📸 jest-community/snapshot-diff

你好👋

今天，让我们来看看前 1% 的开发人员使用的8 个 React 仓库（以及您可能从未听说过的仓库）。

准备好？

图片描述

我们如何找到排名前 1% 的开发者使用的 repos？🔦

我们如何找到最优秀的开发人员使用的产品，这其中的秘诀在于大量的数据挖掘和一些非平凡的建模。

现在，在 Quira，我们根据开发人员的DevRank对开发人员进行排名。

简单来说，DevRank 使用Google 的 PageRank 算法，根据开发人员对开源存储库的贡献来衡量开发人员在开源中的重要性。

为了创建此列表，我们查看了排名前 1% 的已加星标的仓库。🌟

然后，我们计算了前 1% 的开发人员为某个 repo 加注星标的可能性与后 50% 的开发人员不为某个 repo 加注星标的可能性。

图片描述

最后，经过一番精心挑选，我们找到了以下 8 个 repos。👇

当您想要构建很酷的 Web 应用程序时，这些存储库将特别有用。

如果您有兴趣构建小型应用程序，并且喜欢应用 AI 方面，我们建议您查看 Creator Quests，这是一项开源挑战，旨在奖励使用 ChatGPT、Claude、Gemini 等创建酷炫的 GenerativeAI 应用程序的开发人员。🙃 💰

最新的 Creator Quest 挑战你使用生成式 AI 构建开发者工具。只需注册Quira并前往Quests即可参与。

目前奖池为 2028 美元，随着更多参与者的加入，奖池还会不断增加！点击下方图片，快来试试吧！⬇️

图片描述

🪮 jsxstyle/jsxstyle

不再需要从 JS 跳转到 CSS

图片描述

为什么你应该关注它？在 Web 开发中，使用 React 或 Preact，你必须为组件（例如按钮、菜单等）设置样式。传统上，这是使用单独的 CSS 文件或复杂的样式系统来完成的，管理起来既耗时又繁琐。jsxstyle 简化了这一过程，让你可以直接在 JavaScript 代码中定义样式，与组件一起定义。换句话说，这意味着你不再需要在 JS 和 CSS 文件之间来回切换。

设置：npm install jsxstyle
示例用例：您的代码可能看起来像这样。👇

<Row padding={15}>
  <Block
    backgroundColor="#EEE"
    boxShadow="inset 0 0 0 1px rgba(0,0,0,0.15)"
    borderRadius={5}
    height={64}
    width={64}
    marginRight={15}
    backgroundSize="contain"
    backgroundImage="url(http://graph.facebook.com/justinbieber/picture?type=large)"
  />
  <Col fontFamily="sans-serif" fontSize={16} lineHeight="24px">
    <Block fontWeight={600}>Justin Bieber</Block>
    <Block fontStyle="italic">Canadian</Block>
  </Col>
</Row>
Enter fullscreen mode Exit fullscreen mode

https://github.com/jsxstyle/jsxstyle

💨 alangpierce/蔗糖酶

Babel 的超快替代品

图片描述

你为什么要关心它？ Babel 是 Web 开发中广泛使用的工具，它可以将现代 JavaScript 代码转换为旧版浏览器可以理解的格式。Sucrase 是 Babel 的一个更快的替代方案。

设置：

yarn add --dev sucrase  # Or npm install --save-dev sucrase
node -r sucrase/register main.ts
Enter fullscreen mode Exit fullscreen mode

用例示例：可以直接从 JS 调用 Sucrase：


import {transform} from "sucrase";
const compiledCode = transform(code, {transforms: ["typescript", "imports"]}).code;
Enter fullscreen mode Exit fullscreen mode

https://github.com/alangpierce/sucrase

🎨 wooorm/折射器

我为您的网页代码着色，让您的生活更轻松

图片描述

为什么你应该关心它？ Refractor 很重要，因为它允许你添加高亮显示，从而增强项目的可读性；尤其是在向 Web 应用程序添加代码片段时。它允许你使用 270 多种编程语言表达代码，并且在传统的基于 HTML 的高亮显示不理想的领域（例如 CLI 表单）尤其有用。

设置：npm install refractor

用例示例：


import {refractor} from 'refractor'

const tree = refractor.highlight('"use strict";', 'js')

console.log(tree)
Enter fullscreen mode Exit fullscreen mode

产量：

{
  type: 'root',
  children: [
    {
      type: 'element',
      tagName: 'span',
      properties: {className: ['token', 'string']},
      children: [{type: 'text', value: '"use strict"'}]
    },
    {
      type: 'element',
      tagName: 'span',
      properties: {className: ['token', 'punctuation']},
      children: [{type: 'text', value: ';'}]
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

https://github.com/wooorm/refractor

🐦 transitive-bullshit/react-static-tweets

在您的网站上添加推文的最佳选择。

图片描述

为什么你应该关注它？在你的网站上添加推文是一个很酷的功能，你在许多落地页上都能看到。React Static Tweets 非常重要，因为它提供了一种在 Web 项目中嵌入推文的高效方法，与 Twitter 的标准嵌入方法相比，它提供了更快的加载时间和更好的性能。

设置：

npm install react-static-tweets static-tweets date-fns
# or
yarn add react-static-tweets static-tweets date-fns
Enter fullscreen mode Exit fullscreen mode

示例用例：

import React from 'react'
import { fetchTweetAst } from 'static-tweets'
import { Tweet } from 'react-static-tweets'

const tweetId = '1358199505280262150'

export const getStaticProps = async () => {
  try {
    const tweetAst = await fetchTweetAst(tweetId)

    return {
      props: {
        tweetAst
      },
      revalidate: 10
    }
  } catch (err) {
    console.error('error fetching tweet', err)

    throw err
  }
}

export default function Example({ tweetAst }) {
  return <Tweet ast={tweetAst} />
}
Enter fullscreen mode Exit fullscreen mode

https://github.com/transitive-bullshit/react-static-tweets

🖨️ preactjs/preact-render-to-string

以 HTML 格式呈现组件

图片描述

为什么你应该关注它？
“preact-render-to-string”是一款帮助网站更快加载并在搜索引擎中更好地显示的工具。使用 Preact 等 JS 框架构建的网站需要一段时间才能显示内容，因为浏览器必须先运行 JavaScript。这个代码库通过将组件转换为可立即使用的 HTML，在服务器端完成了繁重的工作。因此，即使网速很慢，当有人访问网站时，他们也能立即看到内容。

设置：npm install preact-render-to-string

用例示例：


import { render } from 'preact-render-to-string';
import { h, Component } from 'preact';
/** @jsx h */

// Classical components work
class Fox extends Component {
    render({ name }) {
        return <span class="fox">{name}</span>;
    }
}

// ... and so do pure functional components:
const Box = ({ type, children }) => (
    <div class={`box box-${type}`}>{children}</div>
);

let html = render(
    <Box type="open">
        <Fox name="Finn" />
    </Box>
);

console.log(html);
// <div class="box box-open"><span class="fox">Finn</span></div>
Enter fullscreen mode Exit fullscreen mode

https://github.com/preactjs/preact-render-to-string

🏆 bikeshaving/crank

Just JavaScript 框架

图片描述

你为什么要关心它？在像 React 这样的传统 Web 框架中，Web 组件只需配置一次，只有在明确指定的情况下才会更改。它们看起来像静态图像，需要手动更新。Crank.js 改变了这种情况，它允许组件根据新数据自行更新，类似于新闻滚动条自动更新新闻。这对于管理实时数据（例如体育赛事比分或产品更新）的 Web 应用尤其有用。

这个 repo 需要更多人迁移到此处才能获得关注，但它仍然是一个非常酷的 repo，值得关注。👀

设置：$ npm i @b9g/crank

示例用例：


import {renderer} from "@b9g/crank/dom";

function Greeting({name = "World"}) {
  return (
    <div>Hello {name}</div>
  );
}

renderer.render(<Greeting />, document.body);
Enter fullscreen mode Exit fullscreen mode

https://github.com/bikeshaving/crank

🎯 evoluhq/evolu

我是一个本地优先的人

图片描述

为什么你应该关注它？ Web 应用程序通常依赖于将用户数据存储在服务器上，这需要持续的互联网连接，并引发了隐私和数据安全方面的担忧。这种基于服务器的方法还意味着性能会降低，并且如果服务器出现故障或公司停止运营，还可能造成数据丢失。

Evolu 引入了“本地优先”方法，将数据直接存储在用户设备上。这意味着您的应用可以离线运行，更快地访问数据，并提供增强的隐私和安全性。如果您正在构建离线 Chrome/浏览器应用，这将非常有用。

设置：npm install @evolu/react

要开始使用它，您可以在此处找到这个出色的指南。

https://github.com/evoluhq/evolu

📸 jest-community/snapshot-diff

我比较了你的组件并强调了差异

图片描述

为什么你应该关注它？在测试 React 组件或其他 JavaScript 值时，开发人员通常会比较整个状态或输出。这意味着要处理大量数据，查找具体更改就像大海捞针。Snapshot-diff 是一款专注的比较工具，它允许你获取组件的两个不同状态（或任意两个 JavaScript 值）并直接比较它们，仅突出显示差异。

这在测试 React 组件时特别有用，因为它可以准确地指出两种状态之间发生的变化，从而更容易识别和理解代码更改的影响。

设置：yarn add --dev snapshot-diff

示例用例：默认 Jest 匹配器


const snapshotDiff = require('snapshot-diff');

test('snapshot difference between 2 strings', () => {
  expect(snapshotDiff(a, b)).toMatchSnapshot();
});

const React = require('react');
const Component = require('./Component');

test('snapshot difference between 2 React components state', () => {
  expect(
    snapshotDiff(<Component test="say" />, <Component test="my name" />)
  ).toMatchSnapshot();
});
Enter fullscreen mode Exit fullscreen mode

https://github.com/jest-community/snapshot-diff

我希望这些发现对您有价值，并有助于构建更强大的 React 工具包！⚒️

如果您想今天利用这些工具来获得奖励，我们刚刚发起了一项挑战，即使用生成式人工智能构建开发人员工具。

如果您感兴趣，请登录Quira并探索任务！💰

图片描述

最后，请考虑通过加星标来支持这些项目。⭐️

PS：我们与他们没有任何关联。我们只是认为优秀的项目值得获得高度认可。

下周见，

您的 Dev.to 好友💚

巴普

如果你想加入自称“最酷”的开源服务器😝，那就加入我们的Discord服务器吧。我们随时准备帮助你踏上开源之旅。🫶

quira 图像

奎拉

将开源变成一场正和博弈🎮
文章来源：https://dev.to/fernandezbaptiste/8-repos-used-by-the-top-1-of-react-devs-2758
Devto 翻译
PREV
如何使用 React 创建时间轴组件
NEXT
1KB前端库