Что делает этот React.js код?

Question

[Nikita Shchypylov]

Взялся изучать реакт, столкнулся с этим кодом:

var News = React.createClass({
  render: function() {
    var data = this.props.data;
    var newsTemplate = data.map(function(item, index) {
      return (
        <div key={index}>
          <p className="news__author">{item.author}:</p>
          <p className="news__text">{item.text}</p>
        </div>
      )
    })

    return (
      <div className="news">
        {newsTemplate}
      </div>
    );
  }
});

1) var data = this.props.data - что значит эта строка? В переменную мы получаем свойства данного компонента? Почему тогда не написать просто this.props? Зачем data в конце?
2) Объясните, пожалуйста, значение метода map. Я гуглил, основано на колбэк-функции, которая выполняется для каждого элемента - но что передается в index и item? Мы же не указываем явно вызов.

Comments

[copal]

Это к реакту вообще не относится, учите js, читайте о Array.map

Answer 1

[Максим]

Как ответил copal , вам, действительно, нужно закрыть пробелы в знаниях самого js. А потом уже читать туториал по реакту.
Попробуйте в render компонента, сделать console.log(this.props) -> будет объект, с ключом data. Поэтому мы и пишем this.props.data.

По поводу map. (как там написано - Функция, создающая элемент в новом массиве, принимает три аргумента, вот как раз первые два и есть "текущий элемент" и "индекс"

p.s. учебник выбрали годный :) , но требуется повысить уровень основ JS, так будет лучше для обучения.

Comments

[Nikita Shchypylov]

хаххахах)Спасибо, действительно дельно написали)Все довольно понятно)
Хотел что но новое узнать, но это map никак не лезет в голову.
Этот пример да, понятен:

var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
return num * 2;
});

Что вы посоветуете почиать по JS? Может, учебник Ильи Кантора?ПОка что за плечами опыт jQuery, "Восхитительный JS" и пара интерактивов

[Максим]

Nikita Schipilov: да, однозначно, учебник Кантора и главное решать там задачки. Еще в плане теории неплох Флэнаган - bit.ly/297IQx8

[Nikita Shchypylov]

Максим: Носорожек велик...Спасибо за ответы)Еще бы по ноде такой учебник)

Answer 2

[rakro]

1. this.props - объект который содержит все свойства компонента. this.props.data - свойство data
2. https://developer.mozilla.org/ru/docs/Web/JavaScri... - там есть какие аргуменыт принимает callback.