React.js in real world apps.

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

I said “Easy to learn!”

Less than 1 hour to learn everything you need to be productive.

Challenge

How I use it

Server side

• Node.js Express api

• MongoDb/Mongoose

• Passport

• Mocha/Chai

Client side

Npm

Webpack

Hot-reload

Babel.js

Eslint

LibSass

npm

var React = require(‘react’)

$ npm install react —save

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

ActionCreatorReact View

Dispatcher

Action API

Flux: Dispatcher

Store

Action

Dispatcher

Store Store

Flux: Store

Store

React View

Dispatcher

Change event

Request new state

Few more things…

• Server side rendering

• Redux

• Relay

Thank you!

Emanuele DelBono @emadb

https://github.com/emadb/spot-react