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

1. Чувствуете, что не можете начать изучать React?

Нет коротких путей к обучению, вы должны быть терпеливы, изучение новых вещей — это вызов, для меня я разработчик, и мне всегда нужно учиться чему-то новому. Если вы хотите хорошо изучить React, то вам нужно потратить на него много времени, нужно делать это шаг за шагом и не позволять себе отвлекаться на другие технологические стеки.
Я слышал, что люди говорят, что У React была крутая кривая обучения до того, как я узнал об этом, но по моему собственному опыту я думаю, что нет крутой кривой обучения, если вы изучаете React шаг за шагом и не позволяете себе отвлекаться на другие технологические стеки по мере продвижения.< br /> Я выбрал несколько из них и кратко объяснил, почему это не лучший способ изучения React в сочетании с ними.

Изучаете React и TypeScript одновременно?

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

Изучаете React и Redux одновременно?

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

2. Предпосылки для изучения React

Поскольку React — это библиотека JS, невозможно обойти изучение JavaScript, и вы не можете изучить React без JavaScript или без знания JavaScript с самого начала, а React широко использует знания JavaScript.

Должен ли я сначала изучать React или JavaScript?

У вас должны быть хотя бы базовые знания JavaScript ES5 и некоторое понимание HTML и CSS. React также использует JavaScript ES6 (ES7, ES8, ES9), поэтому важно ознакомиться хотя бы с JavaScript ES6, прежде чем изучать React. JavaScript активно используется в проектах React, и при изучении React можно получить много знаний о JavaScript. Держите себя в напряжении во время обучения и не зацикливайтесь на основах JavaScript слишком долго — вы не увидите их в действии, если не примените их к реальным проектам. Начните создавать проекты React и оставайтесь любопытными! Переключайтесь между JavaScript и React по мере изучения React.

Почему я должен изучать React?

В пространстве веб-интерфейса есть много библиотек JavaScript, и новички обычно не задаются вопросом, зачем они им нужны, они могут знать только, что они нужны компании и работе. Однако иногда мы можем задать себе вопрос: зачем мне эта библиотека?
Какую проблему она решает для меня? Вот хороший способ ответить на этот вопрос: реализовать одно и то же приложение на простом JavaScript и React, чтобы React показал вам, какие проблемы он решает за вас. Используйте ту же технику, когда решаете, следует ли изучать React или другое решение (например, Vue или Angular), создайте базовое приложение, используя выбранное вами решение, и решите, какое решение лучше для вас, исходя из вашего опыта разработки!

3. Изучайте React шаг за шагом

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

Следуйте официальной документации React, чтобы узнать

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

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

Изучаем React, делая

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

Учитесь реагировать каждый день

Продолжайте писать код каждый день, вы можете принять вызов кода на 100 дней, пробовать каждый день и сделать это привычкой. Придерживайтесь этого какое-то время, и вы в конечном итоге станете профессиональным разработчиком React, обучение — это марафон, а не спринт.

Внешний выход

Получите отзывы от других разработчиков React, показав свои результаты. Если вы достигли какой-то вехи в своем проекте React, покажите ее другим и попросите их оставить отзыв. Вот несколько известных платформ, на которых вы можете поделиться своей работой в React:

  1. Реддит
  2. Реактифлюс
  3. Спектр"

Вы можете не только получать отзывы от людей, но и присоединяться к обсуждениям, чтобы более глубоко изучить React. Объяснение кому-то — отличный способ узнать что-то новое, и, возможно, вы на шаг впереди других новичков в React и можете помочь им решить их проблемы. Посетите ветку React для начинающих в React Subreddit на Reddit, где вы можете помочь другим разработчикам React решить их проблемы.

4. Установка среды React для начинающих

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

Установка узла и npm

Благодаря node.js, запускающему JavaScript вне браузера, и NPM (менеджеру пакетов Node), позволяющему устанавливать библиотеки, такие как React, в ваш проект, вам понадобятся оба инструмента практически для любого современного проекта JavaScript.

Использование кода Visual Studio

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

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

Создание проекта с помощью приложения create-реагировать

create-react-app — это решение, предоставляемое командой React для создания проектов React. Это позволяет вам начать изучение React с начального проекта React с нулевой конфигурацией, и вы можете просто сосредоточиться на изучении React, в то время как обо всех связанных с ним инструментах позаботится приложение create-react-app.

5. Узнайте больше о React

После того, как вы узнаете о компонентизации React, свойствах/состояниях и синтаксисе JSX, вы сможете погрузиться в более сложные концепции и шаблоны React, такие как.

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

Найдите дополнительные учебные ресурсы

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

Дорожная карта обучения React

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

  • React + React Router: разработка одностраничных приложений React с использованием маршрутизации
  • React + Firebase: привязка приложений React к базе данных и реализация аутентификации/авторизации пользователей.
  • React + GraphQL: подключение приложений React к серверным приложениям Node.js через интерфейс GraphQL.
  • React + Redux: использование предсказуемого управления состоянием в приложениях React

(конец)

  1. Реагировать на контекст