Downloaded 16 times
Uploaded byJumping Bean
React - The JavaScript Library for User Interfaces
The document provides an introduction to React, highlighting its role as a JavaScript library from Facebook for building user interfaces, primarily for single-page applications. It contrasts React with other frameworks, emphasizing its one-way data binding, virtual DOM, and component-based architecture, which simplify UI development and updates. The document also touches on the component lifecycle, data flow management, and potential challenges in integrating React with HTML5 components.
More Related Content
Similar to React - The JavaScript Library for User Interfaces
React - The JavaScript Library for User Interfaces
- 1.
- 2. About Me ● Solutionsintegrator at Jumping Bean – Developer & Trainer – Social Media ● Twitter @mxc4 ● Twitter @jumpingbeansa ● LinkedIn
- 3.
- 4. Which Front-End Technologyto Use?
- 5. What Front-End TechnologyTo 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 ofJavaScript Frameworks
- 7. What to usefor 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 theOne?
- 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 ReactDifferent? ● 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 – ANew 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 ● Abstractsaway 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 ofReact ● 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 ReactComponent
- 17. JSX ● Optional HTML-likemark-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
- 18.
- 19. How is Data/ModelProvided 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 ● Breakingyour 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 DownHierarchy via Properties
- 23. Data Flow FromChild to Parent Declare Handler in Parent
- 24. Data Flow FromChild 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 CycleEvents ● 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 CycleEvents ● 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 JumpingBean @jumpingbeansa WWW: www.JumpingBean.co.za