Эта статья авторизована JsmanifestLeanCloudперепечатка перевода,Оригинальная ссылка.
Как мы все знаем,React— это библиотека JavaScript для создания отличных пользовательских интерфейсов. Однако не все используют одни и те же инструменты или знают все полезные инструменты, которые помогают сделать процесс разработки React более увлекательным и активным.
Если люди еще не использовали React или у вас есть друзья, которым он интересен, как вам ответить, когда они спросят вас, почему вы выбрали эту библиотеку? В дополнение к рассказу о том, насколько великолепна эта библиотека (что следует сказать в первую очередь), я также хотел бы упомянуть, что эти инструменты, созданные сообществом открытого исходного кода, помогают вывести опыт разработки на совершенно новый и захватывающий уровень.
Вот 22 инструмента, которые вы можете использовать для создания приложений React в 2019 году (список не в порядке их важности).
1. webpack-bundle-analyzer
Вы когда-нибудь задумывались, какие пакеты или части вашего приложения занимают все пространство? Ну, мы можем использоватьwebpack-bundle-analyzerчтобы взглянуть, это поможет нам определить выходные файлы, которые занимают больше всего места.
Он создаст живой сервер и предоставит нам интерактивную визуальную древовидную карту содержимого пакета. С помощью этого набора инструментов мы можем видеть расположение отображаемых файлов, их размер gzip, размер проанализированного файла, а также родительские и дочерние файлы, которым они принадлежат.
какая польза? Мы можем оптимизировать наше приложение React на основе диаграмм, которые мы видим!
Вот скриншот:
Мы ясно видим, что пакет pdf занимает больше всего места в приложении. Он также занимает самый большой экран, что полезно для всех нас.
Однако скриншоты очень низкого качества. Мы также можем ввести полезные параметры, чтобы увидеть более подробную информацию, например, generateStatsFile: true, и, при желании, сгенерировать статический HTML-файл, чтобы сохранить его где-нибудь вне среды разработки для последующего использования.
2. React-Proto
React-Protoэто инструмент прототипирования для разработчиков и дизайнеров. Это настольное программное обеспечение, поэтому нам необходимо загрузить и установить программное обеспечение перед его использованием.
Вот стиль страницы инструментов:
Приложение позволяет нам объявлять свойства и их типы, просматривать компоненты в виде дерева, импортировать фоновые изображения, определять их как с состоянием или без состояния, определять их родительские компоненты, увеличивать/уменьшать масштаб и экспортировать прототип в новое или существующее проект.
Приложение, кажется, больше ориентировано на пользователей Mac, однако оно также поддерживает Windows.
Когда мы закончим сопоставление пользовательского интерфейса, мы можем выбрать экспорт в существующий проект или новый проект. Если вы решите экспортировать в существующий проект и выбран root, они будут экспортированы в ./src/components следующим образом:
Вот пример, где мы используем один из компонентов в примере:
React-Proto имеет 2000 звезд на GitHub.
Тем не менее, я думаю, что приложение все еще нуждается в обновлении и предстоит еще много работы, особенно с выпуском React Hooks.
Его нельзя уменьшить, если у нас нет видимого фонового изображения. Другими словами, если вы импортируете фоновое изображение, уменьшаете масштаб, а затем удаляете изображение, изображение не может быть увеличено, поскольку кнопка действия неактивна и не может быть использована.
Единственный способ увеличить масштаб — повторно импортировать фоновое изображение и удалить его после увеличения. Эта ошибка изменила мое мнение об инструменте, но поскольку я больше нигде не вижу этот файл с открытым исходным кодом, я добавил его в список. Конечно, наличие открытого исходного кода — это хорошо для этого приложения, так как это позволяет составить список популярных репозиториев с открытым исходным кодом в будущем.
3. Why Did You Render
Why Did You RenderMonkey patching React сообщает нам, что повторного рендеринга можно избежать. Это не только очень полезно, но и помогает нам исправить производительность нашего проекта и понять, как работает React. И когда мы узнаем больше о том, как работает React, это также делает нас лучшими разработчиками React.
Monkey Patch: Это название произошло от фреймворка Zope. При исправлении ошибок в Zope люди часто добавляют обновленные части в заднюю часть программы. Они называются «партизанскими патчами». Позже guerilla постепенно стали писать как gorllia (горилла), а позже написало monkey (обезьяна), поэтому название мартышкиного патча такое необъяснимое.
Мы можем добавить статическое свойство через операторwhyDidYouRender, и установите его значение равнымtrue, прикрепите прослушиватель к любому пользовательскому компоненту:
import React from 'react'
import Button from '@material-ui/core/Button'
const Child = (props) => <div {...props} />
const Child2 = ({ children, ...props }) => (
<div {...props}>
{children} <Child />
</div>
)
Child2.whyDidYouRender = true
const App = () => {
const [state, setState] = React.useState({})
return (
<div>
<Child>{JSON.stringify(state, null, 2)}</Child>
<div>
<Button type="button" onClick={() => setState({ hello: 'hi' })}>
Submit
</Button>
</div>
<Child2>Child #2</Child2>
</div>
)
}
export default App
Только после этого в нашей консоли появилось невероятно раздражающее предупреждение:
Но не поймите меня неправильно, примите это как благо. С этими раздражающими сообщениями мы можем исправить эти расточительные повторные рендеры.
4. Create React App
каждый знаетCreate React AppСамый быстрый способ начать разработку проектов React (с готовыми современными функциями).
Что моглоnpx create-react-app <name>А более простые?
Мои руководства на Medium (и Dev.to) используют приложение create-react-app для создания интерфейсов React просто потому, что это быстро и просто.
Некоторые из нас могут не знать, как использовать CRA для создания проекта TypeScript. Все, что нам нужно сделать, это добавить в конце--typescript:
npx create-react-app <name> --typescript
Это избавит нас от необходимости вручную добавлять TypeScript в проект CRA.
5. React-Lifecycle-Visualizer
React-Lifecycle-Visualizer— это пакет npm для отслеживания и визуализации методов жизненного цикла произвольных компонентов React.
Похоже, почему вы визуализировали, мы можем выбрать любой компонент для запуска визуализатора жизненного цикла:
import React from 'react'
import {
Log,
VisualizerProvider,
traceLifecycle,
} from 'react-lifecycle-visualizer'
class TracedComponent extends React.Component {
state = {
loaded: false,
}
componentDidMount() {
this.props.onMount()
}
render() {
return <h2>Traced Component</h2>
}
}
const EnhancedTracedComponent = traceLifecycle(TracedComponent)
const App = () => (
<VisualizerProvider>
<EnhancedTracedComponent />
<Log />
</VisualizerProvider>
)
Результат запуска следующий:
Однако одним из недостатков является то, что в настоящее время он работает только с компонентами класса, поэтому хуки пока не поддерживаются.
6. Guppy
GuppyЭто дружественный и бесплатный диспетчер приложений и средство запуска задач для React, которое может работать на рабочем столе и поддерживает кроссплатформенность, и вы можете с уверенностью его использовать.
Он предоставляет множество дружественных графических интерфейсов для поддержки некоторых типичных задач разработчиков React. Например, создание новых проектов, выполнение задач и управление зависимостями. И добавлена поддержка Windows в августе 2018 года, так что вы можете быть уверены, что это определенно кросс-платформенный.
Вот как выглядит Гуппи при использовании:
7. react-testing-library
мне всегда нравилсяreact-testing-library, потому что писать модульные тесты приятно. Этот пакет предоставляет практические процедуры тестирования DOM, которые поощряют передовые методы тестирования.
Это решение предназначено для решения проблемы тестирования деталей реализации, как если бы пользователь мог их видеть, а не для тестирования ввода/вывода компонентов React.
Детали реализации тестирования — неэффективный способ убедиться, что ваше приложение работает должным образом. Конечно, мы можем иметь более четкое представление о том, как получить данные, необходимые компоненту, какой метод сортировки использовать и т. д. Однако если бы нам пришлось изменить реализацию, чтобы она указывала на другую базу данных, модульные тесты завершились бы неудачей, потому что это детали реализации связанной логики.
Это проблема, которую решает библиотека react-testing-library, потому что в идеале мы просто хотим, чтобы наш пользовательский интерфейс работал и в конечном итоге отображался правильно. На самом деле не имеет значения, как данные попадают в эти компоненты, если они обеспечивают ожидаемый результат.
С этой библиотекой тестируется следующееобразец кода:
// Hoist helper functions (but not vars) to reuse between test cases
const renderComponent = ({ count }) =>
render(
<StateMock state={{ count }}>
<StatefulCounter />
</StateMock>,
)
it('renders initial count', async () => {
// Render new instance in every test to prevent leaking state
const { getByText } = renderComponent({ count: 5 })
await waitForElement(() => getByText(/clicked 5 times/i))
})
it('increments count', async () => {
// Render new instance in every test to prevent leaking state
const { getByText } = renderComponent({ count: 5 })
fireEvent.click(getByText('+1'))
await waitForElement(() => getByText(/clicked 6 times/i))
})
8. React Developer Tools
React Developer Tools— это расширение, которое позволяет просматривать иерархию компонентов React в инструментах разработчика Chrome и Firefox.
Это наиболее распространенный React для разработки расширений и один из самых полезных инструментов React, используемых разработчиками для отладки своих приложений.
9. Bit
При использовании библиотек компонентов, таких как material-ui или semantic-ui-react,Bitявляется хорошей альтернативой. Это позволяет нам исследовать тысячи компонентов с открытым исходным кодом и использовать их для создания проектов.
Существует множество различных компонентов React, которые может использовать каждый, включая вкладки, кнопки, диаграммы, таблицы, панели навигации, раскрывающиеся списки, счетчики загрузки, средства выбора даты, хлебные крошки, значки, макеты и многое другое.
Их загружают другие разработчики React, такие как вы и я.
Тем не менее, есть также доступные утилиты, такие как форматирование расстояний между датами.
10. Storybook
Если вы не знаетеStorybook, и хотите иметь возможность легко создавать компоненты пользовательского интерфейса, я настоятельно рекомендую вам использовать его прямо сейчас. Этот инструмент запускает живой сервер разработки, поддерживающий горячую перезагрузку, что позволяет нам независимо разрабатывать компоненты React в режиме реального времени.
Еще одна замечательная вещь заключается в том, что мы можем использовать существующие плагины с открытым исходным кодом, выводя наш опыт разработки на совершенно новый уровень. Например, используяStorybook READMEpackage, мы можем создать документ README на той же странице при разработке компонента React для производственного использования. Этого достаточно для обычной страницы документации:
11. React Sight
Вы когда-нибудь задумывались, как ваше приложение выглядит на блок-схеме?React -sightМожно сделать так, чтобы все приложение отображало иерархию в виде древовидной диаграммы для четкого представления нашего приложения React. Он также поддерживает React Router, Redux и React Fibre.
Используя этот инструмент, мы можем наводить курсор на узлы, которые являются ссылками на компоненты в дереве, которые непосредственно связаны с ними.
Если у вас возникли проблемы с просмотром результатов, вы можете ввести в адресной строкеchrome:extensions, найдите React Sight
поле и нажмитеAllow access to file URLsпереключиться следующим образом:
12. React-cosmos
React-cosmos— это инструмент разработки для создания повторно используемых компонентов React.
Он сканирует компоненты в проекте и может выполнять следующие функции:
-
Рендеринг компонентов с любой комбинацией свойств, контекста и состояния
-
Смоделируйте каждую внешнюю зависимость (например, ответ API, localStorage и т. д.)
-
Наблюдайте за изменениями в состоянии приложения в режиме реального времени при взаимодействии с запущенными экземплярами.
13. CodeSandbox
Это один из лучших инструментов, доступных в этой рекомендации, и он позволяет нам использовать React вручную быстрее, чем мгновение ока (ну, может быть, не так часто).
это называетсяCodeSandboxИнструмент представляет собой онлайн-редактор, и мы переходим от прототипирования к развертыванию веб-приложений — все это возможно на этом сайте!
В первые дни Codesandbox поддерживал только React, но теперь он расширился до таких библиотек, как Vue и Angular. Они также поддерживают распространенные генераторы статических сайтов, такие как gatsby или nextjs, для создания проектов для запуска следующего веб-проекта React.
Что касается codeandbox, то он не только активен, есть много интересного для обсуждения.
Если вам нужно изучить некоторые из проектов, которые люди создают для вашего удобства, щелкнув «Исследовать», вы получите легкий доступ к ряду примеров кода, которые помогут вам обновить ваш следующий проект:
Как только вы начнете редактировать проект, то поймете, что на самом деле нужно использовать мощный редактор VSCode.
Я хотел бы написать полную статью обо всех функциях, доступных сегодня в codeandbox, однако, похоже, она работает.Завершено.
14. React bits
React bitsпредставляет собой набор шаблонов, методов, советов и приемов React, написанных в формате онлайн-документации, который дает вам быстрый доступ к различным шаблонам и методам проектирования, анти-шаблонам, стилям, вариантам UX и многому другому на той же вкладке. Материал, связанный с реакцией.
у них естьРепозиторий GitHub, в настоящее время имеет 10437 звезд.
Некоторые примеры включают в себя такие понятия, как рекламное агентство, обработка различных комбинаций UX в разных сценариях и даже намеки на некоторые ловушки, которых должен избегать каждый разработчик.
Вот как это выглядит на их странице, как вы можете видеть в левом меню, там много информации :)
15. Folderize
Folderizeявляется расширением VSCode. Это позволяет нам преобразовывать файлы компонентов в структуру папок компонентов. Преобразованный компонент React по-прежнему будет компонентом, он только что был преобразован в каталог.
Например, предположим, что мы создаем компонент React, который принимает файлы в качестве свойств для отображения полезной информации, такой как их метаданные. Логика компонента метаданных занимала много строк, поэтому мы решили вынести ее в отдельный файл. Однако, когда мы решили это сделать, у нас было два взаимосвязанных файла.
Итак, если наш каталог выглядит так:
мы могли бы захотеть поставитьFileView.jsа такжеFileMetadata.jsабстрагируется в структуру каталогов, напримерApples-Таким образом, особенно если мы хотим добавить больше компонентов, связанных с файлами, таких какFileScanner.js. Это то, что папка может сделать для нас, чтобы они могли иметь такую структуру:
import React from 'react'
import FileView from './src/components/FileView'
const App = (props) => <FileView {...props} />
export default App
16. React Starter Projects
React Starter Projectsотличный список зависимостей, мы можем просмотреть все проекты на одной странице. Так что если нам будет полезно иметь возможность быстро увидеть сразу большое количество вариантов, то это для нас.
Как только мы увидим понравившийся стартовый проект, мы можем просто клонировать репозиторий и внести простые изменения, необходимые для разрабатываемого приложения. Однако не все библиотеки используются для клонирования репозиториев, так как некоторые из них необходимо установить в форме до того, как они станут зависимостями проекта. Это упрощает получение обновлений и поддержание чистоты вашего проекта.
Вот как выглядит страница:
17. Highlight Updates
Возможно, это важный инструмент, который должен быть в каждом наборе инструментов разработчика. Highlight Updates — это расширение React DevTools, позволяющее увидеть, какие компоненты на странице перерисовываются без необходимости.
Они помечают серьезные проблемы с повторным рендерингом оранжевым/красным цветом, помогая нам легче обнаружить некоторые проблемы с производительностью при разработке страницы.
Если нашей целью не является создание посредственных приложений, почему бы не попробовать это полезное средство, которое на нашей стороне.
18. React Diff Viewer
React Diff Viewer— это простая и красивая программа для просмотра различий в тексте, созданная с помощью Diff и React. Поддерживает несколько функций, таких как: разделенный экран, встроенный вид, сравнение слов, выделение строк и т. Д.
Будет очень полезно, если мы хотим встроить эту функциональность в Блокнот (например, Boostnote) и настроить ее для приложений (например, цвета темы, портфолио презентации истории и т. д.).
19. JS.coach
JS.coach— это сайт, который я часто использую для поиска материалов, связанных с React. Я не знаю, почему мало кто упоминает этот сайт, но на этой странице я нашел почти всю необходимую мне информацию, это быстро, легко и постоянно обновляется, всегда давая результаты, которые мне нужны для всех моих проектов.
Недавно они добавили вкладку React VR, это действительно здорово!
20. Awesome React
Awesome ReactБиблиотеки с открытым исходным кодом — отличный список, связанный с React.
Это заставляет меня, вероятно, забыть, что другие сайты изучают React только по этой ссылке. Потому что здесь можно найти множество полезных ресурсов, которые обязательно помогут нам создавать отличные приложения React!
21. Proton Native
Proton NativeПредоставляет среду React для всех, кто может создавать кроссплатформенные нативные настольные приложения.
Это альтернатива Electron с несколькими полезными функциями, в том числе:
-
Тот же синтаксис, что и у React Native.
-
Работает с существующими библиотеками React, такими как Redux.
-
Кроссплатформенность
-
Нативные компоненты, больше не Электрон
-
Совместим со всеми обычными пакетами Node.js.
Хотите узнать больше? Пожалуйста, прочтите ихДокументация.
22. Devhints React.js Cheatsheet
Хорошая шпаргалка по React, хотя в нем отсутствуют React Hooks. Не волнуйтесь, я создам шпаргалку для Reactv16.8+, следите за обновлениями.
В заключение
Выше перечислены все инструменты, которыми поделились на этот раз.
Надеюсь помочь вам всем.