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!

Transcript

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.” –Me
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
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