React.js Web Development Workshop

Web JavaScript

Want to follow in the footsteps of Facebook, Instagram, Netflix, Flipboard, Dropbox, Product Hunt and many more? React is a JavaScript library initially developed internally by Facebook/Instagram and open-sourced in 2013.

It introduces a new way of thinking when it comes to building user interfaces in JavaScript. With its declarative style and virtual DOM-diffing algorithm it challenges established best practices.

What does this mean for you?

Faster, more maintainable applications that are easier to test, debug and reason about.

Don't want to go all-in?

Don't worry. Dip your toes in. React facilitates being used in as small or large a part of your application as you want to.


Knowledge of JavaScript and HTML.

Who should attend

Developers who want to to build performant web/mobile applications that are easy to maintain and reason about.


  • Concepts and rethinking best practices
  • Getting set up


  • What is JSX?
  • Benefits of JSX
  • The difference between JSX and HTML
  • React without JSX

Component lifecycle:

  • Lifecycle methods
  • Instantiation
  • Lifetime
  • Teardown and cleanup
  • Anti-patterns

Data flow:

  • Props and propTypes
  • State
  • What belongs where?

Event handling:

  • Attaching event handlers
  • Events and state

Composing components:

  • Extending HTML
  • Composition
  • Parent/child relationship


  • What are mixins?
  • When to use them

DOM manipulation:

  • Accessing the DOM
  • Using non-React libraries


  • Controlled and uncontrolled components
  • Form events
  • Custom form components
  • Usability


  • CSS Transition Groups
  • Pitfalls
  • Interval rendering

Performance tuning:

  • shouldComponentUpdate
  • PureRenderMixin
  • Immutability helpers
  • Key
  • Gaining insight into the slow parts

Universal rendering:

  • Rendering on both the server and client

Development tools:

  • Build tools
  • Webpack and Browserify
  • Debugging tools


  • Using Jest and other test harnesses
  • Mocking components
  • Spying on functions
  • Simulating events

Architectural patterns:

  • Routing
  • Unidirectional Data Flow
  • Flux
  • Redux


09:00 - 16:15




Component lifecycle

Data flow

Event handling

Composing components


DOM manipulation



Performance tuning

Universal rendering

Development tools


Architectural patterns