Важнейшие уроки, которые я получил после года работы с React

1656609493 vazhnejshie uroki kotorye ya poluchil posle goda raboty s react

Томас Эглинскас

t6ocyQo0GKtScWqgRiavllpNCFJDVI0xcLX8
Нет, я не писал это, но я знаю, что это привлекло ваше внимание?

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

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

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

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

Пойдемте!

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

Если вы помните начальный анонс версии 16.3.0, то помните, как все были взволнованы.

Вот некоторые изменения и улучшения, которые мы получили:

  • Официальный контекстный API
  • API createRef
  • API forwardRef
  • Строгий режим
  • Изменения жизненного цикла компонента

Команда 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 вам станет удобнее.

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

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

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

  1. Над вашими проектами могут работать коллеги, и вы не единственный человек, отвечающий за разработку/исправление/тестирование иlt;вставьте тасk>.
  2. Команда может понять, что делали другие, не просиживая долгих совещаний. Для обсуждения достаточно пары минут.
  3. Когда ваш коллега уйдет на двухнедельный отпуск, вы можете взять на себя его задачу. И вам не придется работать над этим 8 часов, ведь это можно сделать через час.

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

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

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

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

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

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

Но вот подсказка: обязательно проверьте текущее ПО. Smoke, unit, integration, snapshot – не стесняйтесь их.

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

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

  1. Вам не придется сидеть со своим коллегой, объясняя, как все работает.
  2. Вам не придется сидеть со своим коллегой, объясняя почему все сломалось.
  3. Вам не придется исправлять ошибки своего коллеги.
  4. Вам не придется исправлять ошибки, обнаруженные через 3 недели.
  5. У вас будет время сделать то, что вы хотите.

И это достаточно большие преимущества.

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

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

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

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

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

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

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

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

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

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

Спасибо, что читаете!

Если вам была полезна эта статья, ???.

Добавить комментарий

Ваш адрес email не будет опубликован.