reactive web
TRANSCRIPT
Short BioAndrea De Gaetano, 31y, Genova
Developer for www.darts.it
My Blog: http://pestohacks.blogspot.com
Twitter: @dega1999
Interested in #mobile #security #linux #robots #parkour
My last side project is an app called: www.qoffee.it
React.jsIt is an open source javascript library for build user interface and single page application
Released by Facebook in 2013
Used for facebook.com and by yahoo, airbnb, instagram … many others
Everything is a components
Improve code re-use
Easy to use in all web projects: new and already started
Learning curve is linear
Component-based software Wikipedia
“An individual software component is a software package, a web service, a web resource or a
module that encapsulate a set of related functions (or data)”.
Sample (1): A favorite button
Website: shopping, newspaper, events, etc.
Two states: off / on
single click on it, change its state
!
!
no backend logic: state is not saved
off
on
JSX Tool• convert on demand
• continually convert on each save
• or you can include a javascript library : JSXTransformer.js
PropertiesAllows to pass data between components
Immutable data
Accesible with this.props
StatePrivate to one component
Mutable data
When state updates —> UI re-renders itself
Accessible with this.state
Events
Communication is one-way: from top to bottom
You can notify a components using events
An event is passed to a subcomponent with properties
When the subcomponents wants to notify a parent component, it can use the event
Virtual Dom2 DOM per page:
the page dom (visible)
the virtual dom (hidden)
react work in the background with the virtual dom
changes on the state of a component are applied to the virtual dom
react find differences between the visible dom and the virtual dom:
update the visible page replacing only the different nodes in the dom
Thinking in react: https://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html
Best Practices and conventions: https://web-design-weekly.com/2015/01/29/opinionated-guide-react-js-best-practices-conventions/
Flux: https://facebook.github.io/flux/
React+Flux, a shopping cart: https://scotch.io/tutorials/creating-a-simple-shopping-cart-with-react-js-and-flux
Good Readings: