Мы предлагаем курс из 2 лекций по React: - Первая лекция: React Basics - Вторая лекция: Dive into React На первой лекции мы расскажем, что такое React и его плюсы/минусы по отношению к другим решениям. Второй вебинар, более практический, опишет, как писать приложения с использованием библиотеки React.

2. Web history

3. React is small

4. Development tools

5. Trending

6. Prerequisite

7. Babel ▫ babel-preset-react
▫ babel-preset-es2015
▫ babel-plugin-transform-class-properties

8. What is React? ▫ No models
▫ No controllers
▫ No templates
▫ No directives
▫ No services
▫ Only components

9. React
Components

10. EmployeeList

11. JSX ▫ Syntax sugar for Javascript
▫ Similar to HTML
▫ Still Javascript
▫ HTML attributes = JSX properties
▫ Transpiled by Babel

12. JSX after
transpile

13. EmployeeListItem

14. Lifecycle
Methods

15. Component state

16. Use state in
render

17. Add handlers

18. Use function
passed via props

19. Break UI into
components
Establish
communication
between
components
using props

20. Virtual DOM ▫ Result of render()
▫ Simple object representing DOM
▫ Very fast

21. Virtual DOM
benchmarks

22. Render 1000
elements

23. Reconciliation ▫ Initial render() call
▫ Save result (snapshot)
▫ Update component (setState or props
change)
▫ Lifecycle methods
▫ Call render()
▫ Compare snapshots
▫ Update only changed nodes

24. Updating DOM
node

25. To be continued.. ▫ Lifecycle methods
▫ DOM events
▫ Application structure
▫ Data organization

26. Read this ▫ React docs
▫ Presentational and Container
Components
▫ Higher Order Components
▫ Webpack
▫ Babel

27. Questions?