React - The JavaScript Library for User Interfaces
0 likes631 views
An introduction to React, an explanation of its different approach to building web interface and the key concepts to help you understand its approach.
More Related Content
What's hot (19)
Viewers also liked (19)
Similar to React - The JavaScript Library for User Interfaces (20)
More from Jumping Bean (14)
Recently uploaded (20)
React - The JavaScript Library for User Interfaces
- 2. About Me ● Solutions integrator at Jumping Bean – Developer & Trainer – Social Media ● Twitter @mxc4 ● Twitter @jumpingbeansa ● LinkedIn
- 4. Which Front-End Technology to Use?
- 5. What Front-End Technology To Use? ● Mobile? – Native vs HTML5 ● Desktop? – Thin Client/Fat Client ● Swing ● Web? – HTML5, – ECMAScript 5,6,7 – Frameworks ● HTML5/JavaScript – Pros: ● Largest coverage, – Cons: ● Not as fast, slick or integrated as native apps
- 6. The State of JavaScript Frameworks
- 7. What to use for JS Front-End? ● Needed to redo a front-end – Angular – Seemed to be the emerging winner, ● Angular 1 versus Angular 2 – Others ● BackBone, ● Ember ● Where to go? ● I am Morpheus - Had to go find “The One”
- 8. Is React the One?
- 9. What is React? ● JavaScript library from – FaceBook – Instagram ● “A JavaScript library for building user interfaces” ● Originally built for Single Page Apps, ● Only the View part of an MVC framework
- 10. How is React Different? ● Existing frameworks – add complexity, – Introduce JavaScript meta-languages, – Can be slow when number of interactive components increase ● One way data-binding ● Two way data-binding is expensive and slow
- 11. React – A New Approach ● Declarative not imperative, ● UI built out of JavaScript defined components, ● One way data binding, – Immutable UI ● Build components not templates ● Major innovation – Virtual DOM – Generates
- 12. Virtual DOM ● Abstracts away browser DOM, ● Translates from abstract DOM to concrete browser DOM, ● Power behind one-way binding and UI updates ● Write to Virtual DOM and then “compile” to JavaScript ● On state change generate entire html page and then generate differences and update
- 13. Virtual DOM – Update Flow 1)Calculate old and new tree, 2)Diff them: – Two components of the same class will generate similar trees – two components of different classes will generate different trees. – It is possible to provide a unique key for elements that is stable across different renders 3) Update changed part of browser DOM
- 14. Simplified Explanation of React ● Create Virtual DOM components in JavaScript, ● Everything with interactivity is a React component, ● State, i.e. changes propagate down component hierarchy, ● Basic approach – file per component
- 15. React Component Creation - ES6 ● Create components extending React.Component, ● Implement render function, ● Return UI virtual DOM
- 16. Creating a React Component
- 17. JSX ● Optional HTML-like mark-up ● Declarative description of the UI inlined in JS code ● Combines ease-of-use of templates with power of JavaScript ● Preprocessor translates to plain JavaScript: ● On the fly (suitable during development) ● Offline using the React CLI
- 19. How is Data/Model Provided to Components? ● One way data binding means data change in one place, – i.e only a component responsible for the data can change it, – All other sub-components can only read it, – If data is shared between components it is maintained in the common ancestor ● Props way to pass data from parent to child,→ ● State never leaves its containing component→
- 20. Component Hierarchies ● Breaking your app into components hierarchies is key, ● Understanding data needs of components determine where state is kept
- 21. Data Flow – Data is immutable ● Data passed down hierarchy via – this.props, properties are immutable,→ – this.state state should be held at the appropriate level in→ component hierarchy ● Parent components maintain state, ● How do child component changes to state propagate to parent? – Data passed up the hierarchy via parent event handlers being called by child components
- 22. Data Flows Down Hierarchy via Properties
- 23. Data Flow From Child to Parent Declare Handler in Parent
- 24. Data Flow From Child To Parent Fire Handler in Child
- 25. API Methods ● render() – Return single child element, – Can return null or false, – Should not do read or write to the DOM, – Best for server side rendering ● getInitialState() - – Used to set the state before component is mounted,
- 26. API Methods ● getDefaultProps() – Invoked on class creation then cached, – Sets default values on missing props ● propTypes – Used to validate props passed to component, ● statics – Defines static methods for component
- 27. Component Life Cycle Events ● componentWillMount – Invoked on client and server, – Can be used to set state before render is called, – Invoked on client and server before rendering ● componentDidMount – Invoked only on client after rendering, – Can access refs ● componentWillReceiveProps – Not called for initial render, – Used to setState
- 28. Component Life Cycle Events ● shouldComponentUpdate – Return false to prevent updating ● componentWillUpdate ● componentDidUpdate, ● componentWillUnmount
- 29. Challenges to React? ● HTML 5 Web Components – Custom components in HTML 5, – Tied to Web browser DOM Model, – Lots of reusable components will be available? – How to integrate with React components ● Possible but do you want this? ● If you don't do it will anyone use your framework?
- 30. Mark Clarke @mxc4 Jumping Bean @jumpingbeansa WWW: www.JumpingBean.co.za