Обзор библиотек и инструментов, к которым я постоянно возвращаюсь
Вступление
Как некоторые из вас, возможно, уже знают, я был старшим разработчиком полного цикла более 20 лет. Мне повезло, что я работаю в одной из крупнейших мировых компаний-разработчиков программного обеспечения.
Сегодня я перечислю одиннадцать моих любимых инструментов и библиотек для работы с приложениями React. Большинство из них - это инструменты, на которые я однажды наткнулся и которые никогда не прекращаю использовать.
Я считаю приведенный ниже список своим личным набором инструментов. Они перечислены в произвольном порядке.
Давайте взглянем!
Имена классов
Крошечный пакет classnames - один из моих любимых. Это помогает вам определять имена динамических классов для ваших элементов. Все мы объединили строки различными способами, чтобы динамически определять имена классов для наших элементов:
Classnames позволяет нам условно объединять имена классов. Функция преобразует строки и объекты в одну строку:
Пакет оптимизирован для повышения производительности и имеет более шести миллионов загрузок в неделю. Я использую его во всех своих приложениях и демонстрациях для своих статей.
Модули CSS
Модули CSS просто необходимы в моих проектах. Они сразу работают с популярными фреймворками, такими как CRA (Create React App) и Next.js, если вы используете правильные имена файлов и устанавливаете необходимые зависимости.
Обычно вы можете импортировать CSS следующим образом:
Но есть проблема с этим подходом: имя класса card никоим образом не имеет области видимости или пространства имен. Он может легко конфликтовать с другими компонентами или сторонними библиотеками. Представьте себе импорт и использование сторонней библиотеки, такой как Bootstrap или Semantic-UI. Если одна из этих библиотек предоставляет имя класса с таким же именем (.card), мы можем столкнуться с проблемами. Это может даже произойти, и мы этого не заметим.
И, разумеется, вы можете позже создать другой компонент в своем репозитории с тем же именем класса, не помня, что вы уже использовали имя класса card. Беда впереди!
Если мы используем модули CSS в сочетании с сборщиком модулей, таким как Webpack (используется, например, CRA), мы генерируем уникальные имена классов для наших классов CSS:
За исключением имени файла (по соглашению используется *.module.css) наш файл CSS идентичен в обоих примерах. Но его импорт с использованием приведенного выше синтаксиса приведет к созданию уникального («ограниченного») имени класса:
<div class="card_1hWc8">...</div>
Это особенно полезно, если вы публикуете свои компоненты как библиотеку. Но и при локальной настройке это предотвратит непредвиденные проблемы.
Машинопись
Обожаю TypeScript. Сначала меня это немного ошеломило. Я думал, что это было сложно, и это усложняло мою жизнь вместо того, чтобы приносить пользу. Ошибки было трудно исправить (в то время они были очень загадочными), и было не так много библиотек, для которых были определены их типы.
Осмелюсь сказать, что TypeScript сейчас очень зрелый. Но что это? Подумайте об этом так: это JavaScript с необязательной статической типизацией. Действительно, необязательно, потому что обычный JavaScript также является полностью допустимым кодом TypeScript.
TypeScript - это инструмент статического набора текста, который поможет ограничить количество совершаемых вами ошибок. Простой пример лучше всего проиллюстрирует это - представьте, что у нас есть объект в нашем состоянии:
Мы сохраняем этот объект в нашем состоянии и внедряем его в другие компоненты ниже в нашем дереве компонентов. Затем мы собираемся прочитать и использовать значения нашего объекта data. Обычно нам нужно помнить (или, чаще, искать), какие свойства имеет объект: name, age и country. Три свойства запомнить несложно, но что, если у нашего объекта 15 свойств?
Вот где в игру вступает TypeScript. Мы можем ввести наш объект, чтобы наша IDE (например, VSCode, PhpStorm и т. Д.) Знала тип объекта:
Теперь при передаче объекта данных наша IDE знает о двух вещах: какие свойства имеет объект (например, автозаполнение) и какие типы имеют значения этих свойств. Если бы я попытался манипулировать объектом данных следующим образом:
data.age = "Fifty years";
TypeScript сразу сообщит нам, что это невозможно. Свойство age имеет тип number, и этому конкретному свойству могут быть присвоены только числа.
Помните, что нам не нужно явно вводить все наши значения и код. TypeScript довольно умен - он может автоматически извлекать типы из вашего кода. Как уже упоминалось, вводить текст необязательно - это может обогатить ваш существующий код. Это не совершенно новый язык программирования, это надмножество JavaScript. Это JavaScript с небольшими дополнительными возможностями (статическая типизация).
При этом есть некоторая кривая обучения. Но как только вы освоитесь с этим, это облегчит вашу жизнь программирования.
Sass (Scss)
Сделайте себе одолжение и забудьте о попутном ветре. Я аргументировал это в своей недавней статье:
Я понимаю, что это сильное мнение, но придерживаюсь его. На мой взгляд, более выгодно (особенно в долгосрочной перспективе) изучать обычный CSS и использовать препроцессор, такой как Sass (CSS со сверхспособностями).
Sass великолепен. Он делает именно то, что рекламирует: он делает CSS более привлекательным. Одним из примеров является то, что вы можете вкладывать свои классы, что делает ваш код CSS более организованным:
В небольшом фрагменте выше вы также видите, как мы можем определять и использовать переменные и как мы можем расширить класс, используя знак амперсанда (&).
Помимо простого примера, приведенного выше, Sass может предложить гораздо больше. Я призываю вас изучить их документацию.
Такие фреймворки, как CRA и Next.js, предлагают поддержку прямо из коробки. Но вам нужно установить реализацию Sass самостоятельно. sass рекомендуется, но есть и альтернативные реализации.
Семантический интерфейс-реакция
Сразу скажу, мы не используем semantic-ui-react в нашей компании. Но это очень практичный набор компонентов (кнопки, сетки, таблицы, значки и т. Д.), Которые можно использовать для быстрого прототипирования чего-либо. И именно для этого я его использую. Большинство моих статей на Medium сопровождаются репозиториями, содержащими небольшие приложения и демонстрации, содержащие компоненты Semantic-UI.
Документация отличная, и ее легко настроить для использования в вашем проекте:
$ yarn add semantic-ui-react semantic-ui-css
Redux
Когда ваше приложение увеличивается в размерах, вам действительно нужно правильное управление состоянием. Два примера преимуществ специализированных инструментов управления состоянием - это то, что ваш код становится проще тестировать, а ваше состояние легче сохранять.
Я предпочитаю Redux (и рядом с ним Redux Toolkit) всему остальному. Как и любое мнение, это субъективно, но я могу подтвердить его, упомянув, что мы используем Redux в очень больших приложениях React без каких-либо проблем. Это обеспечивает ясность в наших репозиториях, чего нельзя было бы достичь с помощью хуков и решения для внедрения зависимостей, такого как React Context. Если вы хотите узнать больше об этой теме, подумайте о прочтении другой статьи, которую я написал ранее в этом году:
Хотя перехватчики React и Context иногда невероятно полезны, они не могут обеспечить такую же функциональность и зрелость для более крупных приложений, которые вы можете достичь с помощью Redux.
Luxon (Управление датой и временем)
На протяжении многих лет мы с удовольствием и успешно использовали известную библиотеку Moment.js для манипулирования датой и временем. Однако во второй половине 2020 года разработчики Moment сочли проект унаследованным. Он не мертв, но уже готов и больше не получает новых функций.
Они рекомендуют использовать альтернативные, более легкие библиотеки, которые лучше охватывают сегодняшние собственные API-интерфейсы браузеров. Их рекомендация номер один - Люксон.
Luxon можно рассматривать как эволюцию Moment. Автором его является Исаак Камброн, давний участник Moment.
- Сопровождающие Moment.js
Я написал две статьи о Luxon, подробно объяснив часовые пояса и саму библиотеку. Это первая статья из этой серии:
Другие инструменты и библиотеки
В заключение я перечислю пару других моих любимых инструментов и библиотек, которые не требуют особого представления, потому что вы, вероятно, уже слышали о них. Вместе с инструментами, которые мы уже обсуждали, они составляют мои любимые библиотеки, фреймворки и инструменты, доступные сегодня.
Создать приложение React (CRA)
Если вы раньше использовали React, вероятно, вы уже использовали CRA. Это скелет для любого нового проекта, и в нем есть некоторые готовые функции, такие как горячая перезагрузка, модули CSS и многое другое. По сути, это очень хорошо предварительно сконфигурированная установка Webpack. Если вы используете npx (рекомендуется) при запуске команды create-response-app, убедитесь, что вы всегда будете использовать самую последнюю и лучшую версию:
$ npx create-react-app MyApp
Next.js
Если вы уже знакомы с CRA, я настоятельно рекомендую попробовать Next.js. На мой взгляд, это шаг вперед, и действительно, этому нетрудно научиться. Я, наверное, скоро напишу об этом отдельную статью.
Next.js также является каркасом для ваших приложений React и имеет такие функции, как SSR (рендеринг на стороне сервера), поддержка TypeScript, маршрутизация на основе файлов и многое другое.
Я не могу рекомендовать его достаточно сильно - я предпочитаю его конкурентам, таким как Gatsby, поэтому попробуйте.
Webpack
И CRA, и Next.js используют Webpack в фоновом режиме для транспилирования и объединения модулей. Если вы часто используете эти инструменты, вероятно, будет разумным узнать немного больше о тонкостях самого Webpack. Поначалу настройка Webpack кажется сложной задачей, но как только вы усвоите основные принципы, все будет не так сложно. Тем не менее, это определенно одна из самых сложных вещей, которые можно выучить из всех инструментов, описанных в этой статье.
Webpack со всеми его плагинами - очень мощный инструмент.
Нетлифай
Если вы ищете бесплатный хостинг для своих (POC) приложений, не ищите дальше. Использование Netlify - это настоящий взрыв, и ваши приложения будут запущены в мгновение ока. Сделать еще один шаг, подключив одно из ваших доменных имен к их инфраструктуре, тоже несложно. Мой опыт работы с Netlify только положительный.
Вот и все! Мои личные фавориты в мире JavaScript и React. Использование этих инструментов и библиотек обеспечивает прочную основу для создания всего, что душе угодно. Они уже много лет помогают мне и командам, с которыми я работаю, и я могу только представить, что принесет нам будущее.
Спасибо за ваше время!
