React.js Web Development

Web JavaScript

Want to follow in the footsteps of Facebook, Instragram, 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.

Pre-reqs

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.

Introduction:

  • Concepts and rethinking best practices
  • Getting set up

JSX:

  • 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

Mixins:

  • What are mixins?
  • When to use them

DOM manipulation:

  • Accessing the DOM
  • Using non-React libraries

Forms:

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

Animations:

  • 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

Testing:

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

Architectural patterns:

  • Routing
  • Unidirectional Data Flow
  • Flux
  • Redux

Tid

09:00 - 16:15

Emner

Introduction

JSX

Component lifecycle

Data flow

Event handling

Composing components

Mixins

DOM manipulation

Forms

Animations

Performance tuning

Universal rendering

Development tools

Testing

Architectural patterns