Ответ 1

Ajax используется для обновления веб-страницы без необходимости ее перезагрузки: он отправляет запрос на сервер, но обычно ответ обрабатывается javascript, который динамически отображает новый элемент в браузере без необходимости перезагрузки всей страницы.

React - это javascript-библиотека, которая динамически обновляет страницу с помощью компонентов inferface. Компоненты вычисляются либо с помощью javascript-взаимодействия, либо с помощью запроса ajax, проходящего через сервер. Поэтому ReactJS также может использовать запросы Ajax для обновления страницы.

Усы и ручные элементы немного отличаются от ReactJS, поскольку главная цель - преобразовать шаблон в компонент, который будет отображаться на странице. Он также может использовать Ajax для получения данных (для получения шаблонов или json-данных).

Ответ 2

Это, вероятно, более простое объяснение, чем вы ищете, но для всех, кто может быть сбит с толку...

Чтобы понять React, вам нужно понять, как AJAX изменил все:

Помните интернет в 90-х?

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

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

Этот сайт был создан до того, как AJAX стал чем-то особенным.

Теперь взгляните на эту страницу: рядом с каждым ответом находится стрелка вверх. Идите вперед и нажмите один из них. Обратите внимание, что страница не перезагружается, но вы получаете отзыв: стрелка становится оранжевой. Это может показаться незначительным, но оно представляет собой большой прогресс в веб-технологиях.

Хорошая аналогия - аналоговые наручные часы. У этого есть лицо с числами и руками и ручкой на стороне. Ручку можно повернуть, чтобы изменить время. Представьте, что каждый раз, когда вы поворачиваете его, циферблат, цифры и стрелки уничтожаются и перестраиваются, чтобы показать новое время. Это Интернет до AJAX.

AJAX

AJAX расшифровывается как синхронный J аваскрипт A и X ML. Но самое важное слово там - Асинхронный, что означает "в другое время", и в результате взаимодействия с пользователем обрабатываются вне поля зрения пользователя.

Вот что происходит, когда вы нажимаете стрелку вверх на Qaru:

1. Ваш браузер (Chrome, Internet Explorer, Firefox или любой другой) отправляет сообщение на другой компьютер - Qaru "сервер". AJAX позволяет отправлять это сообщение без перезагрузки страницы. То, что отправляется, называется запросом, потому что ваш браузер запрашивает что-то с сервера. С сервера возвращается ответ.
2. Сервер Qaru использует бизнес-логику в коде "на стороне сервера" (код, который живет на сервере, а не загружается в ваш браузер), чтобы подтвердить, что вам разрешено нажимать стрелку (пример не если вы не вошли в систему, это будет означать повышение голосов.
3. Сервер SO отправляет сообщение в ваш браузер (ответ), в основном говоря "да" или "нет".

4. Возвращаемое сообщение обычно находится в формате JSON (нотация объекта JavaScript - просто причудливый термин для объекта JavaScript, который переводится в строку). Вероятно, это будет выглядеть примерно так:

   { "действие": "upvote", "успех": "правда" }

JSON - относительно новая вещь. До JSON этот ответ был бы в формате XML:

<xml>
  <action>upvote</action>
  <success>true</success>
</xml>

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

Все в наше время использует AJAX. Сложно представить Интернет без него, и как разработчику становится все легче писать веб-приложение, даже не зная, что такое AJAX. Это потому, что он стал ассимилированным в технологии javaScript, которые мы используем, например, React.

React.js

React - это библиотека javascript для создания пользовательских интерфейсов.

(Если вы хотите узнать больше о различиях между библиотеками, средами и наборами инструментов, ознакомьтесь с этим замечательным сообщением.)

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

React, Vue и Angular позволяют создавать "одностраничное приложение". Это приложение, которое использует только одну страницу! Рассмотрим веб-страницу Билла Гейтса. Каждый щелчок приведет к изменению HTML/CSS на экране... Вам никогда не понадобится переходить на другую страницу, если бы это было одностраничное приложение.

React - это гораздо больше, но в отношении AJAX React принимает ответ и обновляет "представление" (то, что видит пользователь), чтобы показать изменения.

Или, точнее, разработчик сказал React: "Мне нужна стрелка, которая становится оранжевой, когда пользователь щелкает по ней, и ответ AJAX имеет" действие ", а это" upvote "и" success "- это правда", а React обрабатывает все остальное. В этом случае стрелка будет "компонентом". Компонент - это основной строительный блок React, который принимает параметры и выдает результат. Обычно выводом является HTML для отображения на веб-странице.

Усы

Усы - это система шаблонов. Это означает, что вы можете разделить контент и структуру веб-страницы. Например, здесь обычная HTML-страница без усов:

<h1>This is the Title of My Page. This is Content</h1>
<p>This is a paragraph. blah blah blah. My email is [email protected]</p>
<footer>Contact me at [email protected]</footer>

Структура определяется HTML. <h1> и <p> являются "тегами", которые сообщают браузеру (Chrome, Firefox или IE), как контент делится на разделы.

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

Усы стремятся исправить это (среди прочего), позволяя вам использовать переменные для отображения контента в HTML. Усы вы можете сделать что-то вроде этого:

<script>
  var json = {
    title: "This is the Title of My Page. This is Content",
    paragraph: "This is a paragraph. blah blah blah. My email is ",
    footer_verbiage: "Contact me at ",
    email: "[email protected]"
  }
</script>

<h1>{{title}}</h1>
<p>{{paragraph}} {{email}}</p>
<footer>{{footer_verbiage}} {{email}}</footer>

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

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

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

Вернемся к примеру с нашими дедушкиными часами - усы были бы стрелками часов. Руки принимают форму данных, передаваемых им из сцены.

Рули

Руль делает Усы более сильными. Здесь хороший пост для получения дополнительной информации о различиях. В нашем примере выше, Handlebars позволили бы повторно визуализировать шаблон (HTML) на клиенте (вашем браузере), а не на сервере. Таким образом, если ваш AJAX изменил какой-то контент, он может отображаться вживую в HTML.

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

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

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

Связывая все это вместе

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

Второй пример, однако, является динамической веб-страницей, поскольку содержимое определяется переменной json. Да, переменная json определена на той же странице (что означает, что она все еще является статической страницей), но если она была определена функцией ajax, она может измениться в любое время. Вот как выглядит основная функция AJAX:

AJAX.get("http://stackoverflow.api.com?upvote", function(response){
  json = response.data;
});

вы можете видеть, что у нас есть URL, который мы вызываем, и функция, которая говорит, что делать с ответом.

Реакция создаст AJAX выше и будет способствовать более быстрой разработке одностраничного приложения, чем без него, Усы позволят определять контент вне веб-страницы, а Рули будут меняться эта веб-страница на клиенте (веб-браузер), когда данные возвращаются с сервера.

Бонус - Что такое Angular? Почему это так важно?

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

MVC означает Модель, Вид, Контроллер. Это шаблон кодирования, который позволяет веб-приложениям избегать сложности (см. "spaghetti code"). Если вы когда-либо писали приложение в чистом jquery, вы знаете, что все может выйти из-под контроля очень быстро. Реакция, усы и руль вместе создают такую парадигму.

Введите Angular

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

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

Резюме:

Реагировать на AJAX так же, как самолет на его колеса - колеса необходимы для работы самолета, но это не первое, о чем вы думаете, когда думаете о самолете, - поэтому они на самом деле не сопоставимы. Колеса являются частью самолета, как и AJAX для React - AJAX является частью React.

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

Ответ 3

Проще говоря, React - это библиотека JavaScript, созданная Facebook. Из-за множества расширений он обычно рассматривается как фреймворк, но официальные документы помечают его как библиотеку для создания пользовательских интерфейсов. Ajax, с другой стороны, вовсе не является библиотекой, фреймворком или языком. Ajax - это методика, используемая программистами для вызова веб-API без прерывания потока кода. В конце этого дня ваш код JavaScript запускается синхронно построчно, а Ajax запускается асинхронно внутри вашего синхронного кода, но таким образом, что он никогда не приостановит ваш код и не будет ждать отправки вызова API и получил. С Ajax отправка и получение данных выполняются в фоновом режиме, поэтому вам не придется беспокоиться о задержке, необходимой для получения этих данных. Вы можете использовать Ajax в своем коде React. Ajax использует нечто, называемое Fetch, для фактического вызова API, и вы можете использовать различные методы для обработки данных, которые вы получаете от API, такие как .then и .catch или Async/Await. Вы также не обязаны использовать Fetch вообще, есть другие сторонние способы вызова API с Ajax, например, с помощью Axios. Я бы посоветовал вам посмотреть видео о том, как использовать эти различные инструменты, потому что когда вы поймете, как они все работают, вы обнаружите, что React и Ajax можно использовать вместе для создания отличного приложения. Надеюсь, что это помогло, пожалуйста, проголосуйте, как вы относились к этому ответу. Я новичок на этом сайте.

Ответ 4

просто для того, чтобы прояснить реакцию - это не фреймворк, это библиотека!

возьмите его из устья лошади:

https://facebook.github.io/react/

Ответ 5

Ajax

Мы используем ajax для отправки HTTP-запросов. И мы не можем повторно отобразить конкретную область страницы (DOM), используя один ajax. Нам нужен jquery для повторной обработки страницы после вызова ajax с ответом. Фактически сравнение jquery + HTML и React.js гораздо лучше, чем сравнение ajax и React.js.

React.js

Роль response.js заключается в разделении страницы (DOM) на маленькие точки (Компоненты). ex: - Область профиля изображения, Главная Навигация, Боковая панель, Текстовое поле, Кнопка. и т.д. от Больших миров до небольших островов. Самое главное, мы можем связать функциональные возможности с этими компонентами. Пример: - Предположим, что пользователям нужно всплывающее окно, чтобы загрузить изображение профиля, нажав на кнопку "Область изображения профиля". Мы можем написать функцию, чтобы открыть всплывающее окно. А также мы можем написать еще одну функцию для загрузки изображения профиля в базу данных. Таким образом, мы можем использовать ajax внутри React.js

Пожалуйста, следуйте этому tutorial.