Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to React

C9a5478931da1bbdcc0be2800daa2915?s=47 Jack Lenox
January 28, 2015

Introduction to React

I gave this talk at Code Cumbria on Wednesday 28 January 2015. I'm very new to React myself so this is a bit of a compilation of talks and videos that I've been absorbing in the last couple of months.

With thanks to my colleague Davide 'Folletto' Casali for making the deck look good!


Jack Lenox

January 28, 2015

More Decks by Jack Lenox

Other Decks in Technology


  1. J A C K L E N O X Introduction

    to React
  2. @jacklenox

  3. Disclaimer: IANAE* * I first touched some React code about

    six weeks ago
  4. The Problem Interface development increasingly moving to JavaScript. Manifesting in

    a lot of jQuery spaghetti code. Which has thus led to the rise of frameworks…
  5. JavaScript Framworks Backbone Ember Angular

  6. “ “Don’t use a chainsaw to open an envelope.” –Some

    guy (or girl), I couldn’t find this on Google.
  7. “ “Do use a chainsaw to cut down a tree.”

  8. Enter… React

  9. A JavaScript library for building user interfaces

  10. React is sort of just the V in MVC

  11. “ “The framework cannot know how to separate your concerns

    for you. It should only provide powerful, expressive tools for the user to do it correctly.” –Pete Hunt, Facebook
  12. It plays nicely with your stack

  13. It’s easy to learn

  14. It’s all about components!

  15. A React Component A highly cohesive building block for UIs

    loosely coupled with other components.
  16. A simple component

  17. React is really fast

  18. Virtual DOM React uses a virtual DOM diff implementation for

    ultra-high performance. It can also render on the server using Node.js – no heavy browser DOM required.
  19. It’s compatible with atomic design

  20. JSX…

  21. Remember this?

  22. It becomes this.

  23. “ “The accessibility of templates and the power of JavaScript.”

    –Pete Hunt, again
  24. Very easy to reuse components

  25. None
  26. Data Flow One-way reactive data flow. Reduces boilerplate and is

    easier to reason about than traditional data binding. In layman’s terms, it does shit automagically. :)
  27. If the data is updated,
 it re-renders all by itself!

  28. “ “Data changing over time is the root of all

    evil.” –Pete Hunt, yet again
  29. Demo time

  30. Resources facebook.github.io/react egghead.io/series/ react-fundamentals

  31. Fin. @jacklenox