Вы хотите изучить React — наиболее востребованную JavaScript библиотеку в мире. Что для этого необходимо предпринять? Рид Баргер собрал 7 основных навыков, которыми необходимо овладеть, чтобы стать профессиональным React разработчиком. Приводим перевод его статьи.
Составляя по кусочкам свой путь изучения React, легко оказаться подавленным количеством информации. Чтобы достичь успеха, не пытайтесь выучить все и сразу. Сфокусируйтесь на изучении необходимого.
Давайте разберемся с 7 ключевыми навыками, на которые необходимо обратить внимание, чтобы собирать впечатляющие приложения и стать востребованным React разработчиком.
Шаг 1: Досконально изучите основы HTML, CSS и JavaScript
Первый шаг в изучении Реакта — это что-то вроде шага назад.
Кирпичики, из которых состоит веб и каждая веб-страница в частности — это HTML, CSS и JavaScript. Любой хороший React разработчик должен знать, как их использовать. React основывается на них, чтобы создавать приложения для веба.
Если вы уже создавали что-то с помощью HTML, CSS и JavaScript, это вам однозначно на руку. К примеру, если вы уже делали landing page или небольшой веб-сайт.
Среди Vue, Angular, React, последний больше остальных завязан на JavaScript. React и есть JavaScript, с некоторыми дополнительными функциями. Поэтому работа с ним требует исчерпывающих знаний JavaScript.
Какие концепты JavaScript стоит изучить для работы с React?
- Основные структуры данных: переменные, объекты и массивы
- Методы массивов и работа с информацией в массивах:
.map(),.filter()и.reduce() - Быть хорошо знакомым с функциями, и немного с классами
- Асинхронный JavaScript: промисы, создание HTTP запросов с Fetch API, синтаксис async/await
- DOM: изучить создание, выбор и изменение HTML элементов, а также их атрибутов
- Деструктуризация объектов и массивов полезна при работе с данными
Многие разработчики утверждают, что вы должны знать “ES6/ES7/ES8/ES8Next JavaScript” (иными словами, самые новые фичи JavaScript), чтобы лучше изучить React. Более углубленные знания JavaScript могут помочь, но новые функции могут служить отвлекающим фактором для начинающих.
В первую очередь стоит сосредоточиться на уверенном понимании JavaScript концепций, перечисленных выше. Лучше всего с этим поможет практика — напишите несколько небольших проектов на JavaScript. И уже после этого приступайте к изучению более новых функций языка.
Шаг 2: Изучение основ React и хуков
Когда вы начнете уверенно работать с JavaScript, вы готовы к изучению Реакта и его фундаментальных концепций.
Эти основы специфичны для React и помогают строить приложения на React, используя паттерны, которых сам по себе JavaScript не имеет.
Какие концепции React необходимо знать?
- Что такое JSX (и чем он отличается от обычного HTML)
- Как рендерить (показывать) JSX элементы и как отображать или скрывать элементы на основании каких-то условий
- Как делить JSX на компоненты и как переиспользовать и организовывать эти компоненты для создания интерфейса приложения
- Как передавать данные (JSX элементы и компоненты тоже) в компоненты с помощью props, и когда это стоит делать
- Как хранить и обновлять данные в компонентах используя state и как “передавать state наверх” в другие компоненты
- Как использовать данные событий в React и обрабатывать события с onClick, onChange и onSubmit событий (т.е. события с кнопок, инпутов и форм)
За семь лет своего существования, React довольно часто изменялся. Вопрос, который я часто слышу — “Что стоит учить первым: старый или новый синтаксис?” В конце 2018 React получил большое обновление, включающее в себя React хуки.
Хуки были отличным нововведением. Они сделали React приложения более простыми, мощными, и позволяют нам писать меньше кода. Что действительно важно для вас — так это знать основные 5 хуков React.
Какие 5 React хуков необходимо знать прежде всего?
- useState: чтобы хранить и обрабатывать данные внутри отдельных компонентов
- useEffect; чтобы выполнять действия по типу HTTP запросов или работы с API браузера
- useRef: чтобы ссылаться на JSX элементы
- useContext: чтобы получать данные из React Context, для более простой передачи данных между компонентами (чем передача props)
- useReducer: чтобы хранить и обмениваться данными между разными компонентами
Хуков больше, чем 5, но остальные используются не настолько часто. Поэтому да, вам стоит изучить новейшие React фичи. Сразу начинайте использовать хуки. Они послужат основой любого вашего React приложения.
Шаг 3: Изучите, как получать данные из REST и GraphQL API.
Веб-страница на React это фронтенд полноценного приложения. В каждом приложении у вас будет как фронтенд на React, с которым пользователь взаимодействует, так и бэкенд, с которым наш код на React взаимодействует. Бэкенд это то, откуда мы получаем данные, и многое другое, по типу аутентификации наших пользователей.
Есть два пути работы с данными с бэкенда. Стандартный способ получения данных — из REST API. REST API это наиболее распространенный вид API. И более новый способ — с помощью GraphQL API.
Вы столкнетесь с обоими типами API в работе, поэтому изучите, как использовать React для взаимодействия с обоими.
Шаг 4: Изучите, как стилизовать ваши React приложения с библиотекой компонентов или CSS фреймворком
Каждое React-приложение требует стилизации внешнего вида. Первый способ — использование обычного CSS. Вы можете писать свои стили и размещать их в отдельном файле.
Но помимо CSS, многие React разработчики используют так называемые библиотеки компонентов для более простой стилизации. Библиотека компонентов дает нам переиспользуемые компоненты, у которых есть своя заранее прописанная стилизация. Самая популярная библиотека компонентов для React это Material UI. Но помимо нее существует много других, среди которых вы можете выбирать.
Также вы можете стилизовать приложение, используя CSS-фреймворки. Они, в отличие от библиотек компонентов React, не предоставляют готовые компоненты, но содержат в себе набор CSS-классов, позволяющих стилизовать ваш JSX. Наиболее популярный CSS-фреймворк — Tailwind CSS.
Вы, как разработчик, столкнетесь с обоими, поэтому стоит научиться использовать как библиотеку компонентов, так и CSS-фреймворк.
Шаг 5: Организуйте state в React с React Context
Что из себя представляет организация state? Это совокупность решений, где размещать данные и как с ними работать в рамках нашего приложения. Для организации state среди компонентов вашего приложения, используйте React Context.
React Context — это встроенный в React инструмент, позволяющий передавать данные между компонентами без использования props. Это помогает решить проблему “пробрасывания”, включающего в себя передачу props (данных) вниз по цепочке в компоненты с глубокой вложенностью.
С помощью React Context мы размещаем данные в созданный нами контекст, и после этого получаем к ним доступ, используя useContext() хук.
Что насчет Redux? Redux — это популярная библиотека для управления state в React приложениях. Это намного более сложный инструмент, чем вам необходимо в большинстве ваших React приложений. Redux создан для очень масштабных веб-ресурсов, когда как React Context хватит для любого вашего приложения.
К тому же вы можете получить множество преимуществ Redux, просто комбинируя React хуки и React Context. Это большое преимущество, по сравнению с изучением отдельной библиотеки.
Шаг 6: Изучите React роутеры. В частности, react-router-dom
Что такое роутер? Любой веб-сайт содержит множество страниц, по которым мы можем перемещаться в истории браузера. Чтобы создать эти страницы или пути в React, нам нужны роутеры.
В самом React нет своих роутеров, поэтому для этого мы используем внешнюю библиотеку, называющуюся react-router-dom.
react-router-dom требуется для создания страниц в нашем приложении, а также для навигации между ними. Он позволяет создавать ссылки на различные страницы нашего приложения и переходить на них, или перенаправлять их на другие страницы, если необходимо.
Какие функции react-router-dom необходимо изучить?
- Как создавать роуты приложения, используя компоненты
<Route />,<Switch />и<BrowserRouter /> - Как направлять пользователей на различные страницы с помощью <Link /> компонента и использовать useHistory() хук
- Как создавать динамические роуты с пропсами путей (т.е.
<Route path="/posts/:post-slug" component={Post} />) - Как перенаправлять пользователей с защищенных страниц с помощью
<Redirect />компонента
Шаг 7: Изучите паттерны аутентификации в React
Авторизированные пользователи —это посетители страницы, которые вошли в свой аккаунт нашего приложения. И мы хотим давать этим пользователям уникальный доступ к дополнительным страницам. По этой причине аутентификация стоит бок о бок с роутингом. Потому что авторизированные пользователи должны иметь возможность просматривать определенные страницы, недоступные остальным.
Что вам, как React разработчику, нужно знать про аутентификацию?
Есть один ключевой момент. Вам необходимо изучить, как показывать определенный контент авторизированным пользователям и скрывать его от неавторизированных.
Послесловие
В итоге, это те ключевые навыки, которые вам необходимо изучить, чтобы стать React разработчиком, создавать полноценные приложения и работать на позиции frontend разработчика.
Помимо этих 7 навыков, есть еще много других, позволяющих углубить ваше понимание разработки на React. К примеру, углубленное изучение работы браузеров, HTTP и API. Но если идти по плану шаг за шагом, со временем вы сможете свободно работать с React и разрабатывать приложения любых масштабов.