React JS
Download as PPTX, PDF2 likes2,805 views
React is an open source JavaScript library for building user interfaces. It was created by Jordan Walke at Facebook in 2011 and is now maintained by Facebook, Instagram, and a community of developers. Major companies like Facebook, Netflix, Instagram, Khan Academy, and PayPal use React to build their interfaces. React uses a virtual DOM for faster rendering and makes components that manage their own state. It uses JSX syntax and a one-way data flow that is declarative and composable.
React JS
- 1. 18.08.2016 Fatih Şimşek - Software Infrastructure React
- 2. React Open source Javascript Library Created by Jordan Walke, a software engineer at Facebook First deployed on Facebook’s newsfeed in 2011 Maintained by Facebook, Instagram and a community of individual developers and corporations
- 3. Who is using React? 9flats - Airbnb - Alipay - Atlassian - BBC - Box - Capital One - Coursera -Dailymotion - Deezer - Docker - Expedia - Facebook - Fotocasa - HappyFresh - IMDb - Instacart - Instagram - Khan Academy - Klarna - Lyft - NBC - Netflix - NFL - Paypal - Periscope - Ralph Lauren - Reddit – Salesforce - Sberbank - Stack Overflow - Tesla - Tmall - The New York Times - Twitter Fabric - Twitter Mobile - Uber - WhatsApp - Wired - Yahoo - Zendesk https://github.com/facebook/react/wiki/Sites-Using-React
- 4. Github
- 5. React Creating user interface(V in MVC model) Speed Declarative Composable Learn Once, Write Anywhere Support ES6 Testable
- 6. Write once, Run Everywhere React
- 7. Architecture
- 8. Architecture Component manage own state One way binding JSX Virtual DOM Component Lifecycle
- 9. JSX Supports xml-like syntax inline in JavaScript Each element is transformed into a Javascript function call • <Hello /> => Hello(null) • <div /> => React.DOM.div(null)
- 10. Virtual DOM Problem: • DOM manipulation is expensive • Touching DOM is hard to test • Re-render all parts of DOM make your app slowly
- 11. Virtual DOM Solution: When the component’s state is changed, React • Use different algorithm with the browser DOM tree to identify the changes • Instead of creating new object, React just identify what change is took place and once identify update that state • Render the subtree of DOM elements into the rendering of the DOM
- 12. Virtual DOM
- 13. DEMO
- 14. Prop / State Prop: • Used to pass parameter from parent to children • PropTypes used to validate properties • getDefaultProps State: • Used to manage state inside component • getInitialState • setState
- 15. Prop / State
- 16. Mixins / Statics Mixins: • Different components may share some common functionality • Several mixins can be defined • Methods defined on mixins run in the order mixins were listed Statics: • Like .Net / Java static method • Define static methods in statics block of component
- 17. Events componentWillMount: Invoked once before the initial render componentDidMount: Invoked once, only on the client componentWillReceiveProps: Invoked when a component is receiving new props shouldComponentUpdate: Invoked before rendering when new props or state are being received componentWillUpdate: Invoked immediately before rendering when new props or state are being received componentDidUpdate: Invoked immediately after the component's updates are flushed to the DOM componentWillUnmount: Invoked immediately before a component is unmounted from the DOM
- 19. DEMO
- 21. Flux Action: Helper method that facilitate passing data to the Dispatcher Dispatcher: Receive action and broadcast payload to registered callback Store: Containers for application state & logic that have callbacks registered to the dispatcher View: State from Stores and pass it down via props to child components
- 22. Flux
- 23. Redux • Single source of truth • State is read-only • Mutations are written as pure functions (reducers)
- 24. Redux • Important difference to Flux: no dispatching inside the action • There is no Dispatcher at all; pure functions do not need to be managed, they need to be composed • Mutations are written as pure functions
- 25. Benchmark
Editor's Notes
- #3: In 2010, Facebook released an extension for PHP called XHP. XHP help to decrease XSS attack and make front-end much both readable and understand. There was a distinct problem with XHP: dynamic webapplications require many roundtrips to the server. XHP did not solve this problem. Jordan Walke negotiated with his manager to take XHP into the browser using JavaScript and was granted six months to try it It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013. React Native, which enables native iOS and Android development with React, was announced at Facebook's React.js Conf in February 2015 and open-sourced in March 2015.
- #4: http://reactkungfu.com/2015/07/big-names-using-react-js/ Netflix – React Conf 2015 https://www.youtube.com/watch?v=eNC0mRYGWgc Sberbank - the number one bank in Russia I must say, I was really shocked when I heard that the interactive part of bank’s website was developed in React. One of the developers working on that project shared his team’s experience on React’s Google Group. They were really happy about the speed of development with React. https://groups.google.com/forum/#!topic/reactjs/Kj6WATX0atg At Instagram we migrated from the standard Mustache/Backbone/jQuery trio to React with a little bit of Backbone. One big benefit of this move was that we could express our display logic with pure JS, so we can use all the standard object-oriented and procedural techniques to reuse code
- #6: Speed! Render < 16ms Declarative Easier to reason about Easier to prevent bugs Composable ( build larger tree with Learn Once, Write Anywhere ( Mobile, Web )
- #7: Facebook has been working to help build a cross-platform development platform called React. Earlier this year, Facebook announced React Native, a learn-once, run-everywhere platform to take JavaScript and build native-like apps for iOS and Android. Run on server-side on NodeJs. Discontinuing IE8 support in React DOM, January 2016.
- #9: Data flow from the parent to the children component by the state and the props Only one parent is responsible to update the states and passing the value to the children components via props setState is used to update/refresh the UI when the state change and the value can be pass to the children component by the this.props Event flow up, data flow down
- #10: Transform JSX to pure JavaScript immediately before execution Convenient for the developer Significant performance penalty Can’t be minified Use Babel.js / JSXTransformer.js deprecated https://babeljs.io/repl/
- #13: http://www.slideshare.net/emadb/an-introduction-to-reactjs-46258876
- #14: Simple Render (Hello World)
- #15: https://facebook.github.io/react/docs/reusable-components.html
- #18: componentWillMount: Good place to make connection to your db service componentDidMount: It is good place for you to make AJAX request to fetch data for first used. componentWillReceiveProps: Use this method as a way to react to a prop change before render() is called by updating the state with setState. componentWillUnmount: Perform any necessary cleanup in this method(Ex: invalidating timers, clear up DOM elements were created at componentDidMount)
- #19: http://www.slideshare.net/xmlilley/react-flux-50660816 (23.slide)
- #20: Sample Jquery / Knockout / AngularJs / React http://getbootstrap.com/css/#forms http://getbootstrap.com/components/#list-group http://getbootstrap.com/components/#glyphicons-examples
- #22: Flux is an architecture that Facebook uses internally when working with React. It isnot a framework or a library. It is simply a new kind of architecture that complements React and the concept of Unidirectional Data Flow. Dispatcher is the central hub that manages all data flow, It is a registry of callbacks into the stores Action typically triggered by the View, contain information about change made to the application Store contain application state and logic, reacts to specific action. View has list of stores which provide data for, trigger action with the state changes
- #23: After you use Flux the first time, writing React without Flux feels like DOM traversal without jQuery. You can absolutely do it, but it feels less elegant and structured. Flummox, Alt, Fluxxor are libraries implement Flux. https://scotch.io/tutorials/creating-a-simple-shopping-cart-with-react-js-and-flux http://fluxxor.com/examples/carousel/
- #24: Actions are payloads of information that send data from your application to your store Reducer is a pure function that takes the previous state and an action, and returns the next state. Store is the object that brings them together. (holds application state) You call store.dispatch(action) The Redux store calls the reducer function you gave it The root reducer may combine the output of multiple reducers into a single state tree The Redux store saves the complete state tree returned by the root reducer
- #26: BenchMark Site: https://cdn.rawgit.com/krausest/js-framework-benchmark/a358bc967e1d9ff0c268b43f5ab8b832abe0476e/webdriver-java/table.html https://github.com/krausest/js-framework-benchmark React & Angular2 http://www.slideshare.net/boyney123/reactjs-or-angular?qid=f24b044d-6e77-4eaa-b4f4-882c5a56f454&v=&b=&from_search=15