Самые важные уроки, которые я вынес за год работы с React

От автора: начинать с новой технологии может быть довольно хлопотно. Вы обычно окружаете себя морем учебников и статей, за которыми следуют миллионы личных мнений. И каждый утверждает, что они нашли «правильный и совершенный путь». Это оставляет нам дискуссию о том, будет ли наш выбранный учебник пустой тратой времени или нет.

Прежде чем погрузиться в океан, мы должны понять основные концепции технологии. Затем нам нужно разработать технологический подход. Если мы начинаем изучать React, нам сначала нужно подумать об этом. Только позже мы можем начать смешивать различные мышления в что-то одно.

В этой статье мы расскажем про некоторые важные для изучения React уроки, которые я узнал об этом мышлении из моего личного опыта. Мы будем работать в течение дня и ночи с личными проектами и даже с темой, которую я дал на местном мероприятии JavaScript.

Итак, начнем!

React развивается, поэтому вы должны быть в курсе событий

Если вы помните начальное объявление версии 16.3.0, вы помните, как все были возбуждены. Вот некоторые из изменений и улучшений, которые мы получили:

Команда React Core и все участники делают большую работу, пытаясь улучшить технологию, которую все мы обожаем. А в версии 16.4.0 мы получили Pointer Events.

Дальнейшие изменения, безусловно, придут, и это всего лишь вопрос времени: Async Rendering, Caching, v. 17.0.0 и многие другие, еще не известные.

Поэтому, если вы хотите быть наверху, вы должны быть в курсе событий, происходящих в сообществе.

Знайте, как все работает и почему они разрабатываются. Узнайте, какие проблемы решаются и как облегчается процесс разработки. Это действительно поможет вам.

Не бойтесь разбить свой код на маленькие куски

Реакция основана на компонентах. Поэтому вы должны использовать эту концепцию и не бояться разделить большие куски на более мелкие.

Иногда простой компонент может быть сделан из 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.

// 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, но вы хотите использовать его, потому что все используют, не зная, что это настоящая цель, не делайте этого. Имейте мнение и не бойтесь постоять за себя, если другие вас подтолкнут.

Иногда вы можете подумать, что, используя новейшие технологии и записывая сложный код, вы говорите миру: «Я не junior, я становлюсь middle/senior. Посмотрите, что я могу сделать!

Честно говоря, это был мой настрой в начале моей карьеры разработчика. Но со временем вы понимаете, что с кодом, который был написан без демонстрации или потому, что «он работает», легче жить.

Люди уважают людей, которые облегчают жизнь другим людям. Таким образом, если ваша цель состоит в том, чтобы завоевать уважение, продвигаться в ряды и улучшаться, ставьте целью код для команды, а не для себя.

Вы станете любимым игроком команды.

Рефакторинг, рефакторинг и рефактор — это нормально

Вы будете менять мнение десятки раз, хотя руководитель проекта будет менять его чаще. Другие будут критиковать вашу работу, и вы будете критиковать ее. В результате вам придется менять код много раз.

Но не беспокойтесь, это естественный процесс обучения. Без ошибок и ошибок мы не можем что-то улучшить.

Чем больше раз мы падаем, тем легче вставать.

Но вот подсказка: убедитесь, что вы протестировали свое текущее программное обеспечение. Smoke, unit, integration, snapshot  — не стесняйтесь их.

Каждый столкнулся или столкнется со сценарием, когда тест мог бы сэкономить драгоценное время.

И если вы, как и многие люди, считаете, что это пустая трата времени, просто попробуйте немного подумать.

И это довольно большие выгоды.

Если вам это нравится, вы будете процветать

За предыдущий год моя цель состояла в том, чтобы лучше справиться с React. Я хотел поговорить об этом. Я хотел, чтобы другие наслаждались этим со мной.

Я мог постоянно сидеть на ночном кодировании, смотреть разные разговоры и наслаждаться каждой минутой.

Дело в том, что если вы хотите чего-то, как-то все начинают помогать вам. И в прошлом месяце я провел свое первое выступление по React в толпе из 200 человек.

В течение этого года я стал сильнее и увереннее с React — различные модели, парадигмы и внутренние работы. Я могу обсудить что-то продвинутое и научить других тому, чего я боялся раньше.

И сегодня я до сих пор ощущаю то же волнение и наслаждение, что и год назад.

Поэтому я бы рекомендовал всем спросить себя: «Тебе нравится то, что ты делаешь?»

Если нет, продолжайте искать эту специальную пьесу, о которой вы можете поговорить часами, учитесь каждую ночь и будьте счастливы.

Потому что мы должны найти то, что ближе всего к нашим сердцам. Успех не может быть принужден, он должен быть достигнут.

Если бы я мог вернуться на год назад, это то, что я сказал бы себе, чтобы подготовиться к большому путешествию вперед. Спасибо за чтение!

Автор: Tomas Eglinskas

Источник: https://medium.freecodecamp.org/

Редакция: Команда webformyself.