Фронтенд-разработка (DOM + React + Redux)

Самый популярный стек для современной разработки. Огромное количество практики. Погружение в MVC и архитектуру толстых клиентов.

Курс

JS: DOM API

PRO

Браузер это особая среда, в которой JavaScript получает возможность взаимодействовать с загруженными страницами сайтов. Для этого браузер предоставляет специальные объекты с большим количеством методов. С их помощью можно выполнять любые преобразования HTML добавляя интерактивность на странице. Не важно какой используется фреймворк или библиотека, все они, в конечном итоге, работают через эти объекты. Знание этой темы – основа фронтенд разработки, на которую нанизывается все остальное.

Курс

JS: Архитектура фронтенда

PRO

Несмотря на обилие различных фреймворков и способов разработки фронтенд приложений, существуют фундаментальные принципы, которые используются повсеместно и практически не меняются. Они касаются разбиения приложения на слои (например, MVC), выделения состояния и его организации, работы с текстами, контроля данных форм. Этот курс рассказывает о том, как строить архитектуру приложения без привязки к конкретным решениям и их особенностям.

Курс

JS: React

PRO

React — библиотека, которая перевернула наши представления о том, как разрабатывать фронтенд. В этом курсе мы затронем все аспекты его работы и шаг за шагом, начиная с простых компонентов, дойдем до взаимодействия с бэкендом и интеграции с кодом, написанным без его использования (на jQuery).

Курс

JS: Redux (React)

PRO

Redux — это официальный способ управлять состоянием в нетривиальных React приложениях. Несмотря на свою простоту и элегантность, он требует время на вникание. Кроме того, вокруг Redux огромная экосистема библиотек, автоматизирующих разные задачи. Этот курс посвящен в том числе самым популярным библиотекам.

Испытания

JS: DOM API
Модальное окно
application.js Реализуйте и экспортируйте по умолчанию ...
JS: DOM API
Пятнашки
Игра в 15 или пятнашки — популярная головоломка, придум...
JS: DOM API
Прогресс
src/application.js Реализуйте и экспортируйте по умолча...
JS: React
Не трогай меня
Buttons.jsx Реализуйте и экспортируйте по умолчанию ком...
JS: React
Модальные окна
App.jsx Реализуйте и экспортируйте по умолчанию компоне...
JS: Архитектура фронтенда
Состояние формы
app.js Реализуйте логику работы формы для добавления но...

Впечатления

Урок: React Redux

Грамотная задача, применялось все что было в предыдущих уроках. Плюс решение очень близко к учительскому. Спасибо! Функциональный стиль + реакт + редукс + финтюфлишки + ООП непреднамеренно заставляет писать всех приблизительно в одном общем стиле(или мне так кажется (-: ). Все равно круто!

React + redux можно считать грамотным подведением итогов, т.к. я думаю у тех кто смог вынести для себя достаточно информации из всех предыдущих глав с этими 2 курсами проблем вообще не может быть.

Урок: Refs

Данный курс зашел как по маслу, материал полностью доступен для понимания! Нет ни одного момента, который остался бы полностью не раскрытым. Даже глава "Производительность" дала ключевое понимание правильной оптимизации приложения на Реакте, хотя, казалось бы, что можно рассказать в одной главе на одну страничку про такое огромное как Optimization, но и тут Хекслет показал своё мастерство в подаче материала. Просто Восторг! Спасибо за отличнейший курс!

В очередной раз пришлось изрядно посидеть, по-перебирать варианты, переписать. Задание в целом показалось проще предыдущего за исключением того, что наибольшая сложность оказалась именно в том, что прежде всего необходимо было понять, что именно необходимо хранить в библиотеке i18next и уже традиционно - как корректно оформить state, чтобы можно было реализовать логику.

С оформлением state видимо необходимо решить множество подобных задач и посмотреть много чужого кода, чтобы понят наилучшие подходы по его организации. Т.к. у меня с этим по прежнему проблемы.

В целом спасибо за курс. Он оказался достаточно требовательным в плане времени и усидчивости и научил - в немного стрессовом режиме искать варианты решения, перечитывать, спрашивать, прокручивать в голове разные варианты, подходы, практики, иногда даже отбрасывать последовательность и логичность и писать любой код "лишь бы просто сработало как нужно")

Чего не хватало? - Больше теории о том, как правильно подходить к организации state, потому что всё остальное уже много раз практиковалось.

https://ru.hexlet.io/code_reviews/245227 (если возможно получить обратную связь или указание на самые проблемные места, буду крайне благодарен).

А теперь нужно внимательно изучить решение учителя :)

Упражнение супер! Да и весь этот курс. Для меня, как новичка, стало понятно, что программирование фронтенда - это прям весьма и весьма не просто. С выделением состояния конечно нелегко. Наверное нужно больше практики. Спасибо!

Урок: React Redux

Хочу сказать огромное спасибо за это задание, меня посетило ощущение, что теперь я знаю еще больше. На прошлое упражнение у меня ушло порядка 8-ми часов, а это я сделал меньше, чем за час, ниразу не запинаясь, и практически полностью похоже на решение учителя.

Спасибо ребят, вы лучшие! :)