Делаем анимацию при наведении на изображение 🚀
На своём ютуб канале рассказал, как можно очень легко создать анимацию для изображений без JS (только HTML и CSS). Делается такая анимация не дольше 5 минут, при этом эффект получается очень красивый.
Постарался объяснить каждую строчку максимально подробно, надеюсь вам понравится данный урок. Переходи по ссылке и смотри 🔥👇
На своём ютуб канале рассказал, как можно очень легко создать анимацию для изображений без JS (только HTML и CSS). Делается такая анимация не дольше 5 минут, при этом эффект получается очень красивый.
Постарался объяснить каждую строчку максимально подробно, надеюсь вам понравится данный урок. Переходи по ссылке и смотри 🔥👇
[React] Что такое JSX? 🚀
Рассмотрим это объявление переменной:
const element = <h1>Привет, мир!</h1>;
Этот странный тег — ни строка, ни фрагмент HTML.
Это JSX — расширение языка JavaScript. Его рекомендуется использовать, когда требуется объяснить React, как должен выглядеть UI. JSX напоминает язык шаблонов, наделённый силой JavaScript.
React принимает тот факт, что логика отрисовки по сути связана с другой логикой пользовательского интерфейса: как обрабатываются события, как изменяется состояние со временем и как данные подготовлены для отображения. Вместо искусственного разделения технологий, помещая разметку и логику в отдельные файлы, React разделяет ответственности со слабо связанными модулями, называемыми «компонентами», которые содержат вместе разметку и логику.
React не требует использование JSX, но большинство людей находят его полезным в качестве визуальной демонстрации при работе с пользовательским интерфейсом внутри кода JavaScript. Он также позволяет React показывать более полезные сообщения об ошибках и предупреждения.
Более подробно читай в посте в Instagram! Переходи по ссылке 🔥👇
Рассмотрим это объявление переменной:
const element = <h1>Привет, мир!</h1>;
Этот странный тег — ни строка, ни фрагмент HTML.
Это JSX — расширение языка JavaScript. Его рекомендуется использовать, когда требуется объяснить React, как должен выглядеть UI. JSX напоминает язык шаблонов, наделённый силой JavaScript.
React принимает тот факт, что логика отрисовки по сути связана с другой логикой пользовательского интерфейса: как обрабатываются события, как изменяется состояние со временем и как данные подготовлены для отображения. Вместо искусственного разделения технологий, помещая разметку и логику в отдельные файлы, React разделяет ответственности со слабо связанными модулями, называемыми «компонентами», которые содержат вместе разметку и логику.
React не требует использование JSX, но большинство людей находят его полезным в качестве визуальной демонстрации при работе с пользовательским интерфейсом внутри кода JavaScript. Он также позволяет React показывать более полезные сообщения об ошибках и предупреждения.
Более подробно читай в посте в Instagram! Переходи по ссылке 🔥👇
[React] Отрисовка элементов 🚀
Элементы — это самые маленькие строительные блоки приложений React.
Элемент описывает, что вы хотите видеть на экране. В отличие от DOM-элементов браузера, элементы React — обычные объекты, лёгкие для создания. React DOM берёт заботу по обновлению DOM на себя для соответствия элементам React. Элементы — это то, что из чего компоненты «сделаны»
React-элементы — неизменяемы. Создав однажды элемент, вы не сможете изменить его дочерние элементы или атрибуты. Элемент похож на один кадр в фильме: он представляет собой пользовательский интерфейс в определённый момент времени.
Единственный способ обновить интерфейс — создать новый элемент и передать его в ReactDOM.render().
React сравнивает элемент и его дочерние элементы с предыдущими и применяет только обновления, необходимые для преобразования DOM в желаемое состояние.
Элементы — это самые маленькие строительные блоки приложений React.
Элемент описывает, что вы хотите видеть на экране. В отличие от DOM-элементов браузера, элементы React — обычные объекты, лёгкие для создания. React DOM берёт заботу по обновлению DOM на себя для соответствия элементам React. Элементы — это то, что из чего компоненты «сделаны»
React-элементы — неизменяемы. Создав однажды элемент, вы не сможете изменить его дочерние элементы или атрибуты. Элемент похож на один кадр в фильме: он представляет собой пользовательский интерфейс в определённый момент времени.
Единственный способ обновить интерфейс — создать новый элемент и передать его в ReactDOM.render().
React сравнивает элемент и его дочерние элементы с предыдущими и применяет только обновления, необходимые для преобразования DOM в желаемое состояние.
Ответ 🚀
Функция func изменяет элементы, передаваемые в нее(увеличивает на 5). Однако мы не переопределяем элементы массива. Получается так, что функция просто возвращает элементы, увеличенные на 5, при этом ни как не изменяя основной массив.
Как вам задачка?
Функция func изменяет элементы, передаваемые в нее(увеличивает на 5). Однако мы не переопределяем элементы массива. Получается так, что функция просто возвращает элементы, увеличенные на 5, при этом ни как не изменяя основной массив.
Как вам задачка?
[React] Разделение кода 🚀
Всем привет! Это третий урок курса по ReactJS. Надеюсь вам всё нравится!) Сегодня поговорим про разделение кода в React 🚀
Большинство React-приложений «собирают» свои файлы такими инструментами, как Webpack, Rollup или Browserify. Сборка (или «бандлинг») — это процесс выявления импортированных файлов и объединения их в один «собранный» файл (часто называемый «bundle» или «бандл»). Этот бандл после подключения на веб-страницу загружает всё приложение за один раз.
Бандлинг — это хорошо, но по мере роста вашего приложения, ваш бандл тоже будет расти. Вам нужно следить за кодом, который вы подключаете, чтобы случайно не сделать приложение настолько большим, что его загрузка займёт слишком много времени.
Разделение кода — это возможность, которая может создавать несколько бандлов и загружать их по мере необходимости.
Хоть вы и не уменьшите общий объём кода вашего приложения, но избежите загрузки кода, который может никогда не понадобиться пользователю и уменьшите объём кода, необходимый для начальной загрузки.
Более подробно раскрыл тему в Инстаграме🔥👇
Всем привет! Это третий урок курса по ReactJS. Надеюсь вам всё нравится!) Сегодня поговорим про разделение кода в React 🚀
Большинство React-приложений «собирают» свои файлы такими инструментами, как Webpack, Rollup или Browserify. Сборка (или «бандлинг») — это процесс выявления импортированных файлов и объединения их в один «собранный» файл (часто называемый «bundle» или «бандл»). Этот бандл после подключения на веб-страницу загружает всё приложение за один раз.
Бандлинг — это хорошо, но по мере роста вашего приложения, ваш бандл тоже будет расти. Вам нужно следить за кодом, который вы подключаете, чтобы случайно не сделать приложение настолько большим, что его загрузка займёт слишком много времени.
Разделение кода — это возможность, которая может создавать несколько бандлов и загружать их по мере необходимости.
Хоть вы и не уменьшите общий объём кода вашего приложения, но избежите загрузки кода, который может никогда не понадобиться пользователю и уменьшите объём кода, необходимый для начальной загрузки.
Более подробно раскрыл тему в Инстаграме🔥👇
Ответ 🚀
Надеюсь вы без проблем справились с этой довольно простой задачей! А объяснение ниже:
Внутри блока if мы создали локальную переменную a, которая будет доступна только внутри этого блока. Для Js эти переменные - разные, поэтому он не будет переопределять первую a. Следовательно, в b мы запишем значение переменной a, которая объявлена вне блока if.
Как вам задачка?
Надеюсь вы без проблем справились с этой довольно простой задачей! А объяснение ниже:
Внутри блока if мы создали локальную переменную a, которая будет доступна только внутри этого блока. Для Js эти переменные - разные, поэтому он не будет переопределять первую a. Следовательно, в b мы запишем значение переменной a, которая объявлена вне блока if.
Как вам задачка?
[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 без использования сторонних библиотек. Вёрстка также уже написана.
