534 читали · 1 год назад
Различные способы написания CSS в React
Мы все знакомы со стандартным способом привязки таблицы стилей к заголовку HTML-документа, верно? Это лишь один из нескольких способов написания CSS. Но как выглядит стилизация вещей в одностраничном приложении (SPA), скажем, в проекте React? Оказывается, есть несколько способов стилизации приложения React. Некоторые пересекаются с традиционным стилем, другие не так сильно. Но давайте посчитаем все способы, которыми мы можем это сделать. Импорт внешних таблиц стилей Как следует из названия, React может импортировать файлы CSS...
27 Проект с модулями CSS ➡️ 209. Проект с модулями CSS ➡️ 210. Импорт файла с CSS стилями ➡️ 211. Создание и подключение модуля CSS ➡️ 212. Использование классов из CSS модуля ➡️ 213. Подведение итогов по проекту с модулями CSS 28 Первая версия проекта Todo App ➡️ 214. Обзор финальной версии Todo App ➡️ 215. Первая версия проекта Todo App ➡️ 216. Организация файлов в папке components ➡️ 217. ЗАДАЧИ для первой итерации Todo App ➡️ 218. Создание заготовок для всех компонентов Todo ➡️ 219. Функционал добавления новой задачи ➡️ 220. Создание и использования состояния с массивом задач ➡️ 221. Добавление задач с помощью формы ➡️ 222. Проверка добавления и отображения задач ➡️ 223. Подведение итогов по первой итерации Todo App ➡️ 224. Добавление стилей CSS для компонента TodoForm TodoForm.module.css ➡️ 224. Добавление стилей CSS для компонента TodoForm ➡️ 225. Добавление стилей CSS для компонента Todo Todo.module.css ➡️ 225. Добавление стилей CSS для компонента Todo ➡️ 226. ЗАДАЧА - Отображение текста об отсутствии задач ➡️ 227. РЕШЕНИЕ - Отображение текста об отсутствии задач ➡️ 228. Завершение задачи двойным кликом ➡️ 229. Добавление иконки возле каждой задачи ➡️ 230. Подведение итогов по созданию первой версии Todo App 29 Вторая версия проекта Todo App ➡️ 231. Проект по созданию второй версии Todo App ➡️ 232. Изменение структуры данных на массив объектов ➡️ 233. Генерация уникальных id для задач ➡️ 234. Завершение рефакторинга с массивом объектов ➡️ 235. Добавление и стилизация кнопок удаления и завершения задач Todo.module.css ➡️ 235. Добавление и стилизация кнопок удаления и завершения задач ➡️ 236. Удаление отдельных задач ➡️ 237. Завершение отдельных задач ➡️ 238. Условное добавление классов CSS ➡️ 239. Подведение итогов по удалению и завершению задач ➡️ 240. Добавление блока с кнопками для всех задач ➡️ 241. Создание компонента Button ➡️ 242. Удаление всех или завершенных задач ➡️ 243. ЗАДАЧА - Скрытие блока с кнопками при отсутствии задач ➡️ 244. РЕШЕНИЕ - Скрытие блока с кнопками при отсутствии задач ➡️ 245. Отключение кнопки удаления завершенных задач ➡️ 246. Использование Button в TodoForm ➡️ 247. Отображение текста с количеством завершенных задач ➡️ 248. Подведение итогов по созданию второй версии Todo App