[React] Словарь терминов. ч.1 🚀
Всем привет! В этом посте собрал основные термины в React. Обязательно сделаю вторую часть, потому что здесь не все термины. 🚀
📌 Одностраничное приложение:
Одностраничное приложение — это приложение, которое состоит из единственной HTML-страницы и прочих ресурсов (таких как JavaScript и CSS), необходимых для успешной работы. Любое взаимодействие с главной или последующими ей страницами не требует контакта с сервером, что значит — страница не требует перезагрузки.
React можно использовать для совершенствования небольших частей уже существующих сайтов, чтобы придать дополнительную интерактивность. Код, написанный в React, может мирно сосуществовать с другой разметкой. По сути, именно так React и используется в Facebook.
📌 Компиляторы:
Компилятор JavaScript принимает на вход JavaScript код, преобразует его и возвращает в изменённом формате. Самый известный случай использования — преобразование синтаксиса ES6 для поддержки в старых браузерах. При работе с React чаще всего используется Babel
📌 Бандлеры:
Бандлеры берут отдельные модули JavaScript и CSS и соединяют их в меньшее количество файлов, которые оптимизированы под браузеры. В работе с React чаще всего используются Webpack и Browserify.
📌 Менеджер пакетов:
Менеджер пакетов — это инструмент, позволяющий управлять зависимостями в вашем проекте. npm и Yarn — менеджеры пакетов наиболее используемые в приложениях React. Оба являются клиентами реестра пакетов npm.
Более подробно раскрыл тему в Инстаграме🔥👇
Всем привет! В этом посте собрал основные термины в React. Обязательно сделаю вторую часть, потому что здесь не все термины. 🚀
📌 Одностраничное приложение:
Одностраничное приложение — это приложение, которое состоит из единственной HTML-страницы и прочих ресурсов (таких как JavaScript и CSS), необходимых для успешной работы. Любое взаимодействие с главной или последующими ей страницами не требует контакта с сервером, что значит — страница не требует перезагрузки.
React можно использовать для совершенствования небольших частей уже существующих сайтов, чтобы придать дополнительную интерактивность. Код, написанный в React, может мирно сосуществовать с другой разметкой. По сути, именно так React и используется в Facebook.
📌 Компиляторы:
Компилятор JavaScript принимает на вход JavaScript код, преобразует его и возвращает в изменённом формате. Самый известный случай использования — преобразование синтаксиса ES6 для поддержки в старых браузерах. При работе с React чаще всего используется Babel
📌 Бандлеры:
Бандлеры берут отдельные модули JavaScript и CSS и соединяют их в меньшее количество файлов, которые оптимизированы под браузеры. В работе с React чаще всего используются Webpack и Browserify.
📌 Менеджер пакетов:
Менеджер пакетов — это инструмент, позволяющий управлять зависимостями в вашем проекте. npm и Yarn — менеджеры пакетов наиболее используемые в приложениях React. Оба являются клиентами реестра пакетов npm.
Более подробно раскрыл тему в Инстаграме🔥👇
[React] Словарь терминов. ч.2 🚀
Всем привет! Как и обещал выкладываю вторую часть основных терминов в React 🚀
📌 Props:
props (пропсы) — это входные данные React-компонентов, передаваемые от родительского
компонента дочернему компоненту.
Помните, props предназначены только для чтения. Ни в каком случае их не следует изменять.
Если вам нужно поменять значение в ответ на пользовательский ввод или ответ сервера,
используйте state (состояние).
📌 State:
Компонент нуждается в state, когда данные в нём со временем изменяются. Например,
компоненту Checkbox может понадобиться состояние isChecked, а компоненту NewsFeed
необходимо отслеживать посты при помощи состояния fetchedPosts. Самая большая разница между
state и props состоит в том, что props передаются от родителя потомку, а state управляется
самим компонентом. Компонент не может изменять props, но может изменять state. Для каждой
отдельной части изменяемых данных должен существовать только один компонент, который
«управляет» изменением состояния.
📌 Методы жизненного цикла:
Методы жизненного цикла — это настраиваемые функции, которые выполняются на различных
этапах жизни компонента. Существуют специальные методы для первоначального рендеринга
компонента в DOM (монтирование), его обновления, размонтирования и удаления.
📌 Ключи:
«Ключ» — это специальный строковый атрибут, который нужно указывать при создании списка
элементов. Ключи помогают React определять, какие элементы были изменены, добавлены или
удалены.
Ключи внутри массива должны быть уникальными только среди своих соседних элементов. Им не
нужно быть уникальными во всём приложении или даже в общем компоненте.
В идеале, ключи должны соответствовать уникальному и постоянному идентификатору
поступающему из ваших данных, например post.id.
Более подробно раскрыл тему в Инстаграме🔥👇
Всем привет! Как и обещал выкладываю вторую часть основных терминов в React 🚀
📌 Props:
props (пропсы) — это входные данные React-компонентов, передаваемые от родительского
компонента дочернему компоненту.
Помните, props предназначены только для чтения. Ни в каком случае их не следует изменять.
Если вам нужно поменять значение в ответ на пользовательский ввод или ответ сервера,
используйте state (состояние).
📌 State:
Компонент нуждается в state, когда данные в нём со временем изменяются. Например,
компоненту Checkbox может понадобиться состояние isChecked, а компоненту NewsFeed
необходимо отслеживать посты при помощи состояния fetchedPosts. Самая большая разница между
state и props состоит в том, что props передаются от родителя потомку, а state управляется
самим компонентом. Компонент не может изменять props, но может изменять state. Для каждой
отдельной части изменяемых данных должен существовать только один компонент, который
«управляет» изменением состояния.
📌 Методы жизненного цикла:
Методы жизненного цикла — это настраиваемые функции, которые выполняются на различных
этапах жизни компонента. Существуют специальные методы для первоначального рендеринга
компонента в DOM (монтирование), его обновления, размонтирования и удаления.
📌 Ключи:
«Ключ» — это специальный строковый атрибут, который нужно указывать при создании списка
элементов. Ключи помогают React определять, какие элементы были изменены, добавлены или
удалены.
Ключи внутри массива должны быть уникальными только среди своих соседних элементов. Им не
нужно быть уникальными во всём приложении или даже в общем компоненте.
В идеале, ключи должны соответствовать уникальному и постоянному идентификатору
поступающему из ваших данных, например post.id.
Более подробно раскрыл тему в Инстаграме🔥👇
Ответ 🚀
Надеюсь вы без проблем справились с этой довольно простой задачей! А объяснение ниже:
Функция question ничего не возвращает, следовательно, value как было undefined, так и осталось. Без изменений. Объявление переменной value вообще не будет, потому что оно стоит после return. Даже если бы объявление стояло до return, то переменная была бы локальной и ни как не повлияла бы на value вне функции.
Как вам задачка?
Надеюсь вы без проблем справились с этой довольно простой задачей! А объяснение ниже:
Функция question ничего не возвращает, следовательно, value как было undefined, так и осталось. Без изменений. Объявление переменной value вообще не будет, потому что оно стоит после return. Даже если бы объявление стояло до return, то переменная была бы локальной и ни как не повлияла бы на value вне функции.
Как вам задачка?
[React] Основы Redux 🚀
Всем привет! В этом посте познакомимся с основами Redux. 🚀
📌 Store(хранилище):
Хранилище (store) — это объект, который:
- содержит состояние приложения;
- отображает состояние через getState();
- может обновлять состояние через dispatch();
- позволяет регистрироваться (или удаляться) в качестве слушателя изменения состояния через
subscribe().
Хранилище в приложении всегда уникально.
📌 dispatch(action):
store.dispatch(action) - отправляет команду на изменение store. Это единственный способ
вызнать изменение состояния store.
Reducer будет вызываться с текущим getState() результатом
и заданным action, синхронно. Его возвращаемое значение будет считаться следующим
состоянием. Он будет возвращен с новым getState(), и слушатели изменений будут немедленно
уведовлены.
📌 Action:
Actions описывают действия. Action - это объект. Обязательное поле - type. Так же, если вы
хотите следовать соглашению, все данные, которые передаются вместе с действием, кладите
внутрь свойства payload.
Более подробно раскрыл тему в Инстаграме🔥👇
Всем привет! В этом посте познакомимся с основами Redux. 🚀
📌 Store(хранилище):
Хранилище (store) — это объект, который:
- содержит состояние приложения;
- отображает состояние через getState();
- может обновлять состояние через dispatch();
- позволяет регистрироваться (или удаляться) в качестве слушателя изменения состояния через
subscribe().
Хранилище в приложении всегда уникально.
📌 dispatch(action):
store.dispatch(action) - отправляет команду на изменение store. Это единственный способ
вызнать изменение состояния store.
Reducer будет вызываться с текущим getState() результатом
и заданным action, синхронно. Его возвращаемое значение будет считаться следующим
состоянием. Он будет возвращен с новым getState(), и слушатели изменений будут немедленно
уведовлены.
📌 Action:
Actions описывают действия. Action - это объект. Обязательное поле - type. Так же, если вы
хотите следовать соглашению, все данные, которые передаются вместе с действием, кладите
внутрь свойства payload.
Более подробно раскрыл тему в Инстаграме🔥👇
Как проверить, слиты ли ваши пароли 🚀
У Google есть сервис Password Checkup: он проверяет сохранённые в системе пароли на предмет утечек. В нём огромная база — больше 4 млрд (!) пользователей. Если у вас что-то утекло, скорее всего, сервис уже знает об этом.
Перейдя по адресу passwords.google.com, нажмите на кнопку «Проверить пароли» («Check Passwords») и подтвердите свою личность. Вы увидите не только слитые пароли, но и те, которые ещё в безопасности.
Google отмечает, что на его сайтах пользователи защищаются от утечек автоматически. Компания постоянно сканирует хакерские базы. Если пароль для Google Account замечен в какой-нибудь из утечек, то он автоматически деактивируется. Такая мера уже позволила в десять раз уменьшить угоны аккаунтов Google.
Ещё одна крутая фича: Google покажет повторяющиеся и простые пароли — чтобы вы обратили на них внимание и сменили.
У Google есть сервис Password Checkup: он проверяет сохранённые в системе пароли на предмет утечек. В нём огромная база — больше 4 млрд (!) пользователей. Если у вас что-то утекло, скорее всего, сервис уже знает об этом.
Перейдя по адресу passwords.google.com, нажмите на кнопку «Проверить пароли» («Check Passwords») и подтвердите свою личность. Вы увидите не только слитые пароли, но и те, которые ещё в безопасности.
Google отмечает, что на его сайтах пользователи защищаются от утечек автоматически. Компания постоянно сканирует хакерские базы. Если пароль для Google Account замечен в какой-нибудь из утечек, то он автоматически деактивируется. Такая мера уже позволила в десять раз уменьшить угоны аккаунтов Google.
Ещё одна крутая фича: Google покажет повторяющиеся и простые пароли — чтобы вы обратили на них внимание и сменили.
[React] Компоненты и пропсы 🚀
Всем привет! В этом посте вы узнаете, что такое компоненты и пропсы в React.
📌 Компоненты позволяют разбить интерфейс на независимые части, про которые легко думать в отдельности. Их можно складывать вместе и использовать несколько раз.
Во многом компоненты ведут себя как обычные функции JavaScript. Они принимают произвольные входные данные (так называемые «пропсы») и возвращают React-элементы, описывающие, что мы хотим увидеть на экране.
📌 Компоненты могут ссылаться на другие компоненты в возвращённом ими дереве. Это позволяет нам использовать один и тот же компонент на любом уровне нашего приложения. Неважно, пишем ли мы кнопку, форму или целый экран: все они, как правило, представляют собой компоненты в React-приложениях.
📌 Компонент никогда не должен что-то записывать в свои пропсы — вне зависимости от того, функциональный он или классовый. React достаточно гибкий, но это правило нарушать нельзя.
Конечно, интерфейсы приложений обычно изменяются с течением времени. В следующих постах мы узнаем о том, что такое «состояние» компонента. Состояние даёт компонентам возможность реагировать на действия пользователя, ответы сервера и другие события, не нарушая чистоту компонента.
💬 Как вам пост? Пиши своё мнение в комментарии!
Более подробно раскрыл тему в Инстаграме🔥👇
Всем привет! В этом посте вы узнаете, что такое компоненты и пропсы в React.
📌 Компоненты позволяют разбить интерфейс на независимые части, про которые легко думать в отдельности. Их можно складывать вместе и использовать несколько раз.
Во многом компоненты ведут себя как обычные функции JavaScript. Они принимают произвольные входные данные (так называемые «пропсы») и возвращают React-элементы, описывающие, что мы хотим увидеть на экране.
📌 Компоненты могут ссылаться на другие компоненты в возвращённом ими дереве. Это позволяет нам использовать один и тот же компонент на любом уровне нашего приложения. Неважно, пишем ли мы кнопку, форму или целый экран: все они, как правило, представляют собой компоненты в React-приложениях.
📌 Компонент никогда не должен что-то записывать в свои пропсы — вне зависимости от того, функциональный он или классовый. React достаточно гибкий, но это правило нарушать нельзя.
Конечно, интерфейсы приложений обычно изменяются с течением времени. В следующих постах мы узнаем о том, что такое «состояние» компонента. Состояние даёт компонентам возможность реагировать на действия пользователя, ответы сервера и другие события, не нарушая чистоту компонента.
💬 Как вам пост? Пиши своё мнение в комментарии!
Более подробно раскрыл тему в Инстаграме🔥👇
Таймер обратного отсчёта 🚀
Всем привет! Выкладываю код таймера обратного отсчёта для сайта 🚀
Таймер для сайта нужен в случае, если вам необходимо показать посетителям оставшееся время до какого-либо определенного события, мероприятия или праздника.
Кроме того, таймер обратного отсчета уже давно стал неотъемлемой частью Landing Page, а также «продающих сайтов». Таймер побуждает аудиторию к совершению целевого действия на сайте, ограничивая время акции, создавая эффект срочности и/или эффект дефицита товара.
Таймер написан на чистом JavaScript без использования сторонних библиотек. Вёрстка также уже написана.
Всем привет! Выкладываю код таймера обратного отсчёта для сайта 🚀
Таймер для сайта нужен в случае, если вам необходимо показать посетителям оставшееся время до какого-либо определенного события, мероприятия или праздника.
Кроме того, таймер обратного отсчета уже давно стал неотъемлемой частью Landing Page, а также «продающих сайтов». Таймер побуждает аудиторию к совершению целевого действия на сайте, ограничивая время акции, создавая эффект срочности и/или эффект дефицита товара.
Таймер написан на чистом JavaScript без использования сторонних библиотек. Вёрстка также уже написана.
Подсказка при нажатии на input 🚀
Всем привет! Выкладываю код реализации подсказки при нажатии на поле input 🚀
В дизайне часто требуется вставить подсказку для пользователя. Решением в таком случае является добавление подсказывающего текста непосредственно внутрь поля при наведении. Это делается с помощью атрибута placeholder, значением которого служит любой текст.
Подсказывающий текст отображается красным цветом, появляется при получении фокуса и исчезает, если фокус теряется.
Написано на HTML + CSS.
Всем привет! Выкладываю код реализации подсказки при нажатии на поле input 🚀
В дизайне часто требуется вставить подсказку для пользователя. Решением в таком случае является добавление подсказывающего текста непосредственно внутрь поля при наведении. Это делается с помощью атрибута placeholder, значением которого служит любой текст.
Подсказывающий текст отображается красным цветом, появляется при получении фокуса и исчезает, если фокус теряется.
Написано на HTML + CSS.
Подсказка при нажатии на input 🚀
Всем привет! Выкладываю код анимированного текста. HTML + CSS
CSS3-анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла.
CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов :before и :after.
Написано на HTML + CSS.
Всем привет! Выкладываю код анимированного текста. HTML + CSS
CSS3-анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла.
CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов :before и :after.
Написано на HTML + CSS.
Подсказка при нажатии на input 🚀
Всем привет! Выкладываю код реализации плавного подчёркивания при наведении. HTML + CSS 🚀
Подчёркивание текстовых ссылок уже стало определённым стандартом и сигналом о том, что это не просто текст, а именно ссылка. Это, кстати, является одной из причин, по которой не следует применять подчёркивание к обычному тексту, — пользователи будут считать, что имеют дело со ссылкой. Наряду с использованием подчёркивания благодаря CSS у разработчиков сайтов появился и альтернативный вариант — создание ссылок без подчёркивания. При правильном применении такое оформление ссылок даже может придать сайту определённый эффект. Только надо обязательно дать понять пользователю, что является ссылкой, а что обычным текстом, разграничивая их, например, цветом. Ещё можно сделать так что при наведении курсора ссылка становится подчёркнутой, меняет свой цвет или используется и тот, и другой эффект одновременно.
Написано на HTML + CSS.
Всем привет! Выкладываю код реализации плавного подчёркивания при наведении. HTML + CSS 🚀
Подчёркивание текстовых ссылок уже стало определённым стандартом и сигналом о том, что это не просто текст, а именно ссылка. Это, кстати, является одной из причин, по которой не следует применять подчёркивание к обычному тексту, — пользователи будут считать, что имеют дело со ссылкой. Наряду с использованием подчёркивания благодаря CSS у разработчиков сайтов появился и альтернативный вариант — создание ссылок без подчёркивания. При правильном применении такое оформление ссылок даже может придать сайту определённый эффект. Только надо обязательно дать понять пользователю, что является ссылкой, а что обычным текстом, разграничивая их, например, цветом. Ещё можно сделать так что при наведении курсора ссылка становится подчёркнутой, меняет свой цвет или используется и тот, и другой эффект одновременно.
Написано на HTML + CSS.
[Курс по GIT] Основы 🚀
В этом курсе познакомимся с основами Git. Рекомендую все команды прописывать своими руками. Так вы быстрее и качественне будете усваивать материал.
Git - это консольная утилита, для отслеживания и ведения истории изменения файлов, в вашем проекте. Чаще всего его используют для кода, но можно и для других файлов. Например, для картинок - полезно для дизайнеров.
С помощью Git-a вы можете откатить свой проект до более старой версии, сравнивать, анализировать или сливать свои изменения в репозиторий.
Репозиторием называют хранилище вашего кода и историю его изменений. Git работает локально и все ваши репозитории хранятся в определенных папках на жестком диске.
Каждая точка сохранения вашего проекта носит название коммит (commit). У каждого commit-a есть hash (уникальный id) и комментарий. Из таких commit-ов собирается ветка. Ветка - это история изменений. У каждой ветки есть свое название. Репозиторий может содержать в себе несколько веток, которые создаются из других веток или вливаются в них.
В этом курсе познакомимся с основами Git. Рекомендую все команды прописывать своими руками. Так вы быстрее и качественне будете усваивать материал.
Git - это консольная утилита, для отслеживания и ведения истории изменения файлов, в вашем проекте. Чаще всего его используют для кода, но можно и для других файлов. Например, для картинок - полезно для дизайнеров.
С помощью Git-a вы можете откатить свой проект до более старой версии, сравнивать, анализировать или сливать свои изменения в репозиторий.
Репозиторием называют хранилище вашего кода и историю его изменений. Git работает локально и все ваши репозитории хранятся в определенных папках на жестком диске.
Каждая точка сохранения вашего проекта носит название коммит (commit). У каждого commit-a есть hash (уникальный id) и комментарий. Из таких commit-ов собирается ветка. Ветка - это история изменений. У каждой ветки есть свое название. Репозиторий может содержать в себе несколько веток, которые создаются из других веток или вливаются в них.
Анимация при наведении на ссылку 🚀
Всем привет! В этом посте вы узнаете, как можно сделать красивую кастомную анимацию при наведении на ссылку 🚀
CSS3-анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла.
CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов :before и :after. Список анимируемых свойств приведен на этой странице. При создании анимации не стоит забывать о возможных проблемах с производительностью, так как на изменение некоторых свойств требуется много ресурсов.
Написано на HTML + CSS.
Всем привет! В этом посте вы узнаете, как можно сделать красивую кастомную анимацию при наведении на ссылку 🚀
CSS3-анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла.
CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов :before и :after. Список анимируемых свойств приведен на этой странице. При создании анимации не стоит забывать о возможных проблемах с производительностью, так как на изменение некоторых свойств требуется много ресурсов.
Написано на HTML + CSS.
Проверка файлов на вирусы в браузере, надежнее любого антивируса 🔥
Элементарная безопасность: не открывать на своём ПК сомнительные файлы от незнакомых людей. Лучше использовать сторонние сервисы — например, Virustotal. Он проверяет файлы и сайты на наличие вредоносного кода по базам 40 разных антивирусов. Это надёжнее, чем проверять одним антивирусом. Ещё удобно, что Virustotal не требует установки и работает даже на смартфоне.
Достаточно загрузить файл весом до 650 МБ или ссылку, чтобы онлайн-антивирус сделал своё дело — полный анализ файла всеми антивирусами и обобщённый результат. Если файл уже был загружен в сервис и прошел проверку, результат будет мгновенным. Хотя у вас всегда есть возможность просканировать файл ещё раз — чтобы информация точно была актуальной.
Если боитесь открыть ссылку или документ, Virustotal является одним из лучших сервисов, который регулярно обновляет свои базы данных. Пользуйтесь!
Элементарная безопасность: не открывать на своём ПК сомнительные файлы от незнакомых людей. Лучше использовать сторонние сервисы — например, Virustotal. Он проверяет файлы и сайты на наличие вредоносного кода по базам 40 разных антивирусов. Это надёжнее, чем проверять одним антивирусом. Ещё удобно, что Virustotal не требует установки и работает даже на смартфоне.
Достаточно загрузить файл весом до 650 МБ или ссылку, чтобы онлайн-антивирус сделал своё дело — полный анализ файла всеми антивирусами и обобщённый результат. Если файл уже был загружен в сервис и прошел проверку, результат будет мгновенным. Хотя у вас всегда есть возможность просканировать файл ещё раз — чтобы информация точно была актуальной.
Если боитесь открыть ссылку или документ, Virustotal является одним из лучших сервисов, который регулярно обновляет свои базы данных. Пользуйтесь!
