React.

js
@emadb

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
History of web development…
MV(something) in the
browser
Enterprise Javascript
Quiz time!
What’s the difference between
Service, Factory, Provider?
UNLEARN EVERYTHING
@michelebertoli
var HelloWorld = React.createClass({
render: function() {
return (
<h1>
Hello world
</h1>
);
}
});

React.render(<HelloWorld />,
document.body);
 Whooot?
• Markup and behaviour

• Separation of concerns

• Template language?

• Components

• JSX syntax
var HelloWorld = React.createClass({
displayName: "HelloWorld",
render: function() {
return React.createElement("h1",
null, "Hello World");
}
});

React.render(
React.createElement(HelloWorld, null),
document.body);
COMPONENTS
 render

Every time the state change the component render itself

 DOM is slow

Javascript that access to the DOM is slow

console.dir(document.createElement('div'));

A DIV contains about 135 first level properties/function (700 on

second level).
 Virtual DOM
• Our code act on a fake DOM (virtual dom)

• React.js take care of keep virtual DOM and real DOM

synchronised

• Every ReactElement is a light, stateless, immutable,

virtual representation of a DOM Element

• A virtual DOM div element contains only 6 properties.

 Why I like react so much
• Easy to learn, easy to use

• True reusable components (1 single file per component)

• Functional approach

• Human error messages

• Active community
 Challenge

I said “Easy to learn!”

Less than 1 hour to learn everything you

need to be productive.
How I use it
 Server side

• Node.js Express api

• MongoDb/Mongoose

• Passport

• Mocha/Chai
 Client side

Npm Babel.js
Webpack Eslint
Hot-reload LibSass
 npm

$ npm install react —save

var React = require(‘react’)

import React from ‘react’

Everything you need is in your
package.json
• A transpiler

• Converts ES6 javascript to “old” ES5.

• Compiles JSX files to plain js.

 Webpack

Bundles javascript, css, sass, fonts and images with their

dependencies into assets
 Superagent

Super Agent is light-weight progressive ajax API crafted

for flexibility, readability, and a low learning curve after
being frustrated with many of the existing request APIs. It
also works with Node.js!
Flux
 Flux:Actions

React View ActionCreator

API
Action

Dispatcher
Flux: Dispatcher

Dispatcher

Action

Store Store Store

 Flux: Store

Dispatcher Store

Change Request new

event state

React View
 Few more things…

• Server side rendering

• Redux

• Relay
 Emanuele DelBono
@emadb

Thank you!
https://github.com/emadb/spot-react