Как научиться ReactJS в 2021 году?

npx create-react-app myapp

npm start

npm run build

npm install

Вам не знакомы все вышеперечисленные команды?

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

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

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

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

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

1. Изучите основы HTML, CSS и JavaScript.

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

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

Разберитесь в основных строительных блоках веб-сайта. Как работают HTML, CSS и JavaScript. Синтаксис React и большинство концепций этой библиотеки основаны в основном на этих трех строительных блоках. Вы не столкнетесь с какими-либо проблемами при создании приложения, если вам понятны эти основы. Создайте что-нибудь самостоятельно, используя эти три строительных блока.

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

• Переменные, объекты, массивы, функции и классы.
• Общие методы массива, такие как .map (), .filter (), .reduce ()
• Функции ES6, такие как стрелочная функция, let, const. Узнайте о ключевом слове this, методе вызова, применения и привязки.
• Понятия асинхронного JavaScript, такие как обещания, обратный вызов, Async / Await.
• Узнайте, как работает DOM (объектная модель документа). Как создавать, выбирать и обновлять элементы HTML и их атрибуты.

2. Основы NodeJS, импорт и экспорт ключевых слов

Будучи разработчиком React, вы будете запускать множество сценариев / команд NPM, поэтому, когда вам будут понятны основы (HTML, CSS и JavaScript), поймите основы NodeJS.

• NPM (диспетчер пакетов узлов): вы должны знать о NPM (управление пакетами узлов). NPM используется для установки модулей и пакетов Node. Узнайте, как использовать основные команды / сценарии для установки пакетов и модулей.
• Импортировать ключевое слово: вам нужно будет использовать ключевое слово import в своем проекте React, чтобы использовать установленные модули Node.
• Ключевое слово экспорта: используйте это ключевое слово, когда вы создаете модуль / компонент, и вам нужно вернуть только часть, а не все методы и переменные.

3. Изучите основы React.

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

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

Теперь вопрос в том ... какие основные концепции вам следует изучить в ReactJS. Давай обсудим это ...

• Вы будете использовать синтаксис JSX в ReactJS. Синтаксис JSX чем-то похож на HTML, но имейте в виду, что он отличается от обычного HTML.
• Научитесь отображать элементы JSX. Показывать и скрывать элементы в зависимости от условий.
• Изучите концепцию состояния в ReactJS? Как это работает? По сути, состояние содержит синхронную переменную, и изменение значения состояния будет отражаться во всем приложении, где бы оно ни использовалось. Узнайте, как хранить и обновлять данные в State.
• В React вы будете использовать props ( Эй! Что это на самом деле? ). Мы знаем, что это может быть для вас новое слово. По сути, реквизиты похожи на аргументы, передаваемые функции или методу. Знайте, когда и как использовать. Вы будете использовать реквизиты в качестве входного аргумента для тегов HTML.
• Функциональный компонент, компонент класса и разница между ними.
• Как и в JavaScript, вы будете обрабатывать события в React. Узнайте, как обрабатывать некоторые общие события, такие как onClick, onChange и onSubmit (вы будете использовать эти события в кнопках, входах и формах).

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

• Простое todo-приложение
• Простой калькулятор
• Создайте корзину покупок
• Отображение пользовательской статистики GitHub с помощью GitHub API.

4. React Router

Большая часть фреймворка работает над концепцией маршрутизации ( Эй! Что это на самом деле? ). Будь то сайт электронной коммерции, образовательный сайт или любой другой веб-сайт, вы найдете разные страницы для разных целей. Теперь вопрос к вам ...

Как бы вы перенаправили с «домашней» страницы на страницу «блога»? Для этой цели вам необходимо настроить маршрутизацию в своем приложении. Разработчики React используют стороннюю библиотеку под названием response-router-dom для создания ссылок на разные страницы, для загрузки содержимого разных страниц , и для перенаправления на другие страницы.

Ниже приведены некоторые общие особенности react-router-dom, о которых вы должны знать при работе с вашим приложением.

• Как использовать компоненты <Route />, <Switch /> и <BrowserRouter />.
• Как выполнять навигацию с помощью компонента <Link /> и хука useHistory ().
• Создание динамических маршрутов с использованием свойства path, т.е. <Route path = ”/ posts /: post-slug” component = {Post} /> и получение значений пути с помощью ловушки useParams ().
• Как <Redirect /> работает в React Router.

5. Реагировать на хуки

Итак, вы закончили с основными строительными блоками и основами React. Пришло время изучить React Hooks. Эта новая функция была добавлена в React версии 16.8. С помощью React Hooks вы можете писать функции React без использования классов. Перехватчики React позволяют писать меньше кода, что делает ваше приложение более эффективным, простым и мощным.

Вы будете работать в основном над 5 основными концепциями React Hooks. Эти пять основных концепций приведены ниже:

• useState: большую часть времени в приложении React вы будете использовать эту концепцию для хранения данных и управления ими.
• useEffect: вы будете использовать эту концепцию в таких действиях, как HTTP-запросы и за работой с помощью API браузера.
• useRef: будет использоваться для ссылки на JSXelements.
• useContext: это свойство React Hooks будет использоваться для доступа к данным из React Context, чтобы легко обмениваться данными между компонентами (вместо передачи реквизитов)
• useReducer: эта концепция в перехватчиках React будет использоваться для хранения и управления данными в нескольких компонентах.

Мы обсудили только 5 ловушек, которые важно изучить. Есть более 5 ловушек, но на этапе обучения в этом нет необходимости. По мере того, как вы будете прогрессировать и столкнетесь с проблемами в своем приложении, вы будете медленно изучать больше хуков.

6. Я зарабатываю для работы с API в приложениях React.

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

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

В основном есть два способа работы с данными из бэкэнда. Самый распространенный и стандартный способ - использовать REST API . Другой, более новый - GraphQL API . В своей работе вы столкнетесь с проблемами, когда вам придется работать с обоими API. Узнайте, как работать с обоими видами API с помощью React.

7. Стилизация в React

В процессе разработки большую часть времени мы используем простой CSS, чтобы придать стиль нашему приложению. Но в React в основном разработчики используют библиотеку компонентов для упрощения стилизации. Доступно множество библиотек компонентов использовать, но самым популярным в React является Material UI .

Вы также можете использовать библиотеку служебных классов для стилизации вашего элемента. Популярная библиотека служебных классов - Tailwind CSS . Будучи разработчиком, вы столкнетесь с обоими этими факторами. Так что хорошо быть знакомым с обоими типами библиотек.

8. Webpack

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

9. Redux

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

Последняя мысль

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

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