René Schimmelpfennig

17. März 2016

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

Sinon.JS

Chai.JS

Shallow Rendering

enzyme

demo

questions

@scr_at

https://slides.com/scr_at/react

https://github.com/MCeddy/nodefilestore