React JS

Lena Sinitsyna
Mind Map by Lena Sinitsyna, updated more than 1 year ago
Lena Sinitsyna
Created by Lena Sinitsyna over 4 years ago
943
3

Description

OMG! Computer Studies Mind Map on React JS, created by Lena Sinitsyna on 12/21/2016.

Resource summary

React JS

Annotations:

  • Изменяет DOM без перезагрузки страницы
  1. Components (строительные блоки) var Photo = React.createClass()

    Annotations:

    • это элементы 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);

      Annotations:

      • Под свойствами можно понимать опции компонента. Они предоставляются в качестве аргументов компонента и выглядят так же, как атрибуты 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 (Техника создания элементов и компонентов)

      Annotations:

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

        Annotations:

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

          Annotations:

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

            Annotations:

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

              Annotations:

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

                Annotations:

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

                Similar

                computer systems and programming quiz
                Molly Batch
                Fetch-decode-excecute
                Brodie McMeowface
                Types of systems
                Brodie McMeowface
                DATA
                Haha_fizul
                Hardware mindmap
                demi cheo
                INFORMATION SYSTEM
                ahmed hany
                expert system
                limy12345
                Data
                Jing Heng
                Fetch-decode-excecute
                джордж гаврилович
                computer systems and programming quiz
                Jack Wheat
                DATA_v1
                chong.lee.soong