agenda

• React
• example
• deployment
• testing
• questions

React

• created 2011 by Jordan Walke
• open source
• isn't an MVC framework
• it's a library
• for data rendering
• efficient updating mechanism
• components as custom HTML tags
• clean separation between components

features

• reusable components
• Isomorphic JavaScript (client-side + server-side)
• virtual DOM
• very fast
• don't use templates (instead: pure JS)
• React native (Android + iOS Apps)

users

http://libscore.com/

https://github.com/facebook/react/wiki/Sites-Using-React/

JSX

• JavaScript extension syntax
• allowing easy quoting of HTML
• processed into JavaScript calls

components

properties

• passed to a component
• immutable
• "properties flow down and actions flow up"
• integrated validation

states

• mutable
• private to the component
• can be changed by calling this.setState()
• change => re-render of component

example

nodefilestore

https://github.com/MCeddy/nodefilestore

• instant filesharing
• nodejs project
• open source (MIT)
• frontend + backend => ES6
• store files in MongoDB (GridFS)

demo

deployment

• bundler for all assets
• gulp/grunt not required
• script tasks in package.json
• watcher: express middleware

demo

testing

Shallow Rendering

enzyme

demo