Блог экспериментатора инженера-разработчика: Infanty.
Я пишу how-to статьи на редкие темы или статьи обзоры - для себя и тех кто со мной работает.
Блог существует при поддержке: "Оккупационных сил Марса".

В рамках одного из проектов понадобилось разработать лендинг с авторизацией в панели администрирования и саму панель. При этом большая часть информации в панели администрирования должна была быть динамически обновляемой без перегрузки страницы. Ключевыми требованиями являлись: наличие поддержки мобильных браузеров и создание мобильного приложения на основе кода реализации фронтенда. К тому времени уже был реализован бэкенд с которым можно было взаимодействовать по API как из браузера (используя JavaScript), так и из мобильного или десктопного приложения. Было принято решение использовать для разработки Bootstrap и React.js в связке с React Native, Redux, Websocket и JWT.

Основы React.js и вёрстки макетов сайтов на основе функциональных компонентов не имеющих состояний

React.js можно считать наилучшей альтернативой среди средств для разработки веб-интерфейсов. Разработка на React.js заключается в описании того, что нужно вывести на страницу (это называется: декларативный подход к описанию интерфейсов). Т.е. Вам всё равно - как браузер, на программном уровне, будет выводить элементы интерфейса на страницу.

Настройка IDE и проверки кода создаваемого React.js приложения, создание базового приложения на базе CRA

Работа автоматической проверки кода проекта будет выглядеть следующим образом: в момент пре-коммита (в Git) будет запускаться lint-staged проверка в которой eslint и prettier обработают все файлы, готовящиеся к коммиту. Если проверка не будет пройдена, то не удастся совершить коммит (в Git).

Добавление в React.js приложение - SASS подобной вёрстки, используя PostCSS

PostCSS – это модульный препроцессор, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов стилей. PostCSS немного отличается от препроцессоров Sass, Less и Stylus. Самая сильная его сторона - это наличие плагинов, которые анализируют, манипулируют, добавляют или изменяют свойства и значения в CSS коде еще до того, как конечный CSS файл будет сформирован и сохранён.

Интеграция PostCSS и компонентов Bootstrap, вёрстка по методологии БЭМ

Для того, что бы использовать БЭМ и стили Bootstrap совместно - необходимо что бы CSS классы приложения названные по методологии БЭМ наследовали стили CSS классов из Bootstrap.
БЭМ расшифровывается как: Блок - Элемент - Модификатор. Данная методология применяется для именования CSS классов. По данной методологии всю HTML страницу можно разбить на независимые логические блоки.

Вёрстка макетов сайтов используя интерактивные и логические компоненты React.js: работающие с получаемыми параметрами и состояниями

Рассмотрим как:

  • как передавать в компоненты изменяемые данные для вывода - например: имя текущего пользователя для компонента шаблонизирующего блок с информацией о пользователе или текст статьи для компонента шаблонизирующего блок центральной части страницы-статьи;
  • как добавить компоненту интерактивности (работая с его состояниями) - например: показывать или скрывать часть данных компонента по нажатию кнопки;
  • как производить обмен данными между компонентами и автоматически обновлять зависимые (от текущего компонента) компоненты;
  • как добавить в компонент логику, что бы компонент получал данные с бэкенда или стороннего сайта и далее передавал их интерактивному компоненту, а тот в свою очередь на основе этих данных - отображал нужный функциональный компонент (не имеющий состояний) с передачей ему свойств из этих данных.