Оффтоп Digital Skynet
356

Чему меня научил React

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

В закладки
Офис "Digital Skynet"

Начать лучше всего с основных концепций, а уже после погружаться в океан знаний.

Затем разработать собственный подход к изучению.

В статье я поделюсь своим опытом: расскажу о концепциях изучения и как систематизировать знания.

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

Следите за изменениями в React

Помните начальное объявление версии 16.3.0? Все были в предвкушении.

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

  • Official Context API
  • createRef API
  • forwardRef API
  • StrictMode
  • Component Lifecycle Changes

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

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

Поэтому, если вы хотите быть топовым разработчиком, будьте в курсе событий.

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

Разбивайте код на маленькие части

React основан на компонентах, поэтому используйте эту идею и не бойтесь разделять большие куски кода на более мелкие.

Иногда простой компонент может быть сделан из 4-5 строк кода, это совершенно нормально.

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

Делайте компоненты простыми. Если это улучшит читаемость, тестирование кода и уменьшит smells кода, это отличная победа для всех в команде.

В примере выше свойства являются статическими. Таким образом, у нас есть чистый компонент, который отвечает за сообщение об ошибке Not Found, и ничего больше.

Кроме того, если вам не нравятся классы CSS как имена классов во всем мире, я бы рекомендовал использовать стилизованные компоненты. Это сделает код более читабельным.

Если вы боитесь создавать много компонентов из-за захламления папок файлами, то переосмыслите, как вы структурируете свой код. Я использую фрактальную структуру.

Всегда развивайтесь

Вам будет казаться, что вы еще не всё знаете, чтобы перейти к более сложным темам. Тут заключается опасность: так можно думать всегда и оставаться на том же уровне. Всё, что нужно сделать, это перестать беспокоиться и бросить себе вызов.

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

Есть множество паттернов, которые можно изучать:

  • Compound Components
  • High Order Components
  • Render Props
  • Smart/Dumb Components
  • many others (try out Profiling)

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

Не бойтесь пробовать что-то новое в своей работе. Будьте готовы к тому, что люди будут спрашивать почему вы используете те или иные методы. Это нормально. Ваша задача - отстаивать свою позицию, приводя сильные аргументы. Даже если ваши предложения отвергнут, вы будете знать, что хотя бы попытались.

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

Не усложняйте

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

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

Когда вы пишите код, не забывайте, что кроме вас есть и другие люди, которые будут с ним работать. Представьте ситуацию: коллега уходит в двухнедельный отпуск и его задачу вешают на вас. Вы открываете код и понимаете, что здесь черт ногу сломит и надо потратить 8 часов, чтобы как-то разобраться в написанном. Не очень приятно, согласитесь.

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

Рефакторинг, рефакторинг и ещё раз рефакторинг

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

Не забывайте тестировать свою работу. Smoke, unit, integration, snapshot — не стесняйтесь использовать их.

Если вы, как и многие люди, считаете, что тестирование - это пустая трата времени, задумайтесь:

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

Неплохо, да?

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

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

Я ночами напролет писал код, смотрел видео, что-то изучал. Самое главное, мне это нравилось. Я получал удовольствие от обучения.

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

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

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

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

Потому что невозможно достичь успеха в том, что ты не любишь.

Адаптированный перевод статьи The most important lessons I’ve learned after a year of working with React от Digital Skynet 😉

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Digital Skynet", "author_type": "self", "tags": [], "comments": 2, "likes": 2, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 43614, "is_wide": false, "is_ugc": true, "date": "Mon, 13 Aug 2018 10:21:14 +0300" }
{ "id": 43614, "author_id": 187179, "diff_limit": 1000, "urls": {"diff":"\/comments\/43614\/get","add":"\/comments\/43614\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/43614"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791, "possessions": [] }

2 комментария 2 комм.

Популярные

По порядку

3

Филиал хабра is coming

Ответить
0

В ограниченном количестве — норм. ))

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Приложение-плацебо скачали
больше миллиона раз
Подписаться на push-уведомления
{ "page_type": "default" }