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 using React include Facebook, Instagram, Netflix, Khan Academy, and PayPal. 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.
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
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
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
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
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
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
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.
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
Speed!
Render < 16ms
Declarative
Easier to reason about
Easier to prevent bugs
Composable ( build larger tree with
Learn Once, Write Anywhere ( Mobile, Web )
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.
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
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/
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)
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
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/
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