От автора: начинать с новой технологии может быть довольно хлопотно. Вы обычно окружаете себя морем учебников и статей, за которыми следуют миллионы личных мнений. И каждый утверждает, что они нашли «правильный и совершенный путь». Это оставляет нам дискуссию о том, будет ли наш выбранный учебник пустой тратой времени или нет.
Прежде чем погрузиться в океан, мы должны понять основные концепции технологии. Затем нам нужно разработать технологический подход. Если мы начинаем изучать React, нам сначала нужно подумать об этом. Только позже мы можем начать смешивать различные мышления в что-то одно.
В этой статье мы расскажем про некоторые важные для изучения React уроки, которые я узнал об этом мышлении из моего личного опыта. Мы будем работать в течение дня и ночи с личными проектами и даже с темой, которую я дал на местном мероприятии JavaScript.
Итак, начнем!
React развивается, поэтому вы должны быть в курсе событий
Если вы помните начальное объявление версии 16.3.0, вы помните, как все были возбуждены. Вот некоторые из изменений и улучшений, которые мы получили:
Официальный Context API
API createRef
API forwardRef
StrictMode
Component Lifecycle Changes
Команда React Core и все участники делают большую работу, пытаясь улучшить технологию, которую все мы обожаем. А в версии 16.4.0 мы получили Pointer Events.
Дальнейшие изменения, безусловно, придут, и это всего лишь вопрос времени: Async Rendering, Caching, v. 17.0.0 и многие другие, еще не известные.
Поэтому, если вы хотите быть наверху, вы должны быть в курсе событий, происходящих в сообществе.
Знайте, как все работает и почему они разрабатываются. Узнайте, какие проблемы решаются и как облегчается процесс разработки. Это действительно поможет вам.
Не бойтесь разбить свой код на маленькие куски
Реакция основана на компонентах. Поэтому вы должны использовать эту концепцию и не бояться разделить большие куски на более мелкие.
Иногда простой компонент может быть сделан из 4-5 строк кода, а в некоторых случаях это совершенно нормально.
Сделайте так, чтобы, если придет новый человек, ему не понадобятся дни, чтобы понять, как все работает.
|
1 2 3 4 5 6 7 8 9 10 |
// isn't this easy to understand? return ( [ <ChangeButton onClick={this.changeUserApprovalStatus} text="Let’s switch it!" />, <UserInformation status={status}/> ] ); |
Вам не нужно составлять компоненты, которые имеют сложную логику. Они могут быть только визуальными. Если это улучшает читаемость и тестирование кода и уменьшает запахи кода, это отличная победа для всех в команде.
|
1 2 3 4 5 6 7 8 |
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 как имена классов во всем мире, я бы рекомендовал использовать стилизованные компоненты. Это может улучшить удобочитаемость.
|
1 2 3 4 5 6 7 8 9 10 11 |
const Number = styled.h1` font-size: 36px; line-height: 40px; margin-right: 5px; padding: 0px; `; //.. <Container> <Number>{skipRatePre}</Number> <InfoName>Skip Rate</InfoName> </Container> |
Если вы боитесь создавать больше компонентов из-за загрязнения ваших папок с файлами, переосмыслите, как вы структурируете свой код. Я использую фрактальную структуру, и это потрясающе.
Не придерживайтесь основ — продвигайтесь вперед
Иногда вы можете подумать, что вы не понимаете чего-то достаточно, чтобы перейти к передовым материалам. Но часто вы не должны слишком беспокоиться об этом — возьмите вызов и убедитесь, что вы ошибаетесь.
Занимая продвинутые темы и подталкивая себя, вы можете понять больше об основах и о том, как они используются для больших вещей.
Существует много шаблонов, которые вы можете изучить:
Составные компоненты
Компоненты высокого порядка
Рендеринг props
Умные / немые компоненты
многие другие (попробуйте профилирование)
Изучите их все, и вы узнаете, почему и где они используются. Вы будете более комфортно чувствовать себя с React.
|
1 2 3 4 5 6 7 8 9 10 11 |
// 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. Посмотрите, что я могу сделать!
Честно говоря, это был мой настрой в начале моей карьеры разработчика. Но со временем вы понимаете, что с кодом, который был написан без демонстрации или потому, что «он работает», легче жить.
Сотрудники могут работать над вашими проектами, и вы не единственный человек, который отвечает за разработку / исправление / тестирование <вставить задачу>.
Команда может понять, что делали другие, не проведя длинную встречу. Достаточно пару минут для обсуждения.
Когда ваш коллега отправится на двухнедельный отпуск, вы можете взять на себя их задачу. И вам не придется работать над ним в течение 8 часов, потому что это можно сделать через час.
Люди уважают людей, которые облегчают жизнь другим людям. Таким образом, если ваша цель состоит в том, чтобы завоевать уважение, продвигаться в ряды и улучшаться, ставьте целью код для команды, а не для себя.
Вы станете любимым игроком команды.
Рефакторинг, рефакторинг и рефактор — это нормально
Вы будете менять мнение десятки раз, хотя руководитель проекта будет менять его чаще. Другие будут критиковать вашу работу, и вы будете критиковать ее. В результате вам придется менять код много раз.
Но не беспокойтесь, это естественный процесс обучения. Без ошибок и ошибок мы не можем что-то улучшить.
Чем больше раз мы падаем, тем легче вставать.
Но вот подсказка: убедитесь, что вы протестировали свое текущее программное обеспечение. Smoke, unit, integration, snapshot — не стесняйтесь их.
Каждый столкнулся или столкнется со сценарием, когда тест мог бы сэкономить драгоценное время.
И если вы, как и многие люди, считаете, что это пустая трата времени, просто попробуйте немного подумать.
Вам не придется сидеть со своим коллегой, объясняя, как все работает.
Вам не придется сидеть с коллегой, объясняя, почему все сломалось.
Вам не придется исправлять ошибки для своего коллеги.
Вам не придется исправлять ошибки, которые были найдены через 3 недели.
У вас будет время на то, что вам нужно.
И это довольно большие выгоды.
Если вам это нравится, вы будете процветать
За предыдущий год моя цель состояла в том, чтобы лучше справиться с React. Я хотел поговорить об этом. Я хотел, чтобы другие наслаждались этим со мной.
Я мог постоянно сидеть на ночном кодировании, смотреть разные разговоры и наслаждаться каждой минутой.
Дело в том, что если вы хотите чего-то, как-то все начинают помогать вам. И в прошлом месяце я провел свое первое выступление по React в толпе из 200 человек.
В течение этого года я стал сильнее и увереннее с React — различные модели, парадигмы и внутренние работы. Я могу обсудить что-то продвинутое и научить других тому, чего я боялся раньше.
И сегодня я до сих пор ощущаю то же волнение и наслаждение, что и год назад.
Поэтому я бы рекомендовал всем спросить себя: «Тебе нравится то, что ты делаешь?»
Если нет, продолжайте искать эту специальную пьесу, о которой вы можете поговорить часами, учитесь каждую ночь и будьте счастливы.
Потому что мы должны найти то, что ближе всего к нашим сердцам. Успех не может быть принужден, он должен быть достигнут.
Если бы я мог вернуться на год назад, это то, что я сказал бы себе, чтобы подготовиться к большому путешествию вперед. Спасибо за чтение!
Автор: Tomas Eglinskas
Источник: //medium.freecodecamp.org/
Редакция: Команда webformyself.
