Download to read offline
Uploaded byOleg Nechiporenko
Coding monday
Документ представляет собой введение в React и React Native, обсуждая особенности и преимущества использования этих технологий для веб-разработки. Основное внимание уделяется различиям между Angular и React, а также ключевым концепциям, таким как виртуальный DOM, JSX и управление состоянием через Flux и Redux. В конце документа приводится список ресурсов и авторов для дальнейшего изучения.
Coding monday
- 1. Введение в reactи react-native
- 2.
- 3. Web 1.0 (HTTP) Backend PHP,Java, .NET … Frontend HTML, CSS GET, POST Backend PHP, Java, .NET … Frontend HTML, CSS GET, POST
- 4. WEB 2.0 (AJAX) Backend PHP,Java, .NET … Frontend HTML, CSS, Javascript (jQuery, Zepto, Prototype…) Frontend HTML, CSS, Javascript (jQuery, Zepto, Prototype…) XHRXHR JSON, XML
- 5.
- 6. SPA Frameworks • Ember •Backbone • Knockout • Angular • Batman • CanJS • …
- 8. Преимущества Angular • Двустороннийбиндинг (two-way binding) • Простой механизм внедрения зависимостей (DI) • Директивы • Большой выбор сервисов “из коробки” • Быстрое прототипирование • Огромный выбор open source плагинов
- 9.
- 10.
- 11.
- 12. Недостатки Angular • Двустороннийбиндинг (two-way binding) • Внедрение зависимостей (DI) • Директивы • Дебаггинг • Отсутствие server-side rendering • Ограниченность фреймворком
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 22. Web 1.0 (HTTP) Backend PHP,Java, .NET … Frontend HTML, CSS GET, POST Backend PHP, Java, .NET … Frontend HTML, CSS GET, POST
- 23. React.js • DOM-манипуляции оченьдорого обходятся • Javascript очень быстрый • Virtual DOM • Очень быстрый diff-алгоритм (O(n3) -> O(n))
- 24. React не MVC фреймворк React- это библиотека для построения UI, которая автоматически управляет всеми обновлениями интерфейса при изменении данных приложения
- 25. React не использует шаблонов •Javascript очень мощный и гибкий язык программирования и это очень важно для построения больших приложений • React объединяет логику представления с разметкой, что позволяет гораздо проще поддерживать и расширять приложение • Разметка и содержание находятся в Javascript. Нет конкатенации строк, что создает меньше пространства для XSS-атак
- 26.
- 27. JSX - Javascriptsyntax extension
- 28. JSX - тоне шаблонизатор
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37. Redux Initial app state Reduce(appState,action) New app state
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44. “Learn once, write everywhere”,вместо “Write once, run everywhere”
- 45.
- 46. Что почитать • React(https://facebook.github.io/react/) • React-native (https://facebook.github.io/react- native/) • Flux (https://facebook.github.io/flux/) • Redux (http://redux.js.org) • React tutorials (https://medium.com/react-tutorials)
- 47. Кого почитать • DanAbramov (https://github.com/gaearon, https:// twitter.com/dan_abramov, https://medium.com/ @dan_abramov) • Michael Jackson (https://github.com/mjackson, https://twitter.com/mjackson) • https://twitter.com/Vjeux • Cheng Lou (https://github.com/chenglou, https:// twitter.com/_chenglou)
- 48. Я • Facebook -https://www.facebook.com/meafmira • Github - https://github.com/miafmira • Twitter - https://twitter.com/meafmira