React-js
0 likes1,578 views
This document discusses React, including its web evolution, concepts, syntax, and an example. It begins with an introduction to React and links to code. It then covers React's role in the evolution of the web and data presentation, comparing it to traditional MVC frameworks. Key React concepts are outlined, such as viewing it as a view engine rather than framework, its use of components and single direction data flow, and virtual DOM. React syntax is also summarized, including state, JSX, props, events, mixins, and refs. The document concludes with building a Facebook wall example in React.
React-js
- 1. Avi Kedar Open Source Department Manager, codeoasis.com React-js
- 6. ReactWeb Evolution M V C GenerationXXX
- 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
- 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
- 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
- 31. React Thank You