Dev House Jun Front
Open in Telegram
3 367
Subscribers
No data24 hours
No data7 days
No data30 days
Posts Archive
3 367
Установка React.js
React.js – это библиотека JavaScript, которая используется для создания пользовательских интерфейсов. Она позволяет создавать динамические пользовательские интерфейсы, используя компонентный подход. Если вы хотите начать работать с React.js, вам необходимо установить его на свой компьютер.
В этой статье мы рассмотрим, как установить React.js на ваш компьютер. Мы сначала рассмотрим несколько условий, которые вам понадобятся, прежде чем приступить к установке, а затем рассмотрим несколько способов установки React.js.
Условия
Прежде чем начать устанавливать React.js, вам понадобятся следующие условия:
Node.js
npm
Node.js – это среда выполнения JavaScript, которая позволяет выполнять JavaScript на стороне сервера. Он также включает в себя менеджер пакетов npm, который используется для установки сторонних пакетов, таких как React.js.
Если у вас еще нет Node.js или npm, вы можете их загрузить и установить с официального сайта Node.js.
Установка с помощью Create React App
Create React App – это инструмент командной строки, который позволяет создавать новые проекты React.js с минимальной настройкой. Он автоматически настраивает новый проект React.js с необходимыми зависимостями, такими как Babel, Webpack и другие, и предоставляет основные файлы для начала работы.
Чтобы создать новый проект React.js с помощью Create React App, выполните следующие шаги:
Откройте терминал и перейдите в каталог, в котором вы хотите создать ваш новый проект React.js.
Установите Create React App, выполнив следующую команду:
npm inst...3 367
Введение в React: что за фреймворк и с чем его едят
React – это JavaScript-библиотека для создания пользовательских интерфейсов. Он был создан Facebook в 2011 году, и быстро стал одним из наиболее популярных инструментов для разработки веб-приложений. На сегодняшний день React используется многими объектами социальной сети Facebook, а также такими компаниями, как Airbnb, Uber и Netflix.
React работает с помощью компонентов – это модули, которые объединяют логику, стиль и разметку. Каждый компонент может иметь некоторое состояние и методы жизненного цикла, что позволяет ему реагировать на изменения и обновления.
React использует виртуальный DOM – внутреннюю копию реального DOM (дерева элементов веб-страницы). Когда происходит обновление компонента, React создает новый виртуальный DOM и сравнивает его с предыдущей версией. Затем он эффективно обновляет только те элементы, которые были изменены, вместо обновления всей страницы целиком.
React также распространяется на состояние приложения с помощью управления потоком данных. Flux – это архитектурный шаблон, который часто используется вместе с React для управления потоком данных.
React добавляет JSX (расширение языка JavaScript), чтобы обеспечить более удобный способ создания пользовательского интерфейса. JSX – это синтаксис, который позволяет соединить HTML и JavaScript в одном файле. React преобразует этот код в обычный JavaScript при его выполнении, что позволяет разработчикам создавать компоненты более быстро и эффективно.
Одна из главных особенностей React – это его экосистема. Есть множество дополнительных библиотек, инструментов и плагинов, доступных для разработчиков Re...
3 367
Рекурсия и стек в JS
Привет, Мэн! Сегодня мы поговорим о рекурсии и стеке в JavaScript. Рекурсия – это когда функция вызывает саму себя внутри себя. Это мощный инструмент программирования, который может быть особенно полезен во многих ситуациях. Давай разберемся в деталях!
Рекурсивные функции
Для начала, давай рассмотрим пример рекурсивной функции, которая считает факториал числа:
function factorial(n) {
if (n === 0) {
return 1;
}
return n * factorial(n - 1);
}
console.log(factorial(5)); // Вывод: 120
Здесь функция factorial вызывает саму себя с аргументом, уменьшенным на 1. Она продолжает вызывать себя до тех пор, пока не достигнет базового случая (n === 0). Рекурсия позволяет нам решать задачи, которые могут быть выражены через более простые и похожие на исходную задачи.
Стек вызовов
Рекурсивные вызовы функции помещаются в специальную структуру данных – стек вызовов. Каждый раз, когда функция вызывает саму себя, новый вызов помещается на вершину стека. При выполнении рекурсии, стек растет, и каждый вызов ожидает своего завершения. Как только базовый случай достигнут, вызовы начинают “развертываться”, и результаты работы каждой функции возвращаются в обратном порядке.
Давай рассмотрим пример:
function countDown(n) {
if (n === 0) {
console.log("Liftoff!");
} else {
console.log(n);
countDown(n - 1);
}
}
countDown(5);
В этом примере функция countDown выводит аргумент n каждый раз, пока он не достигнет нуля. Затем происходит “развертывание” стека вызовов, и мы видим выводы в обратном порядке: 5, 4, 3, 2, 1, Liftoff!
Рекурсия и стек вызовов в JavaScript
Рекурсия может быть полезной и мощной, но ее следует использовать осторожно. Потому что каждый рекурсивный вызов добавляет новый фрейм на стек вызовов, длинные рекурсивные цепочки могут вызвать переполнение стека (stack overflow) и привести к аварийному завершению программы.
Чтобы избежать проб...3 367
Микрозадачи в JS
JavaScript (JS) является интерпретируемым языком программирования, который выполняет код последовательно. Однако в JS есть определенные функции или методы, которые асинхронно обрабатываются, например, fetch и setTimeout. Эти функции и методы создают микрозадачи. В этой статье мы рассмотрим, что такое микрозадачи в JS, как они работают и зачем они нужны.
Что такое микрозадачи в JS?
Микрозадачи – это задачи, которые должны быть выполнены в ближайшее свободное время цикла событий, они обрабатываются в очереди микрозадач. Каждый цикл событий состоит из одной или нескольких макрозадач и микрозадач. Макрозадачи – это задачи, которые выполняются немедленно, например, обработка кликов или загрузка скриптов.
Пример микрозадачи:
Promise.resolve().then(() => console.log('Promise resolved'));
console.log('Promise made');
Результат в консоли будет:
Promise made
Promise resolved
Также, одной из важных особенностей микрозадач является их приоритет над макрозадачами. Посмотрим на следующий пример:
setTimeout(() => console.log('Timeout'), 0);
Promise.resolve().then(() => console.log('Promise'));
console.log('After timeout and promise');
Этот код созд...3 367
Сравнение JS и JQuery
JavaScript (JS) и jQuery – это две популярные технологии для создания интерактивных веб-сайтов. Но как они отличаются друг от друга и какой из них лучше использовать для определенных задач? Рассмотрим их отличия и сходства.
JavaScript
JavaScript – это язык программирования, используемый для создания интерактивного поведения на веб-страницах. Он обеспечивает динамический контент и манипуляции с DOM элементами.
Пример простой функции на JS:
function showMessage() {
alert('Hello World!');
}
В этом примере мы создали функцию, которая вызывает всплывающее окно с сообщением “Hello World!”.
JS позволяет манипулировать DOM элементами, изменять стилевые свойства и взаимодействовать с событиями, такими как клики и прокрутки.
Пример изменения стилевого свойства на JS:
let element = document.getElementById('myElement');
element.style.color = 'red';
Здесь мы выбрали элемент с идентификатором “myElement” и изменили его цвет текста на красный.
jQuery
jQuery – это библиотека JavaScript, которая предоставляет простой способ манипулирования с DOM элементами, обработки событий и создания анимаций. Она упрощает написание кода и ускоряет разработку веб-сайтов.
Пример простой функции на jQuery:
$('#myButton').click(function() {
alert('Hello World!');
});
В этом примере мы выбрали элемент с идентификатором “myButton” и привязали к нему функцию, которая вызывает всплывающее окно с сообщением “Hello World!” при клике на кнопке.
jQuery предоставляет дополнительные функции для работы с анимацией, AJAX и браузерным событиями. Она имеет множество плагинов и расширений для различных задач, таких как валидация форм и создание слайдеров.
Пример изменения стилевого свойства на jQuery:
$('#myElement').css('color', 'red');
Здесь мы выбрали элемент с идентификатором “myElement” и изменили его цвет текста на красный, используя метод .css() jQuery.
Сравнение
Одной из основных различий между JS и jQuery является уровень сложности и синтаксиса. JS может быть сло...3 367
Создание и использование классов в JS
JavaScript – язык программирования, который активно используется для создания интерактивных веб-страниц и приложений. Для удобства использования и организации кода в JavaScript используются классы – шаблоны объектов, которые содержат свойства и методы.
Создание классов
Создание класса в JavaScript осуществляется при помощи ключевого слова
class. Например, в следующем коде создается класс Person:
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hello, my name is ${this.name}, and I am ${this.age} years old.`);
}
}
В примере выше определен конструктор класса Person, который инициализирует свойства name и age. Кроме того, определен метод sayHello, который выводит сообщение о имени и возрасте экземпляра класса.
Создание экземпляров класса
Для создания экземпляра класса в JavaScript используется ключевое слово new. Например:
const john = new Person("John", 30);
john.sayHello();
В примере выше создается экземпляр класса Person с именем john и возрастом 30. Затем вызывается метод sayHello, который выводит сообщение о имени и возрасте объекта john.
Наследование
JavaScript поддерживает наследование классов. Для создания наследуемого класса необходимо использовать ключевое слово extends. Например:
class St...3 367
Разработка игр на JavaScript
JavaScript – это мощный инструмент для создания игр, который используется многими разработчиками в всем мире. JavaScript позволяет создавать насыщенное и интерактивное игровое содержимое, которое может быть запущено на большинстве платформ, включая настольные компьютеры, мобильные устройства и веб-браузеры. В этой статье мы рассмотрим основы разработки игр на JavaScript.
Основы JavaScript
Первым шагом на пути создания игр на JavaScript является изучение языка программирования JavaScript. JavaScript – это объектно-ориентированный язык программирования, который используется для создания динамических и интерактивных приложений веб-страниц. JavaScript может быть использован в сочетании с HTML и CSS для создания полноценных веб-приложений.
Важно знать, что JavaScript является интерпретируемым языком программирования. Это означает, что код JavaScript выполняется непосредственно на устройстве пользователя, а не компилируется в машинный код, как это делается, например, в C++. Браузеры предоставляют движок JavaScript, который используется для интерпретации и выполнения кода JavaScript.
Использование фреймворков и библиотек
Для создания игр на JavaScript можно использовать готовые фреймворки и библиотеки, которые упрощают и ускоряют процесс разработки. Некоторые из популярных фреймворков и библиотек, которые используются для разработки игр на JavaScript, включают Phaser, Pixi.js, Three.js, Babylon.js и другие.
Phaser – это фреймворк для разработки игр на JavaScript, который прост...
3 367
Введение в тестирование на JavaScript и использование тестовых фреймворков
Тестирование является важной частью разработки программного обеспечения, которая помогает повысить качество кода и обеспечить его стабильную работу. Если вы разрабатываете приложения на JavaScript, то вам необходимо знать, как писать тесты и как использовать тестовые фреймворки.
Зачем нужны тесты
Программное обеспечение всегда имеет потенциальные ошибки, которые могут привести к нежелательным результатам. Ошибки могут возникать как при написании нового кода, так и при изменении существующего. Поэтому тесты являются необходимым инструментом для обнаружения ошибок на ранней стадии разработки и предотвращения их возникновения в будущем.
Преимущества использования тестов в вашем проекте:
Тесты помогают обеспечить качество кода.
Тесты помогают обнаружить ошибки на ранней стадии разработки.
Тесты помогают улучшить поддержку кода.
Тесты упрощают процесс документирования кода.
Тесты помогают быстро обнаруживать ошибки при последующем изменении кода.
Как писать тесты на JavaScript
Существует несколько способов написания тестов на JavaScript. Один из них – использовать встроенный модуль assert в Node.js. Это очень простой способ написания простых тестов. Вот пример:
const assert = require('assert');
function add(a, b) {
return a + b;
}
assert.equal(add(1, 2), 3);
assert.equal(add(-1, 2), 1);
Код выше использует функцию assert.equal(), чтобы проверить, соответствуют ли результаты функции add() ожидаемым значениям.
Другой способ написания тестов – использовать тестовые фреймворки. Они представляют собой более мощный инструмент для написания тестов на JavaScript. Примерами таких фреймворков являются Mocha, Jasmine, QUnit, Jest и др.
Использование тестовых фреймворков
Тестовые фреймворки облегчают написание и организацию тестовых сценариев. Они также обеспечивают ме...3 367
Хорошие книги по JavaScript
JavaScript является одним из наиболее популярных языков программирования в мире, и его использование растет с каждым днем. Этот язык имеет широкий спектр применения, от создания веб-страниц до разработки серверных приложений и мобильных приложений. Если вы хотите освоить JavaScript или улучшить свои навыки в этой области, то ниже приведены некоторые лучшие книги по JavaScript.
“JavaScript: The Definitive Guide” Дэвид Флэнаган
Эта книга является одной из наиболее полных и подробных по JavaScript. Она охватывает все аспекты языка, от основных концепций и синтаксиса до продвинутых тем, таких как функциональное программирование и объектно-ориентированное программирование. Это отличное руководство для начинающих, а также для опытных программистов, которые хотят расширить свои знания.
“JavaScript: The Good Parts” Дуглас Крокфорд
Эта книга сосредоточена на наилучшей практике JavaScript. Она представляет собой смесь излагающих концепции курсов и руководств по написанию кода. В книге перечисляется некоторые из наиболее часто встречающихся ошибок и недостатков языка и объясняется, как их избежать. Эта книга отлично подходит для всех, кто хочет написать легкий и чистый код.
“Eloquent JavaScript” Марейн Хавербеке
Это отличная книга для начинающих, которые хотят изучить JavaScript. Книга подробно описывает основы языка и предоставляет интересный материал в интерактивной форме с примерами и задачами. Она также включает некоторые продвинутые темы, такие как асинхронное программирование и функциональное программирование. Книга доступна для чтения онлайн, а также есть печатная версия.
“You Don’t Know JS” Кайл Симпсон
Эта серия книг на несколько томов предназначена для профессионалов, которые хотят улучшить свои знания в JavaScript. Книги данной серии обращают внимание на сложные и часто пренебрегаемые аспекты языка, представляют новые подходы к программированию и рассматривают темы, которые не встречаются в стандартной докумен...
3 367
🤝 5 soft skills, которые помогут тебе дорасти до Senior-разработчика
Как думаешь, что нужно уметь, чтобы стать крутым Senior-разработчиком или даже создать свой успешный стартап? Спойлер: нет, не только хорошо кодить.
3 367
Async/await в JS
JavaScript является одним из самых популярных языков программирования в мире. Одной из его основных особенностей является асинхронное программирование. В прошлом для работы с асинхронным кодом использовались колбеки, затем появились промисы, а сейчас у нас есть асинхронные функции с помощью ключевых слов async и await.
Что такое async/await?
Async/await – это новые ключевые слова, которые были добавлены в язык JavaScript в ECMAScript 2017. Они предназначены для упрощения асинхронного программирования на основе промисов.
Ключевое слово
async используется для создания асинхронной функции, а ключевое слово await используется внутри асинхронной функции для ожидания выполнения промиса.
async function someAsyncFunction() {
const result = await somePromise();
return result;
}
В примере выше, someAsyncFunction является асинхронной функцией, которая использует ключевое слово await для ожидания выполнения промиса somePromise. Когда промис завершится с успешным результатом, someAsyncFunction вернет этот результат.
Преимущества использования async/await
Async/await имеет несколько преимуществ по сравнению с колбеками и промисами:
Понятный код: Асинхронный код в стиле async/await выглядит как синхронный код, что делает его более понятным и упрощает отладку.
Удобство использования: Async/await облегчает написание асинхронного кода. Вы можете писать асинхронный код так, как если бы вы писали синхронный код.
Поддерж...3 367
Микрозадачи в JS
JavaScript (JS) является интерпретируемым языком программирования, который выполняет код последовательно. Однако в JS есть определенные функции или методы, которые асинхронно обрабатываются, например, fetch и setTimeout. Эти функции и методы создают микрозадачи. В этой статье мы рассмотрим, что такое микрозадачи в JS, как они работают и зачем они нужны.
Что такое микрозадачи в JS?
Микрозадачи – это задачи, которые должны быть выполнены в ближайшее свободное время цикла событий, они обрабатываются в очереди микрозадач. Каждый цикл событий состоит из одной или нескольких макрозадач и микрозадач. Макрозадачи – это задачи, которые выполняются немедленно, например, обработка кликов или загрузка скриптов.
Пример микрозадачи:
Promise.resolve().then(() => console.log('Promise resolved'));
console.log('Promise made');
Результат в консоли будет:
Promise made
Promise resolved
Также, одной из важных особенностей микрозадач является их приоритет над макрозадачами. Посмотрим на следующий пример:
setTimeout(() => console.log('Timeout'), 0);
Promise.resolve().then(() => console.log('Promise'));
console.log('After timeout and promise');
Этот код создает 3 задачи:
setTimeout макрозадача
Promise микрозадача
console.log макрозадача
Ожидаемый результат в консоли:
After timeout and promise
Pro...3 367
Регулярные выражения в JavaScript: поиск и замена текста с помощью шаблонов
Привет, Мэн!
Сегодня мы поговорим о регулярных выражениях в JavaScript и о том, как они могут быть полезны при поиске и замене текста с использованием шаблонов.
Что такое регулярные выражения?
Регулярные выражения — это мощный инструмент, который позволяет искать и манипулировать текстом на основе заданных шаблонов. Они используются во многих языках программирования, включая JavaScript, для обработки строковых данных.
Поиск текста с помощью регулярных выражений
Когда тебе нужно найти определенные шаблоны текста в строке, регулярные выражения позволяют тебе задать правила поиска. Например, если ты хочешь найти все вхождения слова «JavaScript» в строке, ты можешь использовать следующий шаблон:
/JavaScript/g. Здесь / — это начало и конец регулярного выражения, g означает, что мы хотим найти все вхождения (global).
Давай по ссылке и читай до конца в нашем блоге) И не забудь поставить лайк - для тебя же стараюсь)3 367
Джентельменский набор трушного фронтендера
Опытные Frontend-разработчики собрали самые востребованные и бесплатные каналы, без которых не обойдется ни один настоящий фронтендер.
Макеты для верстки — самый крупный канал с макетами для верстки. Первоисточник всех макетов в Telegram.
Полезная вËрстка — канал с готовыми решениями повседневных задач: слайдеры, анимация, навигация и т.д.
JavaScript заметки — образовательный канал с ежедневными практическими заметками по языку.
codepen.js — готовые коды: реализованные на css и js анимации, скрипты и интерфейсы. Оживи статичные макеты
Figma Start — каждый день выпускаем крутые макеты для верстки. Выбери самый интересный и удиви рекрутеров!
Развивайся с нами, ведь так проще!
3 367
Как сделать поиск JS на сайте
Веб-разработка включает в себя множество различных технологий и инструментов. Важным элементом любого сайта является поиск, который обеспечивает удобство пользователей при поиске нужной информации на сайте. В этой статье мы рассмотрим, как создать простой поиск на сайте при помощи JavaScript.
HTML
Предположим, что у нас есть следующая
HTML разметка:
<!-- Форма поиска на сайте -->
<form>
<input type="text" name="search" placeholder="Поиск">
<button type="submit">Искать</button>
</form>
<!-- Список элементов, которые необходимо искать -->
<ul class="list">
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
<li>Элемент 4</li>
<li>Элемент 5</li>
</ul>
<!-- Результат поиска -->
<div class="search-results"></div>
JavaScript
Теперь напишем сам JavaScript, который будет искать элементы в списке по ключевому слову из поля поиска.
const form = document.querySelector('form');
const input = document.querySelector('input[name="search"]');
const list = document.querySelector('.list');
const results = document.querySelector('.search-results');
form.addEventListener('submit', event => {
event.preventDefault();
const searchTerm = input.value.toLowerCase();
const items = list.querySelectorAll('li');
let matches = [];
items.forEach(item => {
const text = item.textContent.toLowerCase();
if (text.includes(searchTerm)) {
match...3 367
У нас тут есть кстати канал с вакансиями для фронтов - захожу по будням и скидываю несколько вакансий - заходите
https://t.me/frontend_jobs_dh
3 367
Привет Мэн! Давай сегодня поговорим о том, как можно делать асинхронную обработку данных в JavaScript, используя промисы, async/await и обратные вызовы.
Возможно, ты уже слышал об этих методах, но не знаешь, как их правильно применять. Именно об этом мы и поговорим сегодня.
Для начала, давай разберемся, что такое асинхронное программирование. Если говорить простыми словами, это когда программа может выполнять несколько задач одновременно, не забивая движок JavaScript.
Например, если мы загружаем картинку на страницу, то мы не хотим, чтобы весь сайт зависал пока картинка загружается. Вот здесь-то и пригодится асинхронное программирование.
Итак, первый метод - обратный вызов (callback). Это функция, которая вызывается по завершении выполнения другой функции. Обычно его используют, когда нужно получить данные из внешнего источника. Однако, проблема в том, что при использовании много callback'ов программу становится трудно читать и поддерживать.
Теперь рассмотрим промисы. Они используются для работы с асинхронными операциями и предназначены для работы с асинхронными запросами. Промис - это объект, который помогает обрабатывать значение, которое может быть доступно только в будущем. Преимущества промисов заключаются в том, что они устраняют проблемы обратного вызова и делают код более понятным.
И, наконец, async/await. Это набор ключевых слов, который позволяет писать асинхронный код, как будто он синхронный. Этот метод является более новым и удобным, чем использование промисов, но требует минимальных знаний.
Таким образом, Мэн, асинхронное программирование - это важная техника, которая помогает улучшить производительность приложения. Однако, оно может быть сложным и запутанным, если использовать его не правильно. Поэтому выбери метод, который лучше всего подходит тебе и пиши код правильно!
Да и поставь лайк, емое) 😁
3 367
Джуниоров не берут на работу!
Это потому что у них нет коммерческого опыта. Но где его взять, если не берут на работу без опыта?
Чтобы наработать опыт надо делать пет-проекты — это сайты, приложения и сервисы, которые похожи на коммерческие и показывают весь опыт джуна на практике.
Обычно новички не могут придумать такие проекты самостоятельно.
Поэтому один добрый тимлид выкладывает такие пет-проекты к себе в телеграм-канал, чтобы помочь новичкам, стартующим в профессии.
Подпишитесь, пока этот канал открыт
3 367
А мы тут добавили 3 главу в наш учебник по JS . Учебник еще сыроват, где то что то может быть не так - заметили - дайте знать)
