Как настроить профессиональный проект React (включая скринкаст)
Выделите свой профиль на Github
16.03.2022
Все, что вам нужно знать о React 18 RC
17.03.2022
Профессиональная разработка React (серия из 3 частей)
1Самый популярный стек React Tech в 2022 году
2Кричащая архитектура — эволюция структуры папок React
3Как настроить профессиональный проект React (включая скринкаст)
Когда вы запускаете новое приложение React, вы можете задаться вопросом, как настроить его профессионально. Какие инструменты следует использовать? Какие библиотеки вам нужны с самого начала?
Основываясь на самом популярном стеке технологий React, эта статья проведет вас через настройку нового приложения с использованием
- Next.js
- Typescript
- ESLint
- Prettier
- styled-components
- Cypress
- Storybook
В видео ниже показано, как настроить приложение для предстоящего Bootcamp для разработчиков React-самоучек именно с этим техническим стеком. Скринкаст почти не редактировался, чтобы показать весь процесс, а не только отшлифованный результат. Если вам нужно краткое руководство, вы можете найти все шаги по настройке на этой странице.
Next.js и TypeScript
Next.js — это фреймворк для React. Он имеет множество полезных функций, таких как рендеринг на стороне сервера, которые важны для многих профессиональных приложений. Многие разработчики склонны использовать его для любого нового проекта React.
Эта команда создает новое приложение Next.js с использованием TypeScript. (Не стесняйтесь удалять эту --typescriptопцию, если вам уже слишком много нужно узнать.)
|
1 2 3 4 |
npx create-next-app@latest --typescript |
Вам будет предложено ввести имя проекта и менеджер пакетов по вашему выбору с npm.
Примечание: если вы планируете разместить проект на GitHub, вы можете переименовать
masterветку сmainпомощью этой команды:git branch -m master main
ESLint
В приложении Next.js уже настроен ESLint, который используется для обнаружения ошибок путем статического анализа кода.
На мой взгляд, правила по умолчанию, которые поставляются с Next.js, недостаточно строгие. Например, неиспользуемые переменные не вызывают ошибки. Стандартный набор правил, который можно найти в документации ESLint , — это eslint:recommended. Мы можем расширить его в eslintrc.jsonфайле конфигурации.
|
1 2 3 4 5 6 7 8 9 |
{ "extends": [ "next/core-web-vitals", "eslint:recommended" ] } |
Prettier
Prettier используется для автоматического форматирования кода в соответствии со стандартом. Это делает ваш код более читабельным и экономит много ручных усилий.
Вы можете использовать плагин Prettier для своей IDE. Использовалось VS Code и его расширение Prettier со следующими настройками для автоматического форматирования при сохранении файла.
Чтобы интегрировать Prettier с ESLint , вы можете использовать eslint-config-prettierи добавить его в свою eslintrc.jsonконфигурацию. Таким образом , вы не получите конфликтов между Prettier и ESLint.
|
1 2 3 4 |
npm install --save-dev eslint-config-prettier |
|
1 2 3 4 5 6 7 8 9 10 |
{ "extends": [ "next/core-web-vitals", "eslint:recommended", "prettier" ] } |
Приложение Next.js по умолчанию не использует формат Prettier. Запустите npx prettier --write, чтобы отформатировать все файлы.
Стилизованные компоненты
styled-components — очень популярная библиотека для написания пользовательского CSS. Next.js не поддерживает его из коробки, но этот официальный пример репозитория показывает нам, как его настроить. Сначала устанавливаем библиотеку.
|
1 2 3 4 |
npm install styled-components |
Затем добавляем styledComponents: trueк компилятору опцию в next.config.jsфайл.
|
1 2 3 4 5 6 7 8 9 |
const nextConfig = { reactStrictMode: true, compiler: { styledComponents: true, }, }; |
Кроме того, нам нужно создать pages/_document.tsxфайл, чтобы избежать «вспышки нестилизованного контента» при начальной загрузке страницы в соответствии с примером репозитория .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
import Document from "next/document"; import { ServerStyleSheet } from "styled-components"; import type { DocumentContext } from "next/document"; export default class MyDocument extends Document { static async getInitialProps(ctx: DocumentContext) { const sheet = new ServerStyleSheet(); const originalRenderPage = ctx.renderPage; try { ctx.renderPage = () => originalRenderPage({ enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />), }); const initialProps = await Document.getInitialProps(ctx); return { ...initialProps, styles: ( <> {initialProps.styles} {sheet.getStyleElement()} </> ), }; } finally { sheet.seal(); } } } |
Вот и все. Чтобы использовать глобальные стили, ThemeProviderвам нужно отредактировать файл, pages/_app.tsxкак показано здесь .
Cypress
Cypress — это инструмент, который обычно используется для написания сквозных тестов (это означает, что он тестирует всю систему от внешнего интерфейса до базы данных, как настоящий пользователь).
Для настройки снова очень полезна документация Next.js. Сначала мы устанавливаем Cypress.
|
1 2 3 4 |
npm install --save-dev cypress |
Затем мы добавляем "cypress": "cypress open"в scriptsраздел в нашем package.jsonфайле.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ ... "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "cypress": "cypress open" }, |
Наконец, запустите npm run cypressдля инициализации проекта. Это создаст несколько папок и демо-тестов в вашем репозитории. Затем открывается пользовательский интерфейс Cypress, где вы можете запустить демонстрационные тесты.
Когда вы откроете тестовые файлы, вы поймете, что ESLint жалуется на то, что глобальные функции вроде бы describeили itне существуют. Чтобы избавиться от этих ошибок, мы можем установить плагин ESLint и настроить eslintsrc.jsonфайл конфигурации.
|
1 2 3 4 |
npm install eslint-plugin-cypress --save-dev |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ "extends": [ "next/core-web-vitals", "eslint:recommended", "prettier" ], "plugins": ["cypress"], "env": { "cypress/globals": true } } |
Storybook
Storybook — это инструмент, широко используемый для документирования и визуального тестирования компонентов пользовательского интерфейса. Согласно документам, нам сначала нужно инициализировать или проецировать.
|
1 2 3 4 |
npx sb init |
Затем запустите сборник рассказов. Откроется новая вкладка браузера, где вы сможете поиграть с некоторыми демонстрационными компонентами.
|
1 2 3 4 |
npm run storybook |
Пользуйтесь советами, если пока не можете делать настройки самостоятельно. Все получится!
Источник статьи: http://dev.to/
