Как научиться реагировать в 2023 году

Поскольку React является самой популярной библиотекой JavaScript для создания интерфейсных программ, никогда не было лучшего года для изучения React, чем 2023 год.

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

Нужно изучить JavaScript? Вы можете научиться этому во время обучения React

Вопрос, который мне чаще всего задают начинающие, которые хотят изучить React, таков: «нужно ли мне изучать JavaScript?»

React – это библиотека JavaScript, и ее часто рекламируют как просто JavaScript. Это говорит о том, что для того чтобы действительно научиться React, вы должны сначала знать JavaScript. Я бы охарактеризовал связь JavaScript с React так:чем лучше вы знаете JavaScript, тем лучшим разработчиком React станете.

Учитывая это, вы это делаете нет сначала нужно изучить весь JavaScript. Многие концепции JavaScript можно изучить при изучении React.

Вот краткий перечень некоторых концепций JavaScript, которые вам нужно будет понять, чтобы эффективно использовать React. К ним относятся:

  • Переменные
  • Массивы (и функция .map())
  • Объекты
  • События JavaScript
  • Функции и функции стрелок
  • Объемы и закрытия
  • Синтаксис Promises и async-await.
  • Основная обработка ошибок

Это все концепции JavaScript, которые, по моему опыту, вам действительно нужно знать, чтобы работать с React на любом уровне.

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

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

Ищете учебник? Используйте новые документы React

Когда вы впервые начинаете свой путь обучения React, ваш первый вопрос, скорее всего, будет: «где я могу получить всю необходимую информацию, связанную с React?». Вы можете спросить, следует ли смотреть курсы на YouTube или покупать курс на Udemy.

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

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

Если вы захотите создать новый проект React, вы можете сделать это очень быстро в браузере по ссылке react.new. Это создаст CodeSandbox с полным приложением React, с которым вы можете возиться. Это гораздо быстрее и проще сделать, создав проект на своем компьютере.

Вы можете найти новую документацию React на beta.reactjs.org. Со временем вы сможете его найти прямо на reactjs.org.

Screen-Shot-2023-01-02-at-5.27.01-AM
beta.reactjs.org

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

Вам не нужно изучать компоненты класса

Если вам интересно, нужно ли вам учить компоненты класса в 2023 году, вам не нужно.

Когда вы начнете изучать React, вы услышите об этом предмете под названием a компонент класса базирующийся на обычном классе JavaScript. Этому больше не нужно учиться как React-разработчику, но это может принести вам пользу.

После ввода функции под названием Хуки React В 2018 году разработчики React перешли к использованию функциональных компонентов, созданных с помощью функций JavaScript.

Компоненты класса все еще являются частью React и они все еще используются в рабочем коде в ряде случаев (например, пределы ошибок). Но имейте в виду, что вам не нужно изучать их, чтобы иметь опыт работы с React.

На самом деле я редко сталкивался с ними, если не смотрю на более старую кодовую базу. Большинство из них уже перенесены в функциональные компоненты и хуки React.

Сделайте услугу и научитесь реагировать на запросы

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

Когда вы дойдете до момента получения данных, я настоятельно рекомендую вам изучить библиотеку под названием Реагировать на запрос.

Вы можете установить React Query через пакет npm @tanstack/react-query.

Screen-Shot-2023-01-02-at-5.28.02-AM
React Query, также называемый Tanstack Query

React Query стала основной библиотекой для получения и управления внешними данными в программах React.

Каковы преимущества использования React Query? Кроме того, что это библиотека, с которой сейчас знакомы и полагаются многие разработчики React и компаний, вам будет очень полезно изучить React Query, поскольку это, пожалуй, самый мощный способ для вас получать внешние данные и управлять ими в своих программах React.

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

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

Я бы научился React Query после того, как вы научитесь получать данные вручную с помощью таких инструментов как Fetch API или Axios с хуком useEffect. После этого вы увидите преимущества использования React Query во всех проектах React.

Вам не нужно учить Redux

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

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

Redux больше не нужно учиться, как это было в прошлые годы. Первой причиной этого является выпуск Реагировать на контекст API. Во многих случаях разработчики React использовали Redux, чтобы просто передавать данные вокруг компонентов своей программы. Это работа, которую React Context может выполнить за нас.

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

изображение
Zustand – государственное управление «Bearbone».

Некоторые из этих новых, более «легких» библиотек управления состоянием включают:

Как только вы пройдете основы React и начнете создавать немного большие приложения за пределы стандартного приложения todo, вы поймете потребность в библиотеке управления состоянием. Redux все еще является великолепной библиотекой, но сначала посмотрите на библиотеку с более простым API, как Zustand.

Не обязательно искать приложение Create React

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

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

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

Create React App остается отличным инструментом для создания проектов React. Как и с Redux, появились новые альтернативы, которые дают вам все удобства Create React, но в меньшем, часто более быстром пакете.

Screen-Shot-2023-01-02-at-5.30.02-AM
Vite, альтернатива Create React App

Основным примером этого является Вит. Vite – это инструмент сборки, позволяющий создавать новый проект React, а также многие другие виды проектов JavaScript.

Преимущество использования Vite the over Create React App заключается в том, что он дает вам гораздо более быстрый сервер разработки.

Чтобы разрабатывать и вносить изменения в программу, она должна работать на сервере разработки. Для сравнения, создание React Appl может занять относительно много времени для запуска и ответа на вносимые в коде изменения (это называется горячая перезагрузка). Vite обеспечивает гораздо более быстрый опыт, кроме того, что требует гораздо меньше зависимостей.

Еще одна отличная альтернатива Create React App Next.js. Далее – технически фреймворк React, который имеет много удобств, чтобы сделать разработку гораздо легче. Он поставляется с своим маршрутизатором и инструментами получения данных.

Преимущество использования такого фреймворка, как Next.js, заключается в том, что вам просто нужно принимать меньше решений, когда дело доходит до создания вашего проекта. Вам нужно выбрать гораздо меньше зависимостей, на которые возлагается ваш проект. Почти все, что нужно для создания программы React, встроено в Next.js

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

Хотите универсальный способ научиться реагировать?

Если вы хотите начать изучение React, вы можете не знать, что делать дальше, даже после этой статьи. И это вполне понятно.

React – это настоящее испытание, поэтому я создал полный ресурс, чтобы облегчить изучение React – учебный лагерь React. Это даст вам все необходимое обучение React, чтобы стать эффективным разработчиком React, всего за несколько недель, а не месяцев.

Просто нажмите на ссылку ниже, чтобы начать. Наслаждайтесь!

Нажмите, чтобы присоединиться к React Bootcamp
Нажмите, чтобы присоединиться к React Bootcamp

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *