Монорепозиторий с React, Typescript, Tailwind

Лучший интерфейсный стек для веб-приложения сейчас (июль 2021 г.).

Если вы начинаете новый проект среднего размера и можете выбрать любой интерфейсный стек. Что бы вы выбрали?

Возможно, вы уже поняли мой ответ, глядя на название статьи. В этой статье рассказывается, почему я выбрал стек MRTT и как его настроить.

Битва больших пушек (React vs Angular vs Vue)
Хотя это заслуживает отдельной статьи, я хочу подытожить, почему я предпочитаю React другим.
Проще говоря, преимущества React перевешивают недостатки.
Angular сам по себе хорош для больших команд. Однако он настолько самоуверенный и тяжелый, что иногда становится утомительно работать с ним в качестве разработчика. Так что давайте исключим Angular.
React, легкий и открытый Vue , становится лучшим претендентом на то, чтобы заложить основу любого проекта. Однако, поскольку Vue неэффективен для управления структурой уровня предприятия, он исключает сложности из гонки.
Победитель: React

Что и почему Монорепо?
На такой замечательной платформе, как React, мы стремимся создавать библиотеки. Наличие этих библиотек в качестве разных репозиториев затрудняет обслуживание, а развертывание может стать обременительным. С Monorepos все библиотеки приложения могут использовать один источник для общих компонентов или модальных окон, что может сэкономить много времени и усилий. Поскольку все больше внимания уделяется качеству кода, процесс проверки так же важен, как и само тестирование. С Monorepo рецензенту сразу же представляются все вовлеченные изменения, что снова экономит его время, ускоряя процесс рецензирования. Все, что экономит время, приносит прибыль в индустрии программного обеспечения. Итак, Монорепо = бабла.

Почему Машинопись?
Сам по себе React очень силен, он гибкий, настраиваемый и простой в кодировании. Однако очень скоро код может стать беспорядочным из-за единственного файла для шаблона, CSS и структуры JS. По мере увеличения количества разработчиков в команде становится очень сложно поддерживать качество кода. Следовательно, мы вводим Машинопись. Его строго структурный характер побуждает разработчиков быть похожими на свой код, но отличаться от логики. Улучшенный IntelliSense, доступ к более новым версиям ES, использование интерфейса Type и т. Д. Похожи на вишню на торте.

Теперь установка Monorepo, React + Typescript довольно проста. Для этого мы будем использовать Nx. Это отличный инструмент для создания ваших Monorepos и управления ими. Он предоставляет шаблоны для большинства языков программирования. Мы будем использовать его для React, но с небольшим добавлением Typescript.

Установить Nx

npm i nx

npx create-nx-workspace --preset=react --template=typescript

Уууу, пора попутный ветер?
Tailwind (Tailwind CSS) - это новая библиотека стилей, созданная с учетом современных веб-сайтов, то есть компонентности. Он имеет обширный список классов, а его способность настраивать классы прямо в HTML делает его очевидным выбором для использования с React. Он легче, и я не думаю, что нам больше нужно переносить отзывчивость на такие фреймворки, как Bootstrap (благодаря Flexbox, Grid layout).

Добавление Tailwind в Monorepo и его использование в приложении

Установите Tailwind и зависимости в корневую папку

npm i tailwindcss autoprefixer postcss postcss-cli postcss-nested -D

1.
Создайте файл tailwind.config.js в каталоге apps / {{appName}} и скопируйте в него приведенное ниже содержимое. В этот файл вы сможете добавлять плагины Tailwind и вносить изменения в будущем.

module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}','./public/index.html'],
darkMode: false,
theme: {
    extend: {}
  },
  variants: {
    extend: {}
  },
  plugins: [],
};

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
};

@tailwind base;
@tailwind components;
@tailwind utilities;

Ура, настройка стека MRTT завершена, поэтому продолжайте фиксировать код: D
Я создал репо на случай, если он вам понадобитсяhttps://github.com/samyadh/mrtt

Ссылки:
Nx:https://nx.dev/
Попутный ветер: https://tailwindcss.com/
Reckonsys: https://www.reckonsys.com/

Понравилась статья? Хочешь поговорить со мной? Нажмите на ссылку ниже
https://samyadh.github.io/