Введение в React

React - это библиотека JavaScript для создания пользовательских интерфейсов. Он был признан самым любимым в категории «Фреймворки, библиотеки и другие технологии» опроса разработчиков Stack Overflow в 2017 году.

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

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

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

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

Многие популярные веб-сайты используют React, реализующий архитектурный шаблон MVC. Facebook (частично), Instagram (полностью), Khan Academy (частично), New York Times (частично), Yahoo Mail (полностью), новое приложение Dropbox для фото- и видеогалереи Carousel (полностью) - популярные веб-сайты, которые, как известно, используют React.

const Component2 = () => {
return <div></div>;
};
const Component3 = () => {
return <div></div>;
};
const Component1 = () => {
return (
<div>
<Component2 />
<Component3 />
</div>
);
};
ReactDOM.render(
<Component1 />,
document.getElementById(“app”)
);

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

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

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

Особенности ReactJS

JSX: JSX - это расширение javascript. Хотя использование JSX в React не является обязательным, это одна из хороших функций и простота использования.

Компоненты : компоненты похожи на чистые функции javascript, которые помогают упростить код, разбивая логику на многократно используемый независимый код. Мы можем использовать компоненты как функции и компоненты как классы. Компоненты также имеют состояние, подпорки, что облегчает жизнь. Внутри класса сохраняется состояние каждого свойства.

Виртуальный DOM: React создает виртуальный дом, то есть кеш-структуру данных в памяти. Только последние изменения DOM были позже обновлены в DOM браузеров.

Выражения Javascript: выражения JS можно использовать в файлах jsx, используя фигурные скобки, например {}.

Преимущества ReactJS

Вот важные плюсы / преимущества использования ReactJS:

• ReactJS использует виртуальный dom, который использует кеш структуры данных в памяти, и только окончательные изменения обновляются в dom браузеров. Это делает приложение быстрее.
• Вы можете создавать компоненты по своему выбору, используя функцию реагирования компонентов. Компоненты можно использовать повторно, а также они могут быть полезны при поддержке кода.
• Reactjs - это библиотека javascript с открытым исходным кодом, поэтому начать с нее несложно.
• ReactJS стал очень популярным за короткое время и поддерживается Facebook и Instagram. Его используют многие известные компании, такие как Apple, Netflix и т. Д.
• Facebook поддерживает ReactJS, библиотеку, поэтому она поддерживается и постоянно обновляется.
• ReactJS можно использовать для разработки многофункционального пользовательского интерфейса как для настольных, так и для мобильных приложений.
• Легко отлаживать и тестировать, поскольку большая часть кода выполняется на Javascript, а не на Html.

Вот минусы / недостатки использования ReactJS:

• Большая часть кода написана на JSX, т. Е. Html и css являются частью javascript, что может сбивать с толку, поскольку большинство других фреймворков предпочитают хранить Html отдельно от кода javascript.
• Размер файла ReactJS большой.

Магия React проистекает из его интерпретации DOM и его стратегии создания пользовательских интерфейсов.

При создании клиентских приложений команда разработчиков Facebook осознала, что DOM работает медленно (объектная модель документа (DOM) - это интерфейс прикладного программирования (API) для документов HTML и XML. Он определяет логическую структуру документов и способ доступ к документу и манипулирование им.). Итак, чтобы сделать это быстрее, React реализует виртуальную DOM, которая в основном представляет собой представление дерева DOM в Javascript. Поэтому, когда ему нужно читать или писать в DOM, он будет использовать его виртуальное представление. Затем виртуальный DOM попытается найти наиболее эффективный способ обновления DOM браузера.

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

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