React JS

Nota:

• Изменяет DOM без перезагрузки страницы

1. Components (строительные блоки) var Photo = React.createClass()

   Nota:

   • это элементы React, написаные разработчиком. Обычно это части пользовательского интерфейса, которые содержат свою структуру и функциональность. Например, такие как NavBar, LikeButton, или ImageUploader.
   • var Photo = React.createClass({render: function() { return <img src='http:tinyurl.comlkevsb9' /> } }); React.render(<Photo />, document.body); Функция createClass принимает объект, который реализует функцию render. Компонент Photo создан и отрисован в теле документа.
   1. Props (свойства) React.render(<Photo imageURL='' caption='' />, document.body);

      Nota:

      • Под свойствами можно понимать опции компонента. Они предоставляются в качестве аргументов компонента и выглядят так же, как атрибуты HTML.
      • React.render(&lt;Photo imageURL='http:tinyurl.comlkevsb9' caption='New York!' /&gt;, document.body); В функции render компоненту Photo переданы 2 свойства: imageURL и caption. Внутри пользовательской функции render, свойство imageURL используется в качестве src для изображения. Свойство caption используется как текст элемента span.
      • Свойства компонента неизменяемы. Если у компонента есть изменяемые свойства, используйте состояние.
2. JSX (Техника создания элементов и компонентов)

   Nota:

   • он трансформируется в JavaScript перед запуском в браузере
3. Elements (описывают DOM-элементы, такие как h1, div, или section)

   Nota:

   • это объекты JavaScript, которые представляют HTML-элементы. Их не существуют в браузере.
4. Virtual DOM

   Nota:

   • это дерево React элементов на JavaScript. React отрисовывает Virtual DOM в браузере, чтоб сделать интерфейс видимым. React следит за изменениями в Virtual DOM и автоматически изменяет DOM в браузере так, чтоб он соответствовал виртуальному.
5. Rendering. Code example: React.render(<img src='' />, document.body);

   Nota:

   • Первым делом происходит рендер виртуального элемента (элемента, или компонента React). Пока виртуальный элемент содержится только в памяти JavaScript. мы должны явно сообщить React отрисовать его в браузере. Функция render принимает два аргумента: виртуальный элемент и реальный узел DOM. React берёт виртуальный элемент и добавляет его в указанный узел. Теперь изображение можно увидеть в браузере.
6. State (Состояние)

   Nota:

   • это специальный объект внутри компонента. Он хранит данные, которые могут изменятся с течением времени. Часто состояние именуют просто как название функции
7. Composition

   Nota:

   • Композиция означает комбинирование меньших компонентов при формировании большего.