TL; DR;

Эта статья не предназначена для того, чтобы «научить вас реагировать за 5 минут», вместо этого она дает удочку, а не рыбу. Так что приготовьте свое терпение и сосредоточенность, это вам понадобится.

Начало

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

Достаточно ли я узнал, чтобы начать работу с настоящими приложениями?

Есть что-то, что я упустил или просто ошибся?

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

В этой статье описывается способ научиться реагировать, который поможет вам получить больше опыта за относительно короткое время, которого будет достаточно, чтобы начать работу с настоящими приложениями. Кроме того, это облегчит вам изучение таких вещей, как react-router или redux.

Ментальные рамки

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

Не пытайтесь взломать сложную тему с первой попытки, дайте ей некоторое время, например, 20–30 минут или около того, если это все еще трудно понять, оставьте ее на некоторое время. Заварите чай или прогуляйтесь, ваш мозг будет разбираться в вещах на заднем плане. Используйте Google или Stack Overflow, если считаете, что документы недостаточно понятны, или проверьте другие ресурсы, например, этот супер-красивый справочник по реагированию.

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

  1. JSX
  2. Виртуальный дом
  3. React.Component
  4. React.PureComponent
  5. Функциональный компонент
  6. Публичные / статические члены класса
  7. render (метод)
  8. ReactDOM.render
  9. штат
  10. конструктор
  11. setState
  12. реквизит
  13. propTypes
  14. defaultProps
  15. Жизненный цикл компонента
  16. События
  17. Компоненты Состав
  18. Компоненты высшего порядка
  19. Рендеринг реквизита
  20. Контекст
  21. Портал
  22. Ссылка

Некоторые из приведенных выше вещей взяты из главы «Расширенные концепции» документации React. Но я постоянно встречаюсь с ними во время разработки, и они становятся незаменимыми для реальных приложений.

Если некоторые из приведенных выше условий по-прежнему трудно получить, опять же, оставьте их в стороне и вернитесь на следующий день, используйте Google, Stack Overflow или что-нибудь еще, что вы сочтете полезным. Но не сдавайтесь, пробуйте снова и снова, пока не добьетесь этого хотя бы на каком-то базовом уровне.

Упражняться

К этому моменту вы должны кое-что знать. Хороший. А, может быть, даже подумываю о реализации собственного TODO-приложения. Не делай этого. Я предлагаю начать с элементарных вещей, которые вы часто увидите при разработке приложений для реагирования.

Есть шаблонный проект для начала с компонентами React. У него простые babel и webpacksetup, и он очень удобен для того, чтобы опробовать небольшие способы реагирования.

Я просмотрел свои проекты и составил их краткий список:

  1. Простой функциональный компонент, отображающий текущий день недели.
  2. Компонент класса, который использует композицию функциональных компонентов для рендеринга hello world
  3. Компонент класса, который запускает alert() при монтировании.
  4. Компонент, который получает новые реквизиты каждую секунду и использует shouldComponentUpdate, чтобы избежать повторного рендеринга, если реквизиты не были изменены.
  5. Компонент, который обрабатывает события одного из элементов, которые он отображает (например, onClick).
  6. Компонент, который отображает список из 500 элементов (данные списка могут быть созданы вне компонента)
  7. Компонент высшего порядка (HOC), который предоставляет координаты мыши.
  8. Компонент, который повторно отображает себя каждую секунду и случайным образом выбирает компонент для визуализации из набора 5–10.
  9. Убрать беспорядок с помощью componentWillUnmount (создать беспорядок на креплении компонента)
  10. Контекст, который определяет цвет фона по умолчанию и компонент, который случайным образом обновляет этот цвет при нажатии на кнопку.
  11. Компонент, который добавляет мета-теги в заголовок документа (изменяет DOM напрямую), обновляет их при обновлении реквизита и удаляет при размонтировании.
  12. Компонент Render props, который предоставляет текущую дату / время
  13. Компонент, использующий Portal для отображения настраиваемых мета-тегов.
  14. Неконтролируемый компонент, который вызывает предупреждение с содержанием из <input/> при отправке формы

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

Еще больше практики

Следующим вашим шагом будет решение технических задач. Попробуйте погуглить и найти их как можно больше. Спросите своих друзей о проблемах, которые они решали на собеседовании, поищите такие сайты, как https://codesignal.com/

Вот некоторые из проблем, обнаруженных на первой странице Google: https://github.com/kkvesper/react-test-task https://github.com/uber/coding-challenge-tools

Https://daveceddia.com/react-practice-projects/ https://developerjobsboard.co.uk/2018/07/28/an-example-senior-react-redux-developer-task/ https : //www.learnstorybook.com/react/en/simple-component/

Вопросы: https://github.com/sudheerj/reactjs-interview-questions

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

Что дальше?

Выбор за вами. Вы можете начать изучать более сложные вещи, такие как маршрутизация, управление состоянием и взаимодействие с сервером API. Кроме того, вы можете настроить свое мышление на разработку приложений, которые должны выдержать испытание временем и вашими товарищами по команде, вот вводная статья для этого. И, наконец, есть статья о том, как мы структурируем наши приложения.

Если у вас есть какие-либо вопросы или вы чувствуете, что в этой статье отсутствуют некоторые важные детали, я хотел бы услышать ваш отзыв! Ура!