ReactJS: циклы в JSX
Почему React?
В настоящее время разработчики знают, что мир Javascript постоянно меняется. Каждый день появляется новая библиотека, фреймворк или даже обновление самого языка, и мы, как разработчики, должны знать об этом. Сегодня я собираюсь рассказать об одной из многих особенностей **React JS**: _Циклах в JSX_, но, прежде чем я углублюсь в это, возможно, вы задаетесь вопросом _"Что это за штука React JS?"_.
**React JS** или просто **React** — это библиотека Javascript для создания пользовательских интерфейсов, созданная Facebook. Говорят, у React много достоинств, например:
- **Является декларативным:** это означает, что интерактивный дизайн пользовательского интерфейса больше не является проблемой, и каждый из них следует состоянию, которое реагирует на изменения данных.
- **На основе компонентов:** вы можете создавать инкапсулированные компоненты, которые знают только о своем собственном состоянии, и, составив множество из них, вы можете создавать более сложные компоненты.
- **Учитесь один раз, пишите где угодно:** Это не зависит от стека технологий, вы также можете создавать нативные и мобильные приложения с его помощью.
## Новый игрок: JSX
**JSX** описывает себя как _статически типизированный объектно-ориентированный язык программирования, предназначенный для работы в современных веб-браузерах_, и большая часть кода, написанного для **React**, использует его. Например, у нас есть первый компонент **React**, написанный с использованием **JSX**:
```класс javascript
HelloMessage расширяет React.Component {
render() {
return
Привет {this.props.name}
;
}
}
ReactDOM.render(, mountNode);
```
Бьюсь об заклад, вы заметили здесь _XML-подобный_ синтаксис. Что ж, поскольку React JSX преобразует XML-подобный синтаксис в собственный JavaScript, нам может понадобиться компилятор вроде [Babel](https://babeljs.io/), чтобы получить такой результат:
```javascript
class HelloMessage extends React.Component {
render() {
return React.createElement(
«div»,
null,
«Здравствуйте»,
this.props.name
);
}
}
ReactDOM.render(React.createElement(HelloMessage, { name: «Jane» }), mountNode);
```
Также использование JSX необязательно, но наши друзья в Facebook рекомендуют использовать его, потому что _ «это краткий и знакомый синтаксис для определения древовидных структур с атрибутами».
## Пример: создание простого списка комментариев
Хорошо, теперь пришло время добавить сюда немного кода. Во-первых, нам нужно визуализировать наше приложение в стиле **React**. Что это значит? Это означает, что, как мы уже говорили ранее, _React позволяет нам определять инкапсулированные компоненты_, поэтому для этого примера у нас есть только простой список комментариев, и быстрый способ определить его будет таким:
### Компонент: Один комментарий или просто называемый **Комментарий**
**Функция**: Отображение частей комментария, и на этот раз мы сделали все просто и показываем три части для каждого комментария:
1. **Уникальный идентификатор** (это может быть индекс или идентификатор, присвоенный базой данных).
2. **Автор комментария**.
3. **Содержание**, что бы ни писали авторы.
Поскольку мы изолируем каждый компонент, для этого компонента **Comment** неизвестно, где будут отображаться все остальные комментарии, или даже количество комментариев в приложении. Он просто фокусируется на своей функции: **отображать один комментарий со своими собственными свойствами**
```javascript
импортировать React из ‘React’;
Класс Комментарий расширяет React.Component {
конструктор() {
super();
}
render() {
return (
#{this.props.id}
Автор: {this.props.author}
{это.реквизиты.контент}
);
}
}
экспортировать комментарий по умолчанию;
```
Как видите, этот компонент ожидает три свойства:
- ID
- Автор
- Содержание
И доступ к ним мы получаем через свойство `props`, _"Откуда они берутся?"_ — для этого компонента это не имеет значения.
### Компонент: список компонентов или, проще говоря, **CommentList**
**Функция**: отображение каждого комментария в _контейнере_, он должен отвечать за способ отображения комментариев, сетка , макет или все, что мы желаем.
Этот компонент будет содержать все комментарии внутри, другими словами, _список комментариев_
Здесь в игру вступает **Цикл**: чтобы отобразить весь набор комментариев, нам сначала нужно получить их все из источника (веб-сервиса, файла и т. д.), а затем **итерировать** список. и **для каждого** одного из комментариев **CommentList** должен отправлять данные для одного комментария компоненту **Comment**. Давайте посмотрим, о чем я говорю.
```json
/** Имитационные данные, которые можно получить из веб-службы **/
[
{
«id»: 1,
«автор ”:”Эстебан Кортес”,
“контент”: “Круто! Это так здорово!»
},
{
«id»: 2,
«автор»: «Эдвин Круз»,
«контент»: «Давайте возьми крылья и кагуа, чтобы отпраздновать»
},
{
«id»:3,
«автор»: «Эрнесто Алькарас»,
«content»: «Но я забыл свои кроксы»
},
{
«id»: 4,
«автор»: «Марио Гомес»,
«контент»:» Отпусти их!»
}
]
```
```javascript
// CommentList.js
import React from ‘react’;
import Comment from ‘./Comment’; // Обратите внимание, что мы импортируем компонент Component
class CommentList extends React.Component {
structor() {
super();
/** Когда создается экземпляр этого компонента, он передает ссылку на this в метод getComments **/< br /> this.getComments = this.getComments.bind(this);
}
getComments() {
this.comments = require('../mocks/comments');< br /> }
render() {
this.getComments(); // Мы извлекаем комментарии перед возвратом render
(
МагмаКомментарии
{this.comments.map( (комментарий) =› {
return (
);
})}
);
}
}
экспортировать список комментариев по умолчанию;
```
Ключевой код внутри этого:
```javascript
{this.comments.map( (comment) =› {
return (
);
})}
```
## Собираем все вместе
Давайте углубимся в это:
1. Когда вызывается **CommentList**, он извлекает список комментариев из источника, в данном случае из макета, который возвращается в виде массива объектов.
2. В Javascript [Array object](https://developer.mozilla.org/docs/Web/JavaScript/Referencia/Objetos_globales/Array/map) имеет метод, называемый `map`, который перебирает каждый элемент внутри массива и возвращает совершенно новый массив после выполнение обратного вызова в каждом из элементов, поэтому он вызывается внутри кода **JSX** внутри метода _render_.
3. В **JSX** мы можем использовать выражения внутри символов `{}`, все внутри них будет оценено и введено в шаблон **JSX**. Таким образом, для каждого элемента внутри массива комментариев мы создаем компонент **Комментарий** и возвращаем его, создавая новый массив компонентов **Комментарий**.
4. Мы разделяем свойства между объектами, используя **атрибуты* * к каждому установленному нами атрибуту можно получить доступ с помощью объекта props внутри каждого компонента.
```javascript
```
Затем мы получаем к нему доступ:
```javascript
render() {
return (
#{this.props.id} Автор: {this.props.author}
{это.реквизиты.контент}
);
}
```
**Примечание**: при создании нескольких компонентов React потребует, чтобы каждый из них имел уникальный идентификатор, мы устанавливаем это свойство с помощью атрибута `key` .
В итоге получаем что-то вроде этого:
[](https://postimg.org/image/nrbl3pdgh/)
Magmalabs.io является экспертом в области дизайна UX/UI, электронной коммерции и разработки программного обеспечения. Мы создаем красивые программные решения для электронной коммерции, Интернета и мобильных устройств для стартапов, крупных компаний и корпоративных компаний, используя инновационные технологии, лучших специалистов и исключительную гарантию качества.
