Ответ 🚀
Функция 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 без использования сторонних библиотек. Вёрстка также уже написана.
Подсказка при нажатии на 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.
