В этом блоге мы собираемся узнать об основах React.

Что такое реакция?

  • В начале веб-разработки у нас были только файлы HTML, CSS и javascript. Их использование — это HTML для дизайна веб-страницы, CSS для того, чтобы сделать наше приложение привлекательным, и javascript для определения того, как наше веб-приложение или веб-страница ведет себя в определенных условиях.
  • В первые дни веб-разработки веб-приложение было похоже на форму.
  • Если пользователь делает запрос, то файлы HTML, CSS и javascript будут получены с сервера. Если пользователь снова сделает тот же запрос, даже в этот раз файлы HTML, CSS и javascript будут получены с сервера. Так работают сайты уже много лет.
  • Но есть проблема. все веб-сайты будут работать в разных браузерах. и все браузеры будут разрабатываться разными группами разработчиков.

Что является императивным и декларативным:

  • В императивном языке программирования нам нужно вручную управлять DOM (объектной моделью документа), которая представляет собой формат с древовидной структурой. В этом случае, если мы хотим обновить элемент, нам нужно обновить DOM напрямую.
  • Но в декларативном языке программирования нам не нужно трогать DOM. Просто мы определяем объект javascript. React — это декларативный язык программирования. React будет автоматически управлять DOM. достаточно, если мы определим объект javascript. он автоматически обновит объект в соответствующем элементе DOM.

Зачем реагировать?

  • В React у нас есть концепция состояния, которая представляет собой объект JavaScript, описывающий приложение. Таким образом, все данные приложения находятся в пределах штата.
state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  • А также мы знаем о компонентах, которые мы можем создавать с помощью HTML внутри нашего файла JavaScript.
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
  • Идея состояния, которое является данными нашего приложения. работает с компонентами, которые построены с использованием того, что вы узнаете, называется JSX.
  • Состояние и компонент объединяются, чтобы дать нашей библиотеке React две вещи, которые являются компонентами, которые мы создали, — состояние нашего приложения. библиотека реагирования — это просто функция, которой мы даем все эти вещи.
function React(state, components){
 // do code here.
}
  • Эта функция собирается создать виртуальный дом. он создает javascript-версию DOM. Виртуальный DOM, который представляет собой древовидный объект

  • Виртуальный DOM дает план того, как он должен обновлять реальный дом. React обновляет фактический DOM, используя виртуальный DOM (чертеж).
  • Эта идея однонаправленного потока данных означает, что каждый раз, когда мы хотим что-то изменить на нашей веб-странице, состояние должно измениться, то есть данные должны измениться в нашем приложении.
  • Например, если пользователь нажимает кнопку. react объединяет как виртуальную, так и реальную DOM и обновляет фактический компонент DOM. однонаправленный поток данных, что означает, что данные могут двигаться только вниз от состояния нашего приложения до DOM. Этот однонаправленный поток данных является ограничением, так мы можем легко отлаживать код.

  • Поток данных происходит только сверху вниз. и важно, например, узел child1, это состояние хранится только в этом состоянии. он не сохраняется в другом состоянии. если дочернему узлу нужны эти родительские данные, то состояние передается от родителя к дочернему.

Почему React вездесущ?

  • Для веб-приложения в основном мы используем два пакета. один — модуль ядра реакции, а другой — реактивный DOM. Библиотека React DOM, которая знает только о том, как сделать представление с помощью виртуального DOM в веб-браузерах.
  • Для мобильной разработки мы будем использовать базовый модуль React, а еще один — React Native, который знает только о том, как просматривать DOM в мобильном приложении.
  • И еще одно — React 360, приложение для виртуальной реальности. это использует тот же DOM, что и представления в приложениях VR.
  • У нас также есть такие вещи, как Electron и React Desktop, которые позволяют нам создавать настольные приложения и позволяют нам создавать настольные приложения. и которые взаимодействуют с операционными системами Windows, Mac OS и Linux.
  • И последний — React blast, который работает с терминалом и командной строкой. Из-за этого мы можем использовать реакцию везде.

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