Всім доброго дня! Я закінчив курси по Angular(минулого і цього року). Маю багато зроблених проектів та багато всього вивчив за цей час(я так думаю). Але хотів задати питання, от як знайти роботу в невеликому місті Черкаси!? зараз всі на React, а Angular тільки із навиком роботи більше двох років. Так де ж ті навики взяти? На Linkedin є профіль але пропозицій немає. Хто що порадить?
як тільки про Київ думка прийшла, то зразу згадав скільки житло коштує і передумав)
Те, що ви закінчили відразу два курси це звичайно добре, але ви коли їх проходили, то запитували себе (і викладача), а де я власне буду працювати?
я мав надію, що мене візьмуть в ту компанію, яка викладає ці курси
І чого ж вас туди не взяли?
Например, после таких курсов как у Вас, то вообще никуда не возьмут :) Угараздило мою екс-компанию отправить к вам на курсы Ангуляр Адванс :)))
можливо через карантин призупинено) ныхто нічого не говорив
зараз всі на React
ось це потрібно було зрозуміти до того, як почали вчитися. Вас, мабудь, навчили смикати сервіси та підкладати дані до темплейту, ще й забили голову декорованою маячнею.
Так що є декілька варіантів: поїхати до більшого міста за проектами на Ангуляр (не впевнений, чи вистачить ЗП), перевчитися на Реакт (потрібно буде дуже добре вивчити TS/JS — не прототипи, якими вже ніхто не хизується, а методи обробки даних, та вибрати, який Реакт вчити: на класах або на хуках), або перевчитися на когось іншого, на кого є попит в Черкасах (це не страшно, бо перевчатися або доучуватися доведеться кожні 5 років).
А чем так сильно отличается «Реакт на хуках» от «Реката на классах»? Общая идеология-то одна и та же, а синтаксис хуков/методов класса — дело наживное, буквально пары дней должно быть достаточно.
буквально пары дней должно быть достаточно
Вы очень сильно заблуждаетесь, касательно пары дней. Чтобы перейти на хуки, и начать эффективно их использовать, у меня ушло месяц, за это время было написано десятки компонентов, кастомных хуков, изучены issues на github (типа этого github.com/...cebook/react/issues/14099), изучен исходный код некоторых компонентов material-ui которые были переписаны с использованием хуков.
Нюансов очень много ...
Вот пожалуйста простенький Dropdown на хуках:
anonymous
Sergiy Morenets
Sergiy Morenets
Vladyslav Kekukh
anonymous
Dmytro Shchurov
Антон Касьянов
Podoprigora Alexandr
import React, { useEffect, useCallback, useState, useRef } from 'react';
import PropTypes from 'prop-types';
import { CSSTransition } from 'react-transition-group';
import classNames from 'classnames';
import useEventCallback from '@components/hooks/useEventCallback';
import Modal from '@components/Modal';
import { usePopper } from '@components/Popper';
const getNextIndex = (menuElement, prevIndex, offset = 1) => {
const activeElement = document.activeElement;
const menuElementItems = Array.from(menuElement.children);
let nextElement = null;
if (activeElement === menuElement) {
nextElement = offset > 0 ? menuElement.firstChild : menuElement.lastChild;
} else if (offset > 0) {
nextElement = activeElement.nextElementSibling || menuElement.firstChild;
} else if (offset < 0) {
nextElement = activeElement.previousElementSibling || menuElement.lastChild;
}
while (nextElement && nextElement !== activeElement) {
if (
nextElement.getAttribute('role') !== 'menuitem' ||
nextElement.getAttribute('aria-disabled') === 'true'
) {
nextElement =
offset > 0 ? nextElement.nextElementSibling : nextElement.previousElementSibling;
if (!nextElement && activeElement !== menuElement) {
nextElement = offset > 0 ? menuElement.firstChild : menuElement.lastChild;
}
} else {
break;
}
}
return nextElement ? menuElementItems.indexOf(nextElement) : prevIndex;
};
const Menu = (props) => {
const {
open,
anchorRef,
placement = 'bottom-start',
children,
autoWidth = false,
width,
className,
style,
onClose = () => {}
} = props;
const defaultIndex = -1;
const { referenceRef, popperRef, popperState, popperInstance } = usePopper({
placement,
modifiers: [
{
name: 'offset',
options: {
offset: [0, 2]
}
}
]
});
const [exited, setExited] = useState(true);
const [selectedIndex, setSelectedIndex] = useState(defaultIndex);
const [menuStyle, setMenuStyle] = useState({ ...style, ...(width && { width }) });
const menuRef = useRef(null);
// Handlers
const handleModalClose = useEventCallback((ev) => {
onClose();
});
const handleMenuKeyDown = useEventCallback((ev) => {
switch (ev.key) {
case 'Tab':
ev.preventDefault();
onClose();
break;
case 'ArrowDown': {
ev.preventDefault();
setSelectedIndex((prevIndex) => {
return getNextIndex(menuRef.current, prevIndex, 1);
});
break;
}
case 'ArrowUp': {
ev.preventDefault();
setSelectedIndex((prevIndex) => {
return getNextIndex(menuRef.current, prevIndex, -1);
});
break;
}
default:
break;
}
});
const handleItemClick = useCallback(
(child, index) => (ev) => {
setSelectedIndex(index);
onClose();
if (child.props.onClick) {
child.props.onClick(ev);
}
},
[onClose]
);
const handleTransitionEnter = useCallback(() => {
setExited(false);
}, []);
const handleTransitionExited = useCallback(() => {
setExited(true);
}, []);
// Effects
useEffect(() => {
if (anchorRef.current) {
referenceRef(anchorRef.current);
}
}, [anchorRef, referenceRef]);
useEffect(() => {
if (open && menuRef.current) {
menuRef.current.focus();
} else if (!open && anchorRef.current) {
anchorRef.current.focus();
}
}, [open, popperState, anchorRef]);
useEffect(() => {
return () => {
if (!open) {
setSelectedIndex(defaultIndex);
}
};
}, [open, defaultIndex]);
useEffect(() => {
if (anchorRef.current && autoWidth) {
const anchorWidth = anchorRef.current.clientWidth;
setMenuStyle((prevStyle) => {
return { ...prevStyle, minWidth: anchorWidth };
});
}
}, [anchorRef, autoWidth]);
// Render
const currentPlacement = popperState.placement || placement;
const items = React.Children.map(children, (child, index) => {
return React.cloneElement(child, {
selected: index === selectedIndex,
onClick: handleItemClick(child, index)
});
});
return (
<Modal open={open || !exited} backdrop={false} onClose={handleModalClose}>
<div className="popper" ref={popperRef}>
<CSSTransition
in={open && !!popperInstance}
timeout={300}
classNames="menu"
onEnter={handleTransitionEnter}
onExited={handleTransitionExited}
>
<div
role="menu"
className={classNames('menu u-focus-outline-0', className, {
[`u-placement-${currentPlacement}`]: currentPlacement
})}
ref={menuRef}
tabIndex="-1"
style={menuStyle}
onKeyDown={handleMenuKeyDown}
>
{items}
</div>
</CSSTransition>
</div>
</Modal>
);
};
Menu.propTypes = {
anchorRef: PropTypes.object,
open: PropTypes.bool,
placement: PropTypes.string,
children: PropTypes.node,
autoWidth: PropTypes.bool,
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
className: PropTypes.string,
style: PropTypes.object,
onClose: PropTypes.func
};
export default Menu;
Ваш код это какая-то дичь, я сейчас не говорю в рамках фреймворка, просто куча if else, циклов while... огромные блоки, читаемость кода стремится к 0 уже простите... И зачем вам столько useState когда можно это переписать на dispatch с useReducer
Ну так покажите как надо! Или дайте ссылку на ваш код, где вы используете хуки.
И зачем вам столько useState когда можно это переписать на dispatch с useReducer
В данном примере смысла в useReducer нет никакого.
Как нужно писать чистый и понятный код в интернете куча статей, книжек и тд.
К примеру метод:
getNextIndex
которая включает в себя 5 блоков if/else с внутренным циклом это зашквар. Пишите понятные чистые функции без простыней и кучей зависимостей, это для начала. К примеру getNextIndex было бы не плохо обернуть в другие реиспользующиеся getNextElement, findActiveElement и тд
Уважаемый, покажи как надо, простой dropdown давай, сделай на хуках. И сравним у кого зашквар.
Хороший приклад, щоб ним можна було ефективно відлякувати молодняк
Не вам судить.
В Ангуларі цей код можна розділити на HTML-код і на клас
Для начала сами придерживайтесь того что советуете!
github.com/.../src/app/app.component.ts
Не совсем. Методы класса, а, тем более, наследование — это достаточно сильно отличается от концепции «код — как компонент». Я почти 3 года писал классы на TS, с декораторами и методами жизненного цикла. Сейчас — чистый жс и хуки. До этого всего — 4 года на ангуларе, но это выброшенные годы ;)
И потребовалось, чтобы в мозгу «щелкнуло», и он начал думать в стиле «вот данные, а результат когда-нибудь появится». И я скажу, что такой подход позволяет писать намного быстрее и с меньшим числом ошибок.
Оптимизацию доверяю фейсбуку.
Классы, с другой стороны, помогают со сложными взаимодействиями, но я верю Абрамову: если ваш код достаточно сложный в методах, это значит, что он недостаточно сложный в компонентах.
Еще позволю пример. Хорошо себе представляю, как это будет выглядеть без хуков, но с хуками — это просто конфета.
Eugene Rusakov
Dmytro Shchurov
// component.js
const { response: { data: listOfFilters } } = useFetchListOfFIlters();
const [selectedFilters, setSelectedFilters] = React.useState([]);
const { response: { data: listOfParams = [] } = useFetchOtherParams(selectedFilters);
const { response: { data: mainContent }, loading } = useFetchMainContent(listOfParams);
{listOfFilters.map(... setSelectedFilters or useCallback or useGetCallback )
{loading ? <Loading /> : <MainContent content={mainContent} />}
// api.js
function useFetchOtherParams(filters) {
const url = Rect.useMemo(() => {...}, [filters]);
const callback = React.useCallback(response => {...}, []);
return useFetch(url, callback);
}
// effects.js
function useFetch(...args){
const { url, options, callback } = useFetchArguments(...args);
много универсального кода на все случаи жизни
}
Это 4 строчки в компоненте, которые на классах превращаются в пол страницы кода с использованием совершенно иной идеологии.
Вас, мабудь, навчили смикати сервіси та підкладати дані до темплейту, ще й забили голову декорованою маячнею.
Вот честно, когда пишу на реакте, кошмарно не хватает сервисов, нормального DI и декораторов.
Очень легко писать в стиле: хочу такие-то данные, буду их ждать тут, кто может — скиньте. Дело привычки.
Декораторы — тайпскрипт в помощь (я на декораторах написал редакс симбиот и валидацию), но достаточно сложно дебажить.
DI, возможно, была бы полезна в тестах, но есть же перегрузка require(). А компонентам DI не нужна. Им по-барабану, кто данные прислал. Они их просто отображают. Запрос на данные — абстрактный. Можете менять на лету, кто его обслуживать будет при помощи того же import() или if (process.env.DEBUG) { window.fetch = mockupFetch}
Простой пример, где DI крайне упрощает жизнь.
Для редакса в ангуляре используем ngrx (допустим), в реакте — react-redux.
Что проще для использования: заинжектить фасад в компонент, просто добавив его в конструктор, или юзать connect(), все эти mapStateToProps, mapDispatchToProps, еще и зачастую оборачивая это в HOC?
Сложно сказать. Хотелось бы для общего развития поизучать ангулар с ngrx (я это уже не застал, т.к. с А2+ работал очень мало).. Я просто писал
kotebu
Artem Perchyk
static mapDispatchToProps = (dispatch) => ({
...bindActionCreators({
...actions,
eventNamesCodeListDataFetch: sharedActions.eventNamesCodeListDataFetch, // опционально
}, dispatch)
});
и мне было понятно, окуда что берется. Сейчас пишу с использованием redux-symbiote, useReducer и контекста. Это еще проще. В компоненте сразу данные в store, а запросы идут в dispatch(actions.some())Саме ТОМУ, що А2+ хворий на усю голову, я з ним не став продовжувати. Час покаже, що він нікому не буде потрібен.
«Не читал, но осуждаю» ©
Очень интересно посмотреть часть кода который вы сейчас пишете на React, и тоже самое на Angular с DI и декораторами. Поделитесь?
Кодом не поделюсь, выше пример где DI и @Injectable позволяет реализовать редакс гораздо минималистичнее в плане использования стора компонентом, чем в реакте.
А еще не хватает rxjs в реакте. Аж смешно, учитывая страдания мои страдания неофита, пока я к нему привыкал. Конечно, можно rx и к реакту прикрутить, но без async pipe не то
Изучаю сейчас React Native, и после работы с Angular на протяжении 4 лет, понял что React попросту написан по другому, и его не стоит пытаться переделать на подходы которые используются в Angular. Для себя мне проще использовать redux-observable и написать обертку rxjs над axios чем использовать fetch, но в плане всего остального, тех же хуков, jsx, лапшекода в компоненте, это нужно принять :) И очень не хватает DI, но выхожу из этой ситуации статичными методами или хелпер функциями
inversify, typescript, mobx?
Слово, то какое, ругательное.
Я как-то весной по парку гулял и случайно вступил в js фрэймворк.
Надо внимательнее смотреть под ноги!
Часто плотность фреймфорков настолько высокая, что приходится выбирать любой mature продукт, чтобы не прилипало к ботинку.
В redux-thunk есть третий параметр extraArgument, который может быть объектом с ссылками на сервисы и он инжектится в каждый thunk. В redux-saga есть контексты, которые так же позволяют инжектить. Но это все имеет смысл если вы держите бизнес-логику вне компонентов. Если пишите без стейт менеджмента, то context provider + простенький хук а-ля useServiceLocator примерно ту же роль исполнят
Якщо ви відчуваєте, що досить добре знаєте Ангулар і бачите попит на Реакт-розробників, то в чому проблема? Я на Реакті не писав, але вивчав його трохи — і після Ангулару він виглядає не дуже складно. Щодо досвіду — так, здобути його важко, тим паче, перший, але можна ще шукати і ремоут-вакансії — такі також іноді трапляються. Ну або переїзд в Київ чи ще кудись — цей шлях обрали багато ваших попередників. )
Пиляйте якийсь власний невеликий, але якісний продукт з хоча би самоокупною монетизацією.
Потім продасте продукт комусь, а самі вже знайдете серйозну працю на дядю, якщо ви звісно цього захочете.
Простір зараз створює багато нових, раніше невідомих ніш. Треба лише уважно придивитись та проаналізувати можливості.
Пиляйте якийсь власний невеликий, але якісний продукт з хоча би самоокупною монетизацією.
Потім продасте продукт комусь
Много знаете подобных проектов, вероятно они существуют, но как много их? Сможете назвать хотя бы 10ок, пусть даже на других стеках.
Люди пилят проекты за десятки тысяч $ которые по итогу оказываются мертвые ибо стрельнули, но не попали.
А тут вы предлагаете запилить человеку без опыта самоокупаемый продукт.
Еще хотел бы посоветовать освоить слепую печать, хотя бы латиницу, это вам в дальнейшем очень пригодится.
www.portnov.com/keyboarding-russian
www.livechat.com/typing-speed-test/
смішно) та все ж в нас є кантори де використовують фреймворк Angular але їх мало)
зараз повернувся до вивчення самого JS — codewars допомагає) я вже на співбесідах був раніше і коли ходив на свою першу для мене було здивуванням чому мене питають JS коли я вчив останні пів року перед тим TS і Angular) тож буду прокачувати свій JS)
Як знайти роботу інженеру по технологіям НАСА в селі Нові Петрівці?
Ну Безос же на своем ранчо построил частную аэрокосмическую компанию.
А вот поскольку ты задвигаешь, что США ничем не лучше Украины, то как-то странно видеть стеб про село и технологии NASA.
Двойные стандарты?
Про всяк випадок треба вивчити фразу «вільна каса» на всіх європейських мовах
Сейчас сложное время для поиска работы, развивайтесь далее в выбранном направлении, учите английский, через пол года — год ситуация улучшиться, будет намного проще искать работу.
Это не так, только зря потратит время и через год будет таким джуном как и сейчас только со знаниями React.
А что там его учить? React учится за месяц, Vue.js за 2 недели, там даже курсы не нужно заканчивать
Выучил Реакт за два дня, просто добавь в кофе...
Denys
Andrey Komisarenko
Left Outer Join
Mike Gorchak
Mihail Maxacov
Олександр Федоров
Podoprigora Alexandr
Фрэнк Сайдботтом
Maxim Deyneka
Рахіт Срінавасович Кумар
Максим Журавлёв
81 коментар
Додати коментар Підписатись на коментаріВідписатись від коментарів