Код JavaScript можно быстро написать внутри компонентов, использующих React. Это позволяет любому разработчику легко справляться с типичными методами программирования в React, такими как перебор списка элементов, генерация и вызов функций, сохранение данных в локальных переменных и т. д.
Вы можете настроить способ отображения элементов с помощью расширения синтаксиса JavaScript (JSX), расширения JavaScript, созданного и популяризированного фреймворком React.
Есть большая вероятность, что вы знакомы или, по крайней мере, знаете о JSX, если вы ранее имели дело с React.
Разметка React создается с помощью JSX, специального расширения синтаксиса для JavaScript.
Это просто делает написание HTML-кода в React (объясните пользовательский интерфейс) более простым, и благодаря своей универсальности JSX со временем был принят другими известными фреймворками, такими как Vue.js.
Вы можете использовать все возможности JavaScript, используя JSX, хотя он может иметь небольшое сходство с языком шаблонов.
Что такое JSX?
JavaScript XML упоминается как JSX. Это просто синтаксическое расширение JavaScript, позволяющее нам изначально создавать HTML в React.
Сгенерировать шаблон в React с помощью JSX просто, но это не просто язык шаблонов; вместо этого он содержит все возможности JavaScript.
Он выполняет оптимизацию при переводе на обычный JavaScript, делая его быстрее, чем этот язык.
React использует компоненты вместо разделения разметки и логики на разные файлы. В следующих статьях мы узнаем более подробную информацию о компонентах. До тех пор глубокое погружение в перерисовку компонентов является одной из важных тем в React.
Пример:
импортировать React из «реагировать»;
импортировать ReactDOM из «react-dom»;
const name = «Оливье»;
const element = ‹h1› Добро пожаловать, {имя}, и спасибо за выбор Bosc Tech Labs Private Limited.‹ /h1›;
ReactDOM.render(
элемент,
document.getElementById («корень»)
);</h1>
Выход:
Добро пожаловать, Оливье, и спасибо, что выбрали Bosc Tech Labs Private Limited.
Этот JSX необходимо преобразовать в React на этапе сборки, потому что его нельзя использовать напрямую в браузерах. вызовы функции React.createElement.
React.createElement:
Элемент реакции представляет, как элемент объектной модели документа (DOM) должен выглядеть в реальности.
React.js использует виртуальную DOM, а не DOM браузера, для построения UI/UX и взаимодействия с браузером.
Элементы React составляют виртуальный DOM. Хотя они напоминают элементы HTML, они являются объектами JavaScript.
Проще говоря, элементы React — это руководство по созданию DOM браузера.
Чтобы отобразить материал на экране, HTML-компоненты встраиваются в JavaScript, а затем преобразуются в реагирующие элементы с использованием показанного ниже синтаксиса.
Синтаксис:
React.createElement (тип, {реквизиты}, дети);
Вы можете создать цикл, добавить JSX в массив, а затем перебрать набор элементов, чтобы сгенерировать партиал JSX:
Синтаксис:
константные элементы = []
константные элементы = []
for (const [index, value] of elements.entries()) {
items.pugsh(‹ключ элемента=”{индекс}”›)
}
Два способа зациклиться внутри React JSX
1. Использование цикла For
2. Использование функции карты
Использование цикла:
Предположим на данный момент, что у нас есть список элементов в виде массива. Мы можем построить цикл и добавить элемент JSX в массив, используя цикл for.
Пример:
оказывать() {
const items= ['Html', 'C#', 'Css'];
константные элементы = []
for (const [index, value] of items.entries()) {
elements.push(‹li key="{index}"›{value}‹/li›)
}
возврат (
‹див›
{элементы}
‹/дел›
)
}
elements.push():
чтобы вставить одно или несколько значений в массив, используйте метод arr. Метод push().
Длина массива корректируется с помощью этой техники, чтобы отразить количество новых добавленных элементов.
Использование функции карты:
Используя функцию map вместо цикла for-of, мы можем сделать то же самое непосредственно в компоненте JSX.
Пример:
импортировать React из «реагировать»
const RenderList = props => {
const Languages= ["Французский", "Немецкий", "Английский", "Испанский", "Китайский"];
возврат (
<ul>
{Languages.map(Languages =› (
‹li›{Языки}‹/li›
))}
</ul>
);
};
Заключение:
Циклы компонентов часто используются в программировании React для вывода и изменения данных. Как показано в этом руководстве, он позволяет группировать компоненты HTML с динамическими данными вместе.
Без запросов DOM это, как правило, было бы трудно выполнить в приложении JavaScript. Используйте циклы компонентов для создания наборов объектов аккуратным, эффективным и разборчивым способом.
Кроме того, вы можете привлечь команду разработчиков для надежной веб-разработки с эффективной отладкой. Лучше всего связаться с Bosc Tech, чтобы нанять разработчиков React для разработки адаптивных веб-приложений корпоративного уровня для повышения производительности.
