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

1. - Незнание базового синтаксиса Javascript.

Javscript - сложный язык для изучения, и в большинстве случаев кажется, что проще скопировать код из какого-нибудь учебника, не понимая, как он работает под капотом. Даже самые глупые ошибки могут испортить вам время, потраченное на отладку приложения React, вместо того, чтобы наращивать его.

Ознакомьтесь с базовыми функциями ES10: распространение, плоский, фильтр, карта, стрелочные функции.

2. - setState является асинхронным.

Метод setState в React асинхронный. Большинство людей, которые использовали другие фреймворки, часто забывают об этом. Это означает, что если вы напишете фрагмент кода после метода setState, нет гарантии, что он будет выполняться только после завершения setState. Давайте посмотрим на это на примере:

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

3. - Забыть привязать это

Одна из распространенных ошибок, которую делают люди, - они забывают привязать это, когда им нужен доступ к реквизитам или состоянию. Простое исправление: привяжите это!

this.methodName= this.methodName.bind(this);

Добавьте это в свой конструктор, и все готово.

4. - Изучение React и Redux одновременно

Это очень распространенная тенденция, которой следуют новички, что приводит к разочарованию у новичков. Redux - это инструмент управления состоянием, который не нужен для создания простых учебных проектов. Нужно иметь прочную основу в React, а затем использовать функции, предлагаемые Redux. Кроме того,

5. - Переход от одного учебного пособия к другому.

Это я год назад.

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

Никогда не пытайтесь разобрать что-то кроме учебника. Сейчас не время экспериментировать!

Мой совет

  • Не пытайтесь узнать слишком много и слишком быстро. Потратьте время и изучите React небольшими более простыми шагами, сначала основы.
  • Учитесь только на React. Никаких Webpack, Babel, Redux. Определенно не Node.
    Многие люди хотят изучить стек MERN с самого начала, что не рекомендуется.
  • Прочтите официальную документацию. Все учебные пособия сделаны оттуда.
  • Начните с простых руководств, да, вам нужно снова создать это приложение списка Todo, даже если вы переходите с какого-то другого технического стека.
  • Если вы застряли, проверьте, не пропустили ли вы что-нибудь из учебника, и используете ту же версию, что и в учебнике.

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

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