Re-thinking webpages with React.jsAndrea De Gaetano

MobileDev{day} #2Genova, 27 Maggio 2015

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

Testo

Web components

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

Testo

Code Sample

JSXHTML-like inside javascript: render function

Converted in javascript code

JSX Tool• convert on demand

• continually convert on each save

• or you can include a javascript library : JSXTransformer.js

Sample (2): Talk Component

Composed by other components: Title, Description, Author Social data

Sample (2): code!

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:

Questions?