My talk was an introduction to react.js a javascript library released by facebook in 2013 to build "web components". The presentation was at the second Mobile Dev Day in Genova at computer science University.

1. Re-thinking webpages with
React.js
Andrea De Gaetano
MobileDev{day} #2
Genova, 27 Maggio 2015

2. Short Bio
Andrea 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

3. React.js
It 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

4. 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)”.

5. Testo
Web components

6. 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

7. Testo
Code Sample

10. JSX
HTML-like inside javascript: render function
Converted in javascript code

11. JSX Tool
• convert on demand
• continually convert on each save
• or you can include a javascript library : JSXTransformer.js

12. Sample (2): Talk Component
Composed by other components:
Title, Description, Author
Social data

13. Sample (2): code!

14. Properties
Allows to pass data between components
Immutable data
Accesible with this.props
State
Private to one component
Mutable data
When state updates —> UI re-renders itself
Accessible with this.state

15. 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

16. Virtual Dom
2 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

17. 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:

18. Questions?