Во всем проекте, включая этот файл, замени с учетом регистра на имя проекта:
- Для человеко-понятного названия:
Boilerplate12345
- Для короткого названия, для ссылок:
boilerplate12345
Все команды запускать в папке проекта
Выполнить yarn
- Выполнить
yarn watch
- Открыть http://localhost:9991/
Для WebStorm/PhpStorm идем в Настройки
-> Languages & Frameworks
-> Code Quality Tools
-> ESLint
И включаем там пункты Automatic ESLint configuration
и Run eslint --fix on save
- Создать проект в Sentry
- В файле
.gitlab-ci.yml
заменитьREPLACE_WITH_REAL_SENTRY_DSN
на верный dsn и раскомментировать строку
- Скопировать файл
.gitlab-ci.sample.yml
в.gitlab-ci.yml
- Файл
.gitlab-ci.yml
проверить на корректность и, при необходимости, исправить
Для примера возьмем компонент UpperMenu
.
Каждый компонент должен быть расположен в отдельной одноименной папке UpperMenu
В этой папке должны быть следующие файлы:
UpperMenu.scss
- файл со стилями для этого компонентаUpperMenu.tsx
- собственно сам компонентindex.ts
- файл, экспортирующий данный компонент - для того, чтобы в других компонентах при импортеUpperMenu
не нужно было писать путь, включающий папкуUpperMenu
В проекте мы используем такие виды компонентов:
-
Страница - компонент, который представляет из себя отдельную страницу сайта (например главная страница, страница контактов и др.)
Название компонентов такого типа всегда оканчивается на "Page", например "IndexPage", "DemoPage", ... Такие компоненты располагаются в
src/routes
. -
Отдельные view-компоненты - блоки, на которые разбивается страница. Такие блоки используются только в родительском компоненте и нигде более. Например, на странице "ContactsPage" может потребоваться для упрощения кода вынести блок с телефонами в отдельный компонент "PhoneNumbers"
Такие компоненты располагаются в подпапке
views
родительского компонента. Напримерsrc/routes/ContactsPage/views/PhoneNumbers
-
Общие компоненты - используются в различных родительских компонентах. Например, компонент "SideMenu" может использоваться на нескольких страницах.
Такие компоненты располагаются в
src/shared
, напримерsrc/shared/SideMenu
Вёрстка по БЭМ предполагает компонентный подход.
В нашем случае это означает, что для каждого компонента создается отдельный файл со стилями. Например, для компонента
"UpperMenu" должен быть создан файл UpperMenu.scss
, в котором должен быть определен блок css-классов UpperMenu,
и все правила стилей должны задаваться для этого блока, его элементов и/или модификаторов.
- Запустить команду:
yarn add @steroidsjs/[email protected]
-
Выбрать и установить последнюю версию @steroidsjs/core
-
Запустить команду:
yarn add @steroidsjs/bootstrap @steroidsjs/webpack react react-dom @types/react @types/react-dom
- Изменить код в файле src/index.tsx на этот
import * as React from 'react';
import {createRoot} from 'react-dom/client';
import Application from './Application';
const root = createRoot(document.getElementById('root'));
root.render(<Application />);
- Исправить ошибки typescript