Introduction to ReactJS

Very short introduction to ReactJS given during the React Meetup Munich

Transcript

1. Introduction to React Johann Romefort Engineering Evangelist at Stylight follow Johann : @romefort follow Stylight : @codetailors
2. It’s the latest hot thing
3. Who uses React?
4. Hacker News Hiring Trends September 2015
5. Fast Growing Community ngmodules.com react-components.com 1y ago: Today: 870 modules less than 100 modules 1600 modules 1259 modules
6. What is React? “A Javascript Library for building (composable) user interfaces”
7. React is not: • Another MVC framework: React is just the V in MVC. • It does not use templates: • everything is broken down into components assembled by Javascript

8. Why React? • Simple and Performant • Declarative • Virtual DOM • Everything is a component • Small: Just a library, not a framework • Unidirectional Data-flow • Isomorphic Javascript
9. Simple and Performant • No complicated API to learn • mixing markup and code seems like an heresy at first • but it simplifies a lot of things
10. What makes UI hard to build? • Human verified: Very hard to automate testing • Lots of state • by simplifying the markup, DOM manipulation and data flow, React tried to make things more predictable by reducing complexity.
11. The Virtual DOM
12. What’s a Virtual DOM anyway? • Probably the main reason you’ll love React • Mutating the DOM is the most expensive operation • Batches mutation into Virtual DOM • React maintain a virtual representation of the DOM in memory so it can only mutate the parts of the DOM that need to be updated via a Diff algorithm
13. Re-rendering • 1 - Build new Virtual DOM subtree • 2 - Diff the new virtual DOM against old one • 3 - Compute minimal set of DOM mutations • 4 - Batch execute updates
14. Everything is a component • They are • Composable • Reusable • maintainable
15. React Component Lifecycle • Mounting • componentWillMount • componentDidMount • Updating • componentWillReceiveProps • shouldComponentUpdate • componentWillUpdate • componentDidUpdate • Unmounting • componentWillUnmount
16. Unified one-way dataflow • Simpler to reason about • Events flow up, Data flows down • reactive programming is a programming paradigm oriented around data flows and the propagation of change. This means that it should be possible to express static or dynamic data flows with ease in the programming languages used, and that the underlying execution model will automatically propagate changes through the data flow. • No databinding like in AngularJS • render method is just called everytime the data changes
17. Props vs State • props and state are JS Objects • Props are immutable: Components cannot change their props but are responsible for putting together the props of their child components • State starts with default value but can be mutated most likely from a user event • State are internals to components and “private”
18. JSX
19. What’s JSX? • JSX is a JavaScript syntax extension • It’s basically XML in your JS :) • You don’t have to use it if you don’t want to
20. Isomorphic JS • Shared JavaScript that runs on both the client & server • On first load: server-rendered HTML • Then client-side JS take over. • Faster loading time :)
22. Hello React app.js app.html
24. React Dev Tools
25. Thank You! All the meetups we are organising: http://meetup.com/stylight-tech-events Follow us on twitter: @codetailors