Для абсолютных новичков
Итак, вы хотите изучить знаменитый 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 (подключение к базе данных) и многое другое. Не забывайте учиться, когда вы строите.
Я надеюсь, что это руководство поможет. Счастливый ‹Программирование /›