Сегодня мы рассмотрим 8 React-репозиториев, использующихся 1% самых рейтинговых разработчиков (и о которых вы, скорее всего, никогда не слышали).

Как же мы находим то, что используют ведущие разработчики? Наш метод основан на большом количестве данных и нетривиальном моделировании. В Quine мы ранжируем разработчиков на основе их DevRank (рейтинг разработчиков).

Говоря простыми словами, DevRank использует алгоритм Google PageRank для оценки важности роли разработчика на основе его вклада в репозитории с открытым исходным кодом.

Чтобы создать этот список, мы рассмотрели репозитории, которые отметили звездами 1% лучших разработчиков. Затем мы рассчитали вероятность того, что 1% лучших разработчиков отметят репозиторий звездой, по сравнению с вероятностью того, что 50% специалистов, находящихся в нижней части рейтинга, этого не сделают.

После ручного отбора мы нашли 8 репозиториев, представленных ниже. Они будут особенно полезны, если вы хотите создавать крутые веб-приложения.

jsxstyle/jsxstyle

Больше никаких переходов от JS к CSS

Почему стоит обратить внимание? При веб-разработке с использованием 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>

Ссылка.

alangpierce/sucrase

Супербыстрая альтернатива Babel

Почему стоит обратить внимание? Babel  —  это широко используемый в веб-разработке инструмент, который преобразует современный код JavaScript в формат, понятный старым браузерам. Sucrase  —  это более быстрая альтернатива Babel.

Установка:

yarn add --dev sucrase
# или
npm install --save-dev sucrase node -r sucrase/register main.ts

Пример использования: Sucrase можно вызывать из JS напрямую.

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

Ссылка.

wooorm/refractor

Раскрасьте код веб-страницы, чтобы облегчить работу над проектом

Почему стоит обратить внимание? Refractor важен, потому что позволяет добавлять подсветку, которая улучшает читабельность проекта, особенно когда вы добавляете фрагменты кода в веб-приложение. Этот инструмент позволяет выражать код на более чем 270 языках программирования и особенно полезен в тех сферах применения, где традиционная подсветка на основе HTML не является идеальным выбором (например, в формах CLI).

Установка: npm install refractor.

Пример использования:

import {refractor} from 'refractor'

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

console.log(tree)

Результат:

{ 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: ';'}] } ] }

Ссылка.

transitive-bullshit/react-static-tweets

Лучший выбор для добавления твитов на сайт

Почему стоит обратить внимание? Добавление твитов на сайт  —  это классная функция, которую можно увидеть на многих лендинговых страницах. React Static Tweets  —  важный инструмент, так как обеспечивает высокоэффективный способ встраивания твитов в веб-проекты, предлагая гораздо более быстрое время загрузки и лучшую производительность по сравнению со стандартным методом встраивания Twitter.

Установка:

npm install react-static-tweets static-tweets date-fns
# или
yarn add react-static-tweets static-tweets date-fns

Пример использования:

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} />
}

Ссылка.

preactjs/preact-render-to-string

Рендеринг компонентов в HTML

Почему стоит обратить внимание? “preact-render-to-string”  —  это инструмент, который помогает сайтам загружаться быстрее и лучше отображаться в поисковых системах. Сайты, построенные с использованием JS-фреймворков, таких как Preact, долго отображают содержимое, потому что браузеру сначала нужно запустить JavaScript. Этот репозиторий выполняет тяжелую работу на стороне сервера, преобразуя компоненты в готовый к использованию HTML. Поэтому, когда кто-то заходит на сайт, он сразу же видит контент, даже при условии медленного интернет-соединения.

Установка: npm install preact-render-to-string.

Пример использования:

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

// Классическая работа компонентов
class Fox extends Component {
render({ name }) {
return <span class="fox">{name}</span>;
}
}

// ... а также чистых функциональных компонентов:
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>

Ссылка.

bikeshaving/crank

Полноценный JavaScript-фреймворк

Почему стоит обратить внимание? В традиционных веб-фреймворках, таких как React, веб-компоненты настраиваются один раз и изменяются только при явном указании. Они выглядят как статичные изображения, которые нужно обновлять вручную. Crank.js меняет ситуацию, позволяя виджету обновляться в ответ на новые данные, подобно новостной ленте, обновляющейся при появлении новых записей. Это особенно полезно для веб-приложений, которые управляют данными в реальном времени, например результатами спортивных мероприятий или обновлениями продуктов.

Для того чтобы этот репозиторий набрал обороты, нужно, чтобы его посещало больше людей. Это классный инструмент, за которым стоит следить.

Установка: $ npm i @b9g/crank.

Пример использования:

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

function Greeting({name = "World"}) {
return (
<div>Hello {name}</div>
);
}
renderer.render(<Greeting />, document.body);

Ссылка.

evoluhq/evolu

Ориентация на локальное хранение данных

Почему стоит обратить внимание? Веб-приложения обычно хранят пользовательские данные на серверах, что требует постоянного подключения к интернету и вызывает опасения по поводу конфиденциальности и безопасности данных. Серверный подход также означает снижение производительности и потенциальную потерю данных в случае выхода сервера из строя или прекращения деятельности компании.

Платформа Evolu реализует подход “local-first”, при котором данные хранятся непосредственно на устройстве пользователя. Это означает, что приложения могут работать в автономном режиме, имеют более быстрый доступ к данным, а также обеспечивают повышенную конфиденциальность и безопасность. Такой подход особенно полезен, если вы хотите создавать автономные приложения для Chrome/браузеров.

Установка: npm install @evolu/react.

Перед использованием этого инструмента, посмотрите гайд по ссылке.

Ссылка.

jest-community/snapshot-diff

Утилита сравнения состояний для Jest

Почему стоит обратить внимание? При тестировании компонентов 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();
});

Ссылка.

Читайте также:

Читайте нас в Telegram, VK и Дзен

Перевод статьи Bap: 8 repos used by the top 1% of React devs

Предыдущая статьяЗачем использовать HttpClientFactory вместо HttpClient в .NET
Следующая статьяЛучшие практики для эффективного кода на Golang. Часть 2