Веб-разработка - одно из основных направлений в разработке программного обеспечения. Если вы хотите создавать свои личные проекты или создавать высококачественные отраслевые приложения, знание веб-разработки действительно важно. Понимание того, как работает Интернет и как создавать веб-приложения, открывает для вас множество возможностей. Вы можете создавать свои собственные веб-приложения и зарабатывать деньги на рекламе, вы можете работать в крупных технологических компаниях, вы можете создавать веб-сайты на фрилансе в соответствии с требованиями ваших клиентов.
Теперь мы все знаем, что веб-разработка состоит из двух основных компонентов: внешнего интерфейса и внутреннего интерфейса. Теперь интерфейс - это то, что пользователь видит и с которым взаимодействует, а серверная часть - это место, где хранится ваша основная бизнес-логика. Мы разрабатываем интерфейс с использованием HTML, CSS и JavaScript. Для серверной части мы используем такие инструменты и языки, как Nodejs (JavaScript), Django (Python), .Net (C #) и т. д. Теперь, чтобы упростить вашу разработку, некоторые действительно умные люди разработали несколько действительно классных фреймворков, которые могут облегчить вам большую часть стресса при разработке, Reactjs - лишь одна из таких библиотек. Теперь Reactjs используется для создания интерактивного интерфейса пользователя. Существуют также другие интерфейсные фреймворки, такие как Vuejs, Angular, просто чтобы назвать НЕСКОЛЬКО. Вы знаете, единственное, что сейчас не нужно миру, - это еще один фреймворк JavaScript. Но что заставляет так здорово реагировать? Почему почти каждая работа по фронтенд-разработке требует от вас навыков реагирования? Почему его так любят разработчики?
Love React 💖 ⚛
Не похоже, что React - лучший фреймворк. Есть люди, которые любят Vue, Angular и другие фреймворки. Даже мне нравится vue. Фактически, Vue имеет наибольшее количество github звезд⭐ (на сегодняшний день)! Но что делает React самым любимым фреймворком?
Теперь React - это интерфейсная библиотека, теперь я не хочу обсуждать разницу между библиотекой и фреймворками, вы можете сослаться на это видео для того же. Теперь React - это интерфейсная библиотека, разработанная Facebook, и, как я уже говорил ранее, многие умные люди написали это, чтобы сделать за вас тяжелую работу переднего плана. Вы видите, что Facebook осознал, что их сайт будет расти, пользователи будут наводнять его, поэтому им нужно было что-то, что действительно могло бы масштабироваться в интерфейсе, что-то, чем можно было бы легко управлять, что-то, что можно было бы повторно использовать при необходимости. Пришел React.
React работал над несколькими интересными идеями, например,
- Одностраничные приложения
- Многоразовые компоненты
- Виртуальный дом
- Библиотеки с открытым исходным кодом
1. Одностраничные приложения
Теперь мы знаем, что все веб-сайты в Интернете используют три основных файла для создания отличного интерфейса - HTML, CSS и JavaScript. Теперь задача HTML-файла - дать базовую структуру вашему веб-сайту, CSS используется для стилизации этих структур, а JS используется, чтобы сделать эти структуры интерактивными, чтобы пользователи могли отправлять и получать данные. Раньше на веб-сайтах были только ссылки, которые раньше переходили к какой-то другой части страницы, но в бэк-энде вашему браузеру приходилось взаимодействовать с сервером, чтобы получить вам новые файлы HTML, CSS, JS. Возникает идея одностраничных приложений.
Как правило, сейчас мы уделяем меньше внимания HTML и гораздо больше JavaScript, вы загружаете код приложения только один раз. Вместо того, чтобы делать новые запросы к серверу, где мы получаем новый документ, теперь наши приложения действуют больше как настольное приложение, где мы все время остаемся на одной и той же странице, а файл JavaScript просто изменяет или обновляет DOM для отображения новых вещи. Таким образом, вы могли войти в приложение и взаимодействовать с ним, больше не разговаривая с сервером. И этот способ написания приложений стал действительно популярным, и в 2010 году Google создал Angularjs, который стал стандартным способом создания приложений. Angularjs структурировал приложение в контейнерах, но по мере роста ваших приложений даже этим стало трудно управлять. Итак, в 2013 году появилась программа reactjs, которую Facebook запустил, понимая все проблемы. И это стало популярным, потому что компания React разработала совершенно новый способ создания клиентских приложений. Также случилось так, что в 2014 году angularjs осознали, что способ, которым они построили свой фреймворк, просто больше не позволяет создавать хорошие приложения. Поэтому в 2014 году они решили, что собираются переписать всю библиотеку, назовем ее angular, но поскольку они хотели полностью переписать, многие люди за это время начали реагировать.
2. Виртуальный дом 📃
Сейчас концепция виртуального дома не нова. Все эти библиотеки используют идею виртуального дома. Reactjs состоит из двух основных API, то есть React - используется для написания пользовательского интерфейса и ReactDOM - виртуальный дом.
Теперь библиотека React используется для написания компонентов и пользовательского интерфейса, и у этих пользовательских интерфейсов есть нечто, называемое состоянием . Состояние определяет, как пользовательский интерфейс выглядит в настоящее время. Теперь всякий раз, когда состояние обновляется, пользовательский интерфейс должен «реагировать» на эти изменения, и задача ReactDOM - отслеживать изменения и обновлять пользовательский интерфейс в DOM. В ответ вы не обновляете DOM напрямую, как в обычных проектах и приложениях JS. Вместо этого вы просто используете эти состояния вашего компонента пользовательского интерфейса, а ваш ReactDOM позаботится об обновлении DOM.
3. Многоразовые компоненты 🔁
Используя React, вы создаете действительно небольшие повторно используемые компоненты, объединяете все различные компоненты и создаете свою веб-страницу. Например, ваша веб-страница может состоять из панели навигации, кнопок, значка профиля и т. Д. Теперь, используя реакцию, вы создаете компонент панели навигации, компонент кнопки, компонент значка профиля и просто используете этот компонент там, где это необходимо.
Эта идея очень помогает при отладке. Например, если ваша кнопка теперь работает так, как вы хотите, вы точно знаете, где искать свои ошибки. Вы также делаете меньше дублирования кода, что означает, что вы можете использовать ту же кнопку, тот же компонент значка профиля на какой-либо другой странице вашего приложения.
4. Библиотеки с открытым исходным кодом 📂
Теперь Angular предоставляет вам все дополнительные функции в самом фреймворке и требует, чтобы вы делали все так же, как ему нужно, что приводит к меньшей свободе в инструментах, которые вы можете использовать.
React - это просто UI-библиотека. Таким образом, React может обрабатывать только то, как выглядит ваш пользовательский интерфейс, обновлять пользовательский интерфейс на основе состояния и отображать то же самое в вашей DOM. Но когда вы создаете более крупные приложения, вам нужны некоторые дополнительные функции, такие как маршрутизатор, библиотеки управления состоянием и т. Д. Таким образом, у React есть большое сообщество, где вы можете выбрать любой инструмент для выполнения своей работы, что дает вам большую свободу.
- Если вам нужна маршрутизация, вы можете использовать - react router dom
- Вы хотите управление состоянием - Redux
- Вам нужен рендеринг на стороне сервера - Nextjs
Ресурсы 📖
Теперь я просто хотел представить эту идею Reactjs. Если вы хотите изучить React, у udemy есть много отличных курсов, но мне нравится Complete React Developer в 2021 году (с Redux, Hooks, GraphQL). Курс охватывает множество концепций реагирования, таких как состояние, управление состоянием - сокращение, маршрутизация, и вы создаете крупный проект - веб-сайт электронной коммерции с использованием всех этих инструментов.
Изучив React, вы можете углубиться в рендеринг на стороне сервера, и Nextjs действительно отлично подходит для этого. Вы можете использовать этот курс Next.js & React - Полное руководство (включая два пути!), чтобы изучить Nextjs.
Ну наконец то
Большое спасибо за чтение, надеюсь, вы кое-что узнали. Так что, если вы думали научиться реагировать, то сейчас самое время просто выбрать один из ресурсов реагирования и начать учиться😃! удачного обучения😎!
P.S. если вы хотите узнать сравнение этих фреймворков, посмотрите это видео.
