1.Что такое JSX?
JSX — это не что иное, как сила реакции, которая дает нам возможность использовать html и JavaScript вместе.
Посмотрите на объявление переменной, которое приведено ниже:
const element = <h1>Hello, world!</h1>;
Это выглядит забавно, но это сила JSX, которая позволяет нам использовать этот синтаксис для JavaScript. Мы рекомендуем использовать его с React, чтобы описать, как должен выглядеть пользовательский интерфейс. JSX может напоминать нам язык шаблонов, но он обладает всей мощью JavaScript. JSX создает элементы React. Мы рассмотрим их рендеринг в DOM в следующем разделе.
2. Реагировать
React — это библиотека JavaScript для создания пользовательских интерфейсов. Это не фреймворк, поэтому вам нужно использовать больше библиотек, чтобы реагировать на решение любой проблемы. Напротив, фреймворки служат прекрасной цели, особенно для стартапов и молодых команд. Когда вы работаете с фреймворком, для вас уже создан элегантный дизайн, который позволяет вам сосредоточиться на написании хорошей логики приложения. Фреймворки не являются гибкими, и вы должны писать код определенным образом. React следует мышлению Unix, поскольку это небольшая библиотека, которая фокусируется на одной вещи и делает ее очень хорошо. Итак, эта «одна вещь» определила «создание пользовательских интерфейсов». Пользовательские интерфейсы означают, что пользователи взаимодействуют с машиной.
3. Виртуальный дом
Когда был выпущен React, было много слухов о его производительности, поскольку он представил идею виртуального DOM, который можно использовать для согласования фактического DOM.
DOM означает объектную модель документа, которая представляет собой программный интерфейс браузера для документов HTML и XML, которые используются в качестве древовидных структур.
Поскольку виртуальный DOM — это скорее шаблон, чем конкретная технология, люди говорят, что это другое. В React виртуальный DOM связан с элементами React, поскольку они представляют собой объекты, представляющие пользовательский интерфейс.
4. Функции в React .
Основные возможности React перечислены ниже:
- Он использует виртуальный DOM вместо реального DOM.
- Он использует рендеринг на стороне сервера.
- Он следует за однонаправленным потоком данных или привязкой данных.
5. Реагировать на реквизиты.
Props — это сокращение от Properties в React. Это компоненты только для чтения, которые должны быть чистыми, то есть неизменными. Они всегда передаются от родительских к дочерним компонентам по всему приложению. Дочерний компонент никогда не может отправить свойство обратно родительскому компоненту. Это помогает поддерживать однонаправленный поток данных и обычно используется для визуализации динамически генерируемых данных.
6. Компоненты
Компоненты React позволяют разбить пользовательский интерфейс на отдельные части, которые можно повторно использовать и обрабатывать независимо. Компонент React принимает необязательный ввод и возвращает элемент React, который отображается на экране. Компоненты React могут быть либо «с состоянием», либо «без состояния». Компоненты с состоянием — это типы классов, а компоненты без состояния — это типы функций.
Компонент класса
class Car extends React.Component {
render() {
return <h2>This is a car</h2>;
}
}
Функциональный компонент
function Car() {
return <h2>This is another car</h2>;
}
7. Реквизит
Реквизиты похожи на аргументы функций и могут использоваться для отправки данных компоненту. Это фиксированные свойства, что делает их доступными только для чтения. Это также делает их удобными, когда вы хотите отобразить фиксированные значения.
class Car extends React.Component {
render() {
return <h2>I am a {this.props.color} Car!</h2>;
}
}
ReactDOM.render(<Car color=”red”/>, document.getElementById(‘root’));
8. Состояние
Компоненты React имеют встроенный объект состояния. Объект состояния — это место хранения значений свойств, принадлежащих компонентам. Когда объект состояния изменяется, компонент перерисовывается.
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {brand: “Ford”};
}
render() {
return (
<div>
<h1>My Car</h1>
</div>);
}
}
9. События
Как и HTML, React может выполнять действия на основе пользовательских событий. В React есть те же события, что и в HTML. События React записываются в camelCase, например onClick, а обработчики событий React записываются внутри фигурных скобок, например onClick={shoot}.
<button onClick={shoot}>Take the Shot!</button>
10. Крючки
Хуки в компоненте React вызываются специальной функцией. Все функции хуков начинаются со слова «использовать». Некоторые из них можно использовать для предоставления функциональному компоненту элементов с состоянием, таких как «useState», другие можно использовать для управления побочными эффектами, такими как «useEffect». Хуки очень мощные, а функции хуков React можно использовать только в функциональных компонентах.
11. Условный рендеринг
Условная визуализация — это термин, описывающий способность отображать другую разметку пользовательского интерфейса (UI), если условие истинно или ложно. В React это позволяет отображать различные элементы или компоненты в зависимости от условия. Эта концепция применяется при рендеринге внешних данных из API, отображении или скрытии элементов, переключении функций приложения, реализации уровней разрешений, обработке аутентификации и авторизации. Существует семь способов реализации условного рендеринга — 1. Если — иначе, 2. Переключатель, 3. Переменные элемента, 4. Тернарный оператор (?), 5. Логический &&, 6. Немедленно вызываемые функциональные выражения (IIFE), 7. Расширенный JSX-библиотеки.
