Рубрика: CSS

Рубрики
CSS React React-project

Стилизация компонентов в React

styled-components
библиотека

Установка библиотеки через терминал

npm install --save styled-components

packge.json
добавляется библиотека

"dependencies":{
...
"styled-components":"^5.2.1",
...
}

Рубрики
JS фреймворки React React-project Sass Основы.frontend

Разворачивание интерфейсов в приложении на React

подключение стилизации
два способа

  • через модули SASS
  • через сторонние библиотеки
    (например react-rating-stars-component)

src\modules

папка хранит глобальные компоненты, которые используются во всём проекте и имеют какую то логическую составляющую, какой то функционал

Рубрики
CSS Fragments JavaScript lib

Основы.JS «операторы, текст»

  • Операторы
    • swith
      • условные операции, операции ветвления
    • switch(x) {
      • case ‘value1’: // if (x === ‘value1’) … break;
      • case ‘value2’: // if (x === ‘value2’) … break;
      • default: … break;
    • }
  • String Работа с текстом символ начинается с 0!
    • вложенный текст
      • весь текст после 2 символа
        • text=text.substr(2);
      • заменить вложенный текст в другой вложенный текст
        • let new_text=text.replace(subtext1,subtext2);
      • поиск вложенного текста
        • поиск первого вложенного текста
          • let index=text.indexOf(text);
        • поиск последнего вложенного текста
          • let index=text.lastIndexOf(text);
    • вырезать текст
      • l длинна вырезаемого текста
      • s старт вырезаемого текста
      • str.slice(s,l)
    • удалить последний элемент текста
      • text=text.slice(0, -1);
    • проверка текста на пустоту и удаление невидимых символов
      • (переход на следующую строку)
      • text.trim() == »
    • выполнить текст-код
      • let arr=eval(data);
  • События
    • ev событие управление
    • элемент DOM на котором выполняется событие
      • let e=ev.currentTarget();
  • Массивы
    • базовые свойства
      • ассоциативный массив Array(0) нет индексов
        • arr.length==0
      • перебор массива или выборки
        • пройтись по массиву или объекту
          • arr.forEach(function(item, i, data) {code});
          • Array.from(arr, (item,index)=>{code});
          • for(var i=0;i<arr.length;i++){arr[i]};
      • преобразование
        • строка в массив через \n
          • let arr=text.split(\n);
        • массив в строку через \n
          • let text=arr.join(\n);
        • проверка на массив
          • Array.isArray(obj);
  • Объекты
    • перебор свойств
      • for (let key in obj){ obj[key] }
  • Синтаксис T функций
    • открытие тега-корня модуля
      • return{…html:[
    • закрытие тега-корня модуля
      • ]};
    • открытие вложенности тега
      • {…html:[
    • закрытие вложенности тега
      • ]},
  • ERRORS
    • дублируется контент при повторном выполнении
      • привязан одинаковый класс к тегам
        • которые содержат контент
      •