Введение в ReactJS: Давайте разберемся в этом на практическом примере.
Допустим, один из ваших друзей опубликовал фотографию в Facebook. Теперь вы идете и вам нравится изображение, а затем вы тоже начали проверять комментарии. Теперь, просматривая комментарии, вы видите, что количество лайков увеличилось на 100, так как вам понравилась фотография, даже без перезагрузки страницы. Это волшебное изменение количества происходит из-за Reactjs.
React-это декларативная, эффективная и гибкая библиотека JavaScript для создания пользовательских интерфейсов. Это » V’ в MVC. ReactJS-это библиотека интерфейса на основе компонентов с открытым исходным кодом, отвечающая только за уровень представления приложения. Он поддерживается Facebook.
Реакция использует декларативную парадигму, которая облегчает рассуждения о вашем приложении и стремится быть одновременно эффективной и гибкой. Он создает простые представления для каждого состояния в вашем приложении, и React будет эффективно обновлять и отображать только нужный компонент при изменении ваших данных. Декларативное представление делает ваш код более предсказуемым и простым в отладке.
Приложение React состоит из нескольких компонентов, каждый из которых отвечает за визуализацию небольшого многоразового фрагмента HTML. Компоненты могут быть вложены в другие компоненты, что позволяет создавать сложные приложения из простых строительных блоков. Компонент также может поддерживать внутреннее состояние – например, компонент списка таблиц может хранить переменную, соответствующую текущей открытой вкладке.
Примечание: React не является фреймворком. Это просто библиотека, разработанная Facebook для решения некоторых проблем, с которыми мы сталкивались ранее.
Предварительные условия: Загрузите пакеты узлов с их последней версией.
Пример: Создайте новый проект React с помощью команды ниже:
npx create-react-app myappИмя файла App.js: Теперь измените App.js файл с приведенным ниже кодом:
import React,{ Component } from 'react';
class App extends Component {
render() {
return (
<div>
<h1>Hello, Learner.Welcome to GeeksforGeeks.</h1>
</div>
);
}
}
export default App;
Выход:
Как это работает: При создании приложений на стороне клиента команда разработчиков Facebook поняла, что DOM работает медленно (Объектная модель документа (DOM) — это интерфейс прикладного программирования (API) для документов HTML и XML. Он определяет логическую структуру документов и способ доступа к документу и управления им.). Поэтому, чтобы сделать это быстрее, React реализует виртуальный DOM, который в основном является представлением дерева DOM в JavaScript. Поэтому, когда ему нужно прочитать или записать в DOM, он будет использовать его виртуальное представление. Затем виртуальный DOM попытается найти наиболее эффективный способ обновления DOM браузера.
В отличие от элементов DOM браузера, элементы React являются простыми объектами и их создание обходится дешево. React DOM заботится об обновлении DOM в соответствии с элементами React. Причина этого в том, что JavaScript очень быстр, и стоит сохранить в нем дерево DOM, чтобы ускорить его обработку.
Хотя React был задуман для использования в браузере, благодаря своему дизайну он также может использоваться на сервере с Node.js.
