From concept, syntax and full example. Enjoy!

1. Avi Kedar
Open Source Department
Manager, codeoasis.com
React-js

2. get the code...https://github.com/avi1234/reactjs-presentation

3. React
Web Evolution
Concept
Syntax
Example

4. ReactWeb Evolution
DataPresentationLogic

5. ReactWeb Evolution
DataPresentationLogic
M V C

6. ReactWeb Evolution
M V C
GenerationXXX

7. ReactWeb Evolution
M
V
C
Generation1

8. ReactWeb Evolution
VC
Generation2
MM
M
M
MM
M
M

9. ReactWeb Evolution
VC
Generation2
M
M
DOM
Controllers
Services
Routes
Resources
Directives

10. ReactWeb EvolutionGeneration2
1. Scale is a Pain

11. ReactWeb EvolutionGeneration2
1. Scale is a Pain

12. ReactWeb EvolutionGeneration2
2. Performance
VC
DOM
Controllers
Services
Routes
Resources
Directives

13. ReactWeb Evolution
VC
Generation2
I/O
2. Performance

14. React
Web Evolution
Concept
Syntax
Example

15. ReactConcept
View Engine - Not a Framework
Carpaccio Reach Components
Single Way Data Flow
Virtual DOM

16. ReactConcept
View Engine - Not a Framework
• Just the V from MVC
• No routing
• No dependency injection
• No major logic components (controllers)

17. ReactConcept
Carpaccio Reach Components
• The entire page is split into a tree of
V items
• Each V item contains:
• State
• Render Method
V
Show Feeds
List
V
Show Feed
V
Show
Comments
V
Show
Comment
V
Add
Comment
V
Show Ad

18. ReactConcept
Single Way Data Flow
• Forget about 2 way data binding
• The results of V are immutable
• Reconcile process - through away the previous layout and
recreate it on every change
onChange

19. ReactConcept
Virtual DOM
• The DOM is presented as javascript object
• Each reconcile process creates a new revision of the virtual DOM
• React will compare the two revisions and create list of execution
actions that will be executed on the actual DOM
onChange
old
new
compare
execute

20. ReactConcept
Virtual DOM
VC Minimum I/O
javascript
browser
DOM

21. React
Web Evolution
Concept
Syntax
Example

22. ReactSyntax
State
JSX
Props
Events
Mixings
Refs

23. ReactSyntax
State
JSX
Props
Events
Mixings
Refs

24. ReactSyntax
State
JSX
Props
Events
Mixings
Refs

25. ReactSyntax
State
JSX
Props
Events
Mixings
Refs
componentWillMount
render
componentDidMount
componentWillUnmount
Before adding to the DOM
for the first time
After each change
After render the component
for the first time
Before removing the
component from the DOM

26. ReactSyntax
State
JSX
Props
Events
Mixings
Refs

27. ReactSyntax
State
JSX
Props
Events
Mixings
Refs

28. ReactSyntax
State
JSX
Props
Events
Mixings
Refs

29. React
Web Evolution
Concept
Syntax
Example

30. React
Facebook Wall
Example
Lets Build...
https://github.com/avi1234/reactjs-presentation

31. React
Thank You