Поначалу, работа с новой технологией крайне проблематична. Вы перечитываете сотни статей и мануалов, натыкаетесь на множество различных мнений, в каждом из которых написано, что именно это мнение достоверно и правильно. Из-за этого вы ведете долгие дискуссии с самим собой, по поводу того, какой источник информации выбрать.
Прежде чем глубоко погрузиться в обучение, мы должны понять основные концепции технологии. Далее мы должны развивать образ мышления, основанный на технологиях. Прежде чем мы начнем изучать React, нужно научиться думать как React. Значительно позже мы научимся критично оценивать противоречивые мнения и выработаем собственное.
В этой статье я расскажу вам о свое личном опыте работы с React и дам вам несколько ценных советов по работе с ним. В свой опыт работы с React я вложил целые дни и ночи, проведенные в работе над различными проектами и мой опыт выступлений на местных JavaScript ивентах.
Поехали!
React постоянно обновляется — будьте в курсе обновлений
Если вы помните анонс версии 16.3.0, тогда вы должны помнить, как все были взбудоражены этим обновлением.
Вот некоторые из изменений и улучшений, которые были внесены в React версии 16.3.0:
- официальное Context API
- createRef API
- forwardRef API
- StrictMode компонент
- Изменения в методах жизненного цикла
Команда React Core и энтузиасты по всему миру проделывают большую работу, пытаясь улучшить технологию, которую все мы так обожаем. В версии 16.4.0 мы получили свойство Pointer Events.
Дальнейшие изменения, безусловно, вскоре выйдут в свет, это всего лишь вопрос времени: асинхронный рендеринг, кэширование, версия 17.0.0 и многое другое — все это, пока еще скрыто за завесой тайны.
Так что если вы хотите добиться больших успехов, вам нужно быть в курсе того, что происходит в сообществе.
Узнайте, как все работает и почему были разработаны определенные функции. Узнайте, какие проблемы были решены и как облегчился процесс разработки. Это действительно вам поможет.
Не бойтесь разбивать свой код на более мелкие части
React основан на компонентах. Поэтому вы должны использовать эту концепцию в своих целях и не бояться разбивать большие куски на более мелкие.
Иногда простой компонент может состоять из 4–5 строк кода, в некоторых случаях это вполне нормально.
Сделайте свой код понятным для новичков, чтобы им не пришлось просиживать дни напролет, пытаясь понять что к чему.
// isn't this easy to understand?
return (
[
<ChangeButton
onClick={this.changeUserApprovalStatus}
text="Let’s switch it!"
/>,
<UserInformation status={status}/>
]
);
Во-первых, код должен быть легко читаем. Во-вторых прост в тестировании. В-третьих, не должно быть «кода с запашком». Если у вас получится соблюсти все эти правила — можете считать, что это ваша победа.
import ErrorMessage from './ErrorMessage';
const NotFound = () => (
<ErrorMessage
title="Oops! Page not found."
message="The page you are looking for does not exist!"
className="test_404-page"
/>
);
В приведенном выше примере, свойства являются статическими. Таким образом, у нас может быть чистый компонент, который отвечает за сообщение об ошибке на сайте «Not Found» и не более того.
Кроме того, если вам не нравятся CSS классы в качестве имен классов везде и всюду, я бы рекомендовал использовать стилизованные компоненты. Это поможет улучшить читабельность кода.
const Number = styled.h1`
font-size: 36px;
line-height: 40px;
margin-right: 5px;
padding: 0px;
`;
//..
<Container>
<Number>{skipRatePre}</Number>
<InfoName>Skip Rate</InfoName>
</Container>
Если вы боитесь создавать больше компонентов из-за высокой нагрузки и риска загрязнения папок с файлами, переосмыслите структуру кода. Я использую фрактальную структуру — она потрясающая.
Не придерживайтесь основ — двигайтесь дальше
Иногда наступает такой момент, когда вы слишком долго стоите на одном и том же месте и не можете перейти к дальнейшему изучению материала. Не стоит чересчур сильно беспокоиться по этому поводу — просто примите данный факт и принимайтесь за изучение следующей темы, бросьте вызов самому себе.
Начав изучать более продвинутые темы и постоянно подталкивая себя вперед, вы поймете куда больше базовых вещей, которые в дальнейшем помогут разобраться с более сложными аспектами той или иной технологии.
Ниже представлены несколько паттернов React, которые я советую вам изучить:
- Составные компоненты
- Компоненты высшего порядка
- Функция как потомок
- Умные и глупые компоненты
- Многие другие (попробуйте профайлинг)
Изучив их все, вы будете знать, для каких целей и где они используются. Вам станет намного комфортнее работать с React.
// looks like magic?
// it's not that hard when you just try
render() {
const children = React.Children.map(this.props.children,
(child, index) => {
return React.cloneElement(child, {
onSelect: () => this.props.onTabSelect(index)
});
});
return children;
}
Кроме того, не бойтесь пробовать что-то новое и необычное в своей работе, но, конечно, в пределах разумного! Не ограничивайтесь в экспериментах лишь над личными проектами.
Люди будут задавать вам каверзные вопросы и это вполне естественно. Ваша же задача — отстаивать свою работу и мнение с помощью неуемной решимости, а также нелишним будет наличие сильных аргументов.
Ваша цель должна заключаться в решении существующей проблемы, облегчении дальнейшей разработки, ну или можно просто немного почистить код от лишнего мусора. И даже в случае, если ваше предложения будет отклонено, вы вернетесь домой с богатым опытом за плечами, нежели вы бы просто сидели и молчали.
Не усложняйте
Возможно, это звучит немного противоречиво, но послушайте! В нашей жизни все должно быть сбалансировано. Нам не следует писать сотни строк кода, чтобы затем этим хвастаться перед коллегами, когда проблему можно было решить и десятью строками. Мы должны быть практичными и писать такой код, который легко понять и который просто делает свое дело.
Если вам не нужен Redux для достижения определенных целей, но вы хотите использовать его, потому что все его используют — не делайте этого! Если у вас есть собственное мнение по этому поводу — не бойтесь его высказывать, когда кто-то захочет вас в чем-то переубедить.
Многим из нас кажется, что когда мы используем новейшие технологии или пишем сложный комплексный код, то мы как бы заявляем всему миру:
«Я давно не джуниор, я давно стал мидлом / сениором. Смотрите, что я умею!»
Честно говоря, и я так думал в начале своей карьеры. Но со временем понимаешь, что код, который был написан без «выпендрежа» куда лучше и практичнее.
- Вы не единственный, кто отвечает за разработку/ тестирование/ отладку/ и многое другое. Ваши коллеги в равной степени ответственны за это.
- Команде для разрешения проблемы потребуется всего пару минут на обсуждение.
- Когда ваш коллега уходит в отпуск на две недели, вы можете ему помочь и взять его работу на себя. И вам не придется работать над этим в течение 8 часов в день, потому что при должном усердии можно справиться за час.
Люди уважают людей, которые облегчают им жизнь. Поэтому если вам нужно уважение коллег и повышение, ставьте целью улучшать код не для себя, а ради команды.
Вы станете незаменимым и любимым членом команды.
Рефакторинг, рефакторинг и рефакторинг — это нормально
Вы будете менять свое мнение десятки раз, хотя руководитель проекта будет делать это еще чаще. Другие ваши коллеги будут критиковать вашу работу и в конце концов вы и сами ее раскритикуете! В результате чего вы будете вынуждены постоянно изменять и дополнять свой код.
Однако не стоит волноваться по этому поводу — все это естественный процесс вашего обучения. Без ошибок и мелких недочетов невозможно обучиться коду. Чем больше мы ошибаемся — тем быстрее мы набираемся опыта.
Небольшой совет: убедитесь в том, что вы тщательно протестировали вашу программу: единица, интеграция, снэпшот — не стесняйтесь, тестируйте!
Многие уже столкнулись или столкнутся с тем, когда подобные тесты помогли им сэкономить кучу драгоценного времени. И если вы, как и многие другие, считаете, что это пустая трата времени — попробуйте взглянуть на это несколько иначе:
- Во-первых, вам не придется сидеть со своими коллегами и объяснять им, что и как работает.
- Во-вторых, вам не придется сидеть со своими коллегами и объяснять им, почему все сломалось.
- В-третьих, вам не придется исправлять ошибки для ваших коллег.
- В-четвертых, вам не придется исправлять ошибки, которые были найдены спустя несколько недель.
У вас будет больше времени на то, что вам нужно, в том числе и работу. И я считаю, что это достаточно неплохая выгода.
Если вы это любите — вы преуспеете в этом
В прошлом году я ставил себе цель: научиться лучше работать с React’ом. Здесь я хочу остановиться на этом поподробнее, поделиться своим опытом и впечатлениями с другими людьми.
Я наслаждался каждой минутой, когда в режиме нон-стоп мне приходилось кодить дни и ночи напролет. Я просматривал различные выступления и набирался опыта у профессионалов и мне это действительно нравилось!
Дело в том, что если вы действительно хотите чему-то научиться — многие люди захотят помочь вам в этом! Например, я в прошлом месяце выступил на одном из местных ивентов, посвященных работе с React, перед аудиторией в две сотни человек.
В этом году я вырос, как профессионал, и многому научился в работе с React: различные модели, парадигмы, внутренние процессы. Я могу обсуждать и объяснять другим людям те темы, которые боялся затрагивать ранее. Я до сих пор ощущаю то приятное волнение и удовольствие от работы с React, что и год назад.
Поэтому, спросите себя: «Нравится ли тебе то, что ты делаешь?»
Если нет, то продолжайте искать. Ищите такой язык или фреймворк, о котором вы способны говорить часами напролет. Ищите, посвящайте этому каждую ночь и вы найдете то, что так долго искали.
Все мы люди, поэтому было бы намного лучше, если бы вы занимались именно тем, чем вы хотите. Ведь успех нельзя принудить, его можно только достичь! Если бы я мог вернуться на год назад, я сказал бы себе: «Приготовься, впереди тебя ждут приключения! Так что вперед, за дело!»
Спасибо за прочтение!
Если вам понравилась эта статья, пожалуйста, поделитесь ею с друзьями!
Перевод статьи Tomas Eglinskas: The most important lessons I’ve learned after a year of working with React
