Для абсолютных новичков

Итак, вы хотите изучить знаменитый React, да? Это хороший выбор! Но я предполагаю, что вы не знаете, с чего начать, и поэтому вы здесь. Попытка узнать что-то новое может стать непосильной задачей, если у вас нет руководства о том, что изучать в первую очередь и когда. Благодаря множеству обучающих ресурсов в Интернете, таких как YouTube и многое другое, вы можете легко запутаться, постоянно перескакивая с одного руководства на другое. Я создал эту дорожную карту, чтобы помочь вам понять, какой учебник YouTube вы должны посмотреть следующим.

Совет для профессионалов. Если вы хотите учиться, как профессионал, учитесь, создавая что-то ежедневно, даже если это всего лишь многоразовая кнопка. Кроме того, отправляйте эти крошечные проекты на свой GitHub (если он у вас есть). Такие небольшие сборки будут мотивировать вас в долгосрочной перспективе, поскольку вы будете визуализировать, как далеко вы продвинулись.

Теперь давайте начнем!

Понимание JSX

Используя JSX, вы можете создавать краткие HTML-подобные структуры в том же файле, что и ваш код JavaScript. В отличие от прошлого, вместо того, чтобы помещать JavaScript в HTML, JSX позволяет нам помещать HTML в JavaScript.

  • Что такое JSX и как работает React (одностраничное приложение)
  • Что такое элемент JSX
  • Как работать с атрибутами
  • Рендеринг элементов с помощью JSX
  • Рендеринг элементов с помощью React DOM
  • Понять, что такое виртуальный DOM

Понимание компонентов React

Компоненты – это независимые фрагменты кода, которые можно использовать повторно. Они служат той же цели, что и функции JavaScript, но работают изолированно и возвращают HTML через функцию render().

  • Что такое компоненты и почему реагировать все о них
  • Как создать функциональный компонент
  • Как визуализировать компонент
  • Как создать экземпляр компонента
  • Как взаимодействуют компоненты
  • Как использовать компоненты в функции рендеринга
  • Как ссылаться на компоненты из другого файла
  • Понимание контролируемых и неконтролируемых компонентов
  • Передача данных через свойства (важно)

Состояние React и работа с событиями

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

  • Прослушивание событий и работа с обработчиками событий
  • Управление состоянием с помощью хуков
  • Хук useState
  • Как можно обновить состояние
  • Прослушивание пользовательского ввода
  • Общение ребенка с родителями (снизу вверх)
  • Состояние против реквизита

Маршрутизация

React Router позволяет нам создавать SPA (одностраничное приложение) без обновления страницы при навигации пользователя

  • Что такое React Router и как его использовать
  • Как использовать условную маршрутизацию

Списки визуализации

  • Отображение списков данных
  • Использование списков с состоянием
  • Понимание ключей
  • Вывод условного содержимого

После того, как вы проверили все основы, упомянутые выше, не стесняйтесь погрузиться в расширенные разделы, такие как Redux, React Authentication, Отправка запросов Http (подключение к базе данных) и многое другое. Не забывайте учиться, когда вы строите.

Я надеюсь, что это руководство поможет. Счастливый ‹Программирование /›