Основы веб-разработки: ReactJS презентация

Содержание

Слайд 2

История развития Web-технологий

2000-e
Microsoft Web Forms
ASP MVC
Razor View – серверный рендеринг (*.cshtml)
jQuery

+ JavaScript – фронт
~2015 SPA (Single Page Application)
Virtual DOM – фреймворки (большая тройка):
React – FaceBook
Angular – Google
Vue.js - opensource

DOM

HTML

Virtual DOM

Слайд 3

Особенности React, транспайлеры

Virtual DOM
Компонентный и декларативный характер
Применение JSX
Open source: https://github.com/facebook/react
Документация: https://ru.reactjs.org/
Транспайлер Babel: JavaScript

ES6(ES2015) ->ES5
Преобразование JSX в вызов функций React.createElement (пример: JSX->React.CreateElement)
Стрелочные ф-ции в простые
Promise в XMLRequest
и т.д.

Слайд 4

Что такое JSX ? (01_hello.html, 02_jsx-expression.html)

JSX – расширение языка JavaScript + XML
Основной принцип

React - логика рендеринга неразрывно связана с прочей логикой UI:
Подготовка данных к отображению
Изменение состояния
Обработка событий
Выражения в JSX
Используем фигурные скобки {…} для встраивания корректных JavaScript – выражений
Использование атрибутов JSX
Строковый литерал заключается в кавычки
JS-выражение заключается в фигурные скобки
Используем camelCase в отличии от атрибутов html (class -> className, tabindex -> tabIndex )
Особенности JSX
Элементы в JSX могут содержать дочерние
Элементы JSX – защищены от инъекции кода. React DOM экранирует все значения при рендеринге
JSX представляет собой объекты. Babel компилирует JSX-код в вызовы React.createElement()

Слайд 5

Рендеринг элементов (03_clock.html)

Элементы – это мельчайшие блоки React-приложения
const element=

Hello!

;
Не надо путать элементы и

компоненты!
Элементы – то из чего сделаны компоненты
Рендеринг элементов в DOM
Необходим “корневой” узел:

React DOM будет управлять содержимым корневого элемента
ReactDOM.render(element, document.getElementById('root'), callback)
В React – приложении обычно один корневой узел, при встраивании React в существующее приложение корневых узлов может быть несколько
Обновление элементов на странице
Иммутабельность React элементов – после создания элемента нельзя изменить его потомков или атрибуты.
Пока что, для обновления UI необходимо создать новый элемент и передать его в ReactDOM.render(…) – пример, часы
React перерендеривает только изменяющиеся элементы DOM. См. часы в отладчике

Слайд 6

Компоненты(04_component.html)

React компоненты – объединяют элементы и позволяет создавать комплексную HTML-разметку. Компоненты проще обновлять

и использовать повторно.
Аналогичны функциям JS. Могут хранить состояния с помощью свойств и возвращают элементы React.
Создание компонент – имя всегда с большой буквы!
Функционально
function Welcome() {
return

Привет!

;
}
или
var Welcome = () => {
return (

Привет!

);
}
“Классически” – предполагается использование классов JS стандарта ES6
class Welcome extends React.Component {
render() {
return

Привет!

;
}
}
Этапы рендеринга компонента
Для рендеринга компонента вызывается функция ReactDOM.render()
React вызывает компонент Welcome
Компонент возвращает элемент

Привет!


ReactDOM обновляет стандартный DOM веб-страницы, чтобы она содержала элемент

Привет!


Слайд 7

Props (05_props.html)

Props - это коллекция значений, ассоциированных с компонентами.
Позволяют создавать динамические компоненты, не

зависящие от жестко закодированных статических данных
Передаются параметрически при функциональном подходе
Применяем this.props.имя_свойства при реализации через класс
Вне зависимости, от реализации, компоненты не должны менять значения своих пропсов!
Значения по-умолчанию устанавливается через статическое свойство Имя_компонента.defaultProps

Слайд 8

Состояние State (06_state.html)

Объект state описывает внутреннее состояние компонента
В отличии от props определяется внутри

компонента и доступно только из компонента
Состояние хранит объекты, созданные внутри компонента и полностью зависят от компонента
Значения в state можно изменять
Значения state должны использоваться при рендеринге
Определяем state в конструкторе объекта
Обновление состояния
Используем метод setState()
Несколько вызовов setState() React может объединить в единое обновление
Обновления состояния могут быть асинхронными. Нельзя полагаться на текущее значение, для вычисление следующего. Есть другая версия setState:
this.setState(function(prevState, props){ return {…};})

Слайд 9

Обработка событий (07_event.html)

Похожа на обработку событий элементов DOM с помощью обычного JavaScript
Но есть

отличия:
Наименование событий использует camelCase
В JSX обработчик передается функция, а не строка
Привязка this
По умолчанию, в функцию обработчика не передается текущий объект и this будет иметь значение undefined
Чтобы корректно передавалась ссылка на текущий объект прописываем в конструкторе класса привязку:
this.handleClick = this.handleClick.bind(this)
Параметры события
React использует специальные объекты (SyntheticEvent) передаваемые в функцию обработчика событий
Из параметра в обработчике можно получить полную информацию о событии

Слайд 10

Жизненный цикл компонента (08_cycle.html)

Каждый компонент проходит ряд этапов жизненного цикла.
Каждому этапу соответствует функция,

в который можно добавить свой код:
constructor(props) - начальная инициализация компонента
componentWillMount() – вызывается перед рендерингом компонента (начиная с React 17 UNSAFE_componentWillMount())
render() – рендеринг компонента
componentDidMount() – вызов после рендеринга. Можно выполнять запрос удаленных ресурсов
componentWillUnmount() – вызывается перед удалением из DOM
Функции вызываемые при обновлении состояния после рендеринга компонента:
shouldComponentUpdate(nextProps, nextState) - вызывается при обновлении объекта props или state. В качестве параметра передаются новый объект props и state. Может возвращать true (надо делать обновление) или false (игнорировать обновление). По умолчанию true. Если функция будет возвращать false, то отключается обновление компонента, а последующие функции не будут срабатывать.
componentWillUpdate(nextProps, nextState) - вызывается перед обновлением компонента (если shouldComponentUpdate возвращает true) (начиная с React 17 UNSAFE_componentWillUpdate)
render() - рендеринг компонента (если shouldComponentUpdate возвращает true)
componentDidUpdate(prevProps, prevState) - вызывается сразу после обновления компонента (если shouldComponentUpdate возвращает true). В качестве параметров передаются старые значения объектов props и state.
Функция вызывается при обновлении объекта props
componentWillReceiveProps(nextProps) – новые значения props передаются в качестве параметра (с React 17 UNSAFE_componentWillReceiveProps)

Слайд 11

Использование ресурсов (09_resource-clock.html)
В React-приложениях при удалении компонент необходимо освобождать ресурсы.
Используем функции жизненного цикла:
componentDidMount()

– получаем(создаем) ресурс
componentWillUnmount() – освобождаем ресурс

Слайд 12

Условный рендеринг (10_conditional-render.html)

React позволяет разделять логику на независимые компоненты. Компоненты можно показывать или

скрывать, в зависимости от текущего состояния
Способы условного рендеринга
Использование If-else: JS операторов
Встроенные условия if-else с тернарным оператором
(condition ? true: false)
Встроенные условия if с логическим оператором &&
(condition && )
Предотвращение рендеринга компонента
Возврат null

Слайд 13

Рендер коллекций и ключи (11_list-key.html)

Для рендеринга набора однотипных элементов используется js-функция map()
Коллекция должна

быть представлена в виде массива JSX-элементов
У каждого элемента обязан быть уникальный для данной коллекции ключ “key”
const items = [‘один’, ‘два’, ‘три’];
const listItems = items.map(item =>
  • {item}
    • );
    Ключи помогают определять, какие элементы были изменены, добавлены или удалены
    Лучший способ выбрать ключ – использовать строку, которая будет явно отличать элемент списка от его соседей
    В крайнем случае можно использовать индекс элемента как ключ
    Не рекомендуется использовать индексы, если порядок элементов может поменяться

    Слайд 14

    Формы и управляемые компоненты (12_forms.html)

    Элементы HTML формы (input, textarea, select ) поддерживают собственное

    состояние и обновляют его на основе ввода пользователя
    В React состояние сохраняется в state компонента. Обновление происходит с помощью setState.
    Управляемый компонент – элемент формы, состояние которого контролируется React
    В HTML для