September 11, 2021

Дорожная карта ReactJs для начинающих - 2021

В этой статье я расскажу вам о дорожной карте изучения React, я разбил концепцию React на небольшие части в виде модулей, чтобы ее было легче понять. Для изучения этих основ я добавил ссылки на официальную документацию (для большинства основ), куда вы можете пойти и изучить, интересный момент - я также добавил, чего вы сможете достичь, изучив эти основы🎯.

Предварительные условия📝:
Я предполагаю, что у вас есть базовое понимание следующего:

- Основы HTML (такие как элементы HTML, теги form, table, div и list с их атрибутами).

- Основы CSS (например, стилизация элементов html, селекторы CSS и бокс-модель).

- Основы JavaScript (такие как переменные, условные операторы, циклы, типы данных, манипулирование DOM и инициирование событий).

Итак, прежде чем переходить к дорожной карте, давайте сначала посмотрим, что такое React?

React - одна из самых популярных библиотек JavaScript для разработки интерактивных пользовательских интерфейсов. Функциональность React, основанная на компонентах, позволяет создавать многократно используемые компоненты, с помощью которых можно эффективно масштабировать приложение. Использование React в представлениях вашего приложения делает ваш код более предсказуемым и легким для отладки.

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

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

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

1. Ядро

Создание проекта React - Вы можете создать проект React, выполнив несколько команд, после чего появится шаблон приложения React, и вы сможете запустить приложение React, чтобы увидеть начальный пользовательский интерфейс React. Выполнив этот шаг, вы должны быть знакомы с концепцией создания нового проекта React локально с помощью CLI (интерфейс командной строки).

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

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

Типы компонентов - Важно иметь представление о компонентах, их типах и жизненном цикле компонентов. Вы должны иметь хорошее представление о различных типах компонентов и о том, какие из них когда следует использовать.

Обработка состояний/ хук useState - Состояние - это объект, в котором мы можем хранить, читать и обновлять данные в компоненте. В функциональном компоненте мы можем использовать хук 'useState' для локального управления состоянием. Изучив React state, вы должны хорошо понимать, как работает состояние, как использовать хук useState, как отображать значение состояния в JSX и как обновлять состояние.

Работа с функциями - функции в react аналогичны функциям javascript, мы можем создавать собственные функции для выполнения определенных задач. Вы должны уметь создавать функции в компоненте react и вызывать функцию.

Обработка событий JSX - События JSX позволяют нам обрабатывать события, которые специфичны для элементов реакта (JSX). Изучив события JSX, вы должны хорошо понимать различные события JSX (такие как onClick, onChange и т.д.) и их использование.

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

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

Props - С помощью props мы можем передавать данные от одного компонента к другому. Необходимо познакомиться с передачей props из родительского компонента в дочерний компонент, а затем с получением props и их использовании.

Условный рендеринг - Условный рендеринг позволяет отображать JSX условно, подобно тому, как мы используем условие if else в JavaScript. Узнав об условном рендеринге, вы сможете отображать пользовательский интерфейс только когда это будет необходимо, немаловажную роль здесь сыграет тернарный оператор, часто используемый в React JSX.

2. Основы

Отладка и логи - расширение React dev tools помогает отслеживать состояние реакта и компонентов в окне браузера. С этим расширением работа с React становится гораздо проще и удобней.

Подтягивание и отображение данных из внешнего API - Работа с REST API очень важна для веб-разработчика. Умение пользоваться встроенной функцией JS fetch для получения данных из конечной точки очень важно, также нужно понимать как хранить и отображать данные на пользовательском интерфейсе.

UseEffect hook - UseEffect hook позволяет вам решать, что делать после рендеринга компонента, также влияя на компонент на основе предоставленной ему зависимости, часто используется при работе.

Context API/useContext hook - Context API - это встроенная функциональность React для управления состоянием без использования каких-либо внешних библиотек. Изучив Context API, у вас будет хорошее представление о глобальном состоянии и управлении состоянием, хуке useContext и UserReducer.

Локальное хранилище браузера - локальное хранилище позволяет хранить данные локально в хранилище браузера.

React router - React router DOM является одной из популярных внешних библиотек для навигации вашего react-приложения, она также позволяет вашему пользовательскому интерфейсу синхронизироваться с URL. Изучив библиотеку вы научитесь работать с навигацией и маршрутизацией вашего приложения React и переключением пользовательского интерфейса в соответствии с маршрутом.

3. Стилизация UI

Grid layout - концепция CSS Grid Layout предлагает систему разметки на основе сетки для проектирования пользовательского интерфейса на основе строк и столбцов. Вы получите хорошее представление о размещении элементов пользовательского интерфейса в виде ячеек в макете сетки.

Flexbox - Flexbox Layout позволяет создавать гибкий и отзывчивый пользовательский интерфейс без использования позиционирования и float в CSS.

SCSS - Чтобы использовать scss, необходимо установить пакет node-sass с помощью npm. Это очень удобный препроцессор для CSS, имеет возможность импортировать другие scss-файлы, объявлять и использовать переменные, поддерживает вложенность стилей и многое другое.

Источник: https://dev.to/suhailzone/reactjs-roadmap-for-beginners-2021-14en