Coder Social home page Coder Social logo

boilerplate-react-ssr's Introduction

Boilerplate12345

Развертывание нового приложения на основе boilerplate

1. Скопировать в отдельную папку всё содержимое кроме папки .git

2. Заменить временные строки

Во всем проекте, включая этот файл, замени с учетом регистра на имя проекта:

  1. Для человеко-понятного названия: Boilerplate12345
  2. Для короткого названия, для ссылок: boilerplate12345

3. Добавить проект в новый репозиторий

4. Удалить раздел "Развертывание нового приложения на основе boilerplate" из этого README.md

Установка и запуск

Все команды запускать в папке проекта

Установка

Выполнить yarn

Запуск webpack сервера
  1. Выполнить yarn watch
  2. Открыть http://localhost:9991/

Включение eslint в IDE

Для WebStorm/PhpStorm идем в Настройки -> Languages & Frameworks -> Code Quality Tools -> ESLint

И включаем там пункты Automatic ESLint configuration и Run eslint --fix on save

Настройка обработчика ошибок Sentry

  1. Создать проект в Sentry
  2. В файле .gitlab-ci.yml заменить REPLACE_WITH_REAL_SENTRY_DSN на верный dsn и раскомментировать строку

CI/CD

Настройка выгрузки Gitlab

  1. Скопировать файл .gitlab-ci.sample.yml в .gitlab-ci.yml
  2. Файл .gitlab-ci.yml проверить на корректность и, при необходимости, исправить

Правила кода

Компонент

Для примера возьмем компонент UpperMenu.

Каждый компонент должен быть расположен в отдельной одноименной папке UpperMenu В этой папке должны быть следующие файлы:

  • UpperMenu.scss - файл со стилями для этого компонента
  • UpperMenu.tsx - собственно сам компонент
  • index.ts - файл, экспортирующий данный компонент - для того, чтобы в других компонентах при импорте UpperMenu не нужно было писать путь, включающий папку UpperMenu

Виды компонентов

В проекте мы используем такие виды компонентов:

  1. Страница - компонент, который представляет из себя отдельную страницу сайта (например главная страница, страница контактов и др.)

    Название компонентов такого типа всегда оканчивается на "Page", например "IndexPage", "DemoPage", ... Такие компоненты располагаются в src/routes.

  2. Отдельные view-компоненты - блоки, на которые разбивается страница. Такие блоки используются только в родительском компоненте и нигде более. Например, на странице "ContactsPage" может потребоваться для упрощения кода вынести блок с телефонами в отдельный компонент "PhoneNumbers"

    Такие компоненты располагаются в подпапке views родительского компонента. Например src/routes/ContactsPage/views/PhoneNumbers

  3. Общие компоненты - используются в различных родительских компонентах. Например, компонент "SideMenu" может использоваться на нескольких страницах.

    Такие компоненты располагаются в src/shared, например src/shared/SideMenu

Вёрстка по БЭМ

Вёрстка по БЭМ предполагает компонентный подход.

В нашем случае это означает, что для каждого компонента создается отдельный файл со стилями. Например, для компонента "UpperMenu" должен быть создан файл UpperMenu.scss, в котором должен быть определен блок css-классов UpperMenu, и все правила стилей должны задаваться для этого блока, его элементов и/или модификаторов.

Обновление проекта до steroids v3

  1. Запустить команду:
yarn add @steroidsjs/[email protected]
  1. Выбрать и установить последнюю версию @steroidsjs/core

  2. Запустить команду:

yarn add @steroidsjs/bootstrap @steroidsjs/webpack react react-dom @types/react @types/react-dom
  1. Изменить код в файле 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 />);
  1. Исправить ошибки typescript

boilerplate-react-ssr's People

Contributors

daria-kuzminykh avatar raaynoff avatar perlexed avatar

Watchers

Serg avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.