React.js introduction for Meet.js

1. React.js

2. How the webapplications are/were created
Server side templates + jquery
Client side templates + MVC libraries

3. React.js solves all these
problems with Virtual DOM

4. Real DOM - simplified

5. Virtual DOM - simplified

6. Virtual DOM
OldNew
Result on real DOM

7. Hello World

8. Hello World

9. JSX
Optional
Recommended for faster, easier development
Noninvasive transformer

10. HelloWorld transformed

11. Component properties

12. Component properties validation

13. Changing data
Just rerender the whole application
… or at least big part of it

14. Changing data

15. Changing data

16. Component state

17. Props vs State
Props
External data
Can’t change it
State
Internal data
Can change it
Private for component

18. Lifecycle callbacks
„componentWillMount”
„componentDidMount”
„componentWillReceiveProps”
„shouldComponentUpdate”
„componentWillUpdate”
„componentDidUpdate”
„componentWillUnmount”

19. Events

20. Form and the state

21. Form state with mixin

22. Performance
Always performs only DOM necessary changes
All components are rendered by default
„shouldComponentUpdate” to control whether the
rendering is required

23. Performance

24. Performance

25. Performance

26. Performance
App > TodoList > TodoItem#2

27. How to implement „shouldComponentUpdate”?

28. Mutable data

29. Immutable data

30. Immutable data
Changing the data immutable way is hard
Helpers
http://facebook.github.io/react/docs/
update.html
https://github.com/facebook/immutable-js

31. „shouldComponentUpdate” with immutable data

32. „shouldComponentUpdate” with mixin

33. Server side rendering

34. Debugging

35. Performance profiler

36. Questions