Introduction to ReactJS

Introduction to ReactJS - agenda

• What’s the fuss about React

• Where should I start

• Some coding

• Q&A

ReactJS is Facebook’s

childMark Zuckerberg: Our

Biggest Mistake Was Betting Too Much On HTML5 -

September 2012.

This was related to poor performance at that time.

Features

• Virtual DOM

• JSX

• Server side rendering

Virtual dom - why React is so quick

• Direct dom manipulation is expensive and it’s possible to do unnecessary manipulations in transitional states

• React has it’s own tree and after state changes it calculates minimal and final DOM modification

• You may even choose not render some subtrees selectively (shouldComponentUpdate)

JSX - why new javascript flavour?

• JSX makes html native part of javascript

• For some mixing languages makes it controversial

• Until you realise that you want to separate concerns not technologies

• It is not a new idea (QML, MXML)

Getting started

• Pretty good resources from creators @ http://facebook.github.io/react/

• Really good community @ http://www.reddit.com/r/reactjs

• Several Yeoman generators

Wiring up• runtime - JSXTransformer

• grunt-react

• gulp-react

• webpack

• browserify

• …

Let’s code

Seamless• Swedish company with development moving

entirely to Łódź

• Currently developing SEQR - mobile payment platform. This year we are rolling out to many European countries and USA

• We are hiring: backend (fullstack) developers, QA engineers,UX, mobile developers, sysadmins

Q&A