React in browser, mobile and server
Opi Danihelka & Michal Sänger
Motivation
How to make interactive websites?
1. server render
- slow, bad user experience
2. jQuery
- solves only simple problems
- modifies DOM => slow re-render
3. React
- solution for complex problems
- fast re-render
- usecase Facebook.com
React.js
JavaScript library for building User Interfaces
React.js
- 2013, by Facebook, open source
- library not a framework
- for interactive UI and SPA
- The V in MVC
- React will solve only rendering of UI for you
React.js
- Components not templates
- composition, reusable
- one way data flow
- props
- model in state, not in DOM
- principles of functional programming
React.js
- Components not templates
- composition, reusable
- props
- model in state, not in DOM
class TodoList extends React.Component {
render() {
return (
<ul>
{this.props.items.map(item => (
<li key={item.id}>{item.text}</li>
))}
</ul>
);
}
}
JSX
React.js
- Virtual DOM
- re-render not mutate
- super fast rendering
React.js
- for interactive UI and SPA
- facebook.com
- instagram.com
- seznam.cz
- airbank.cz
Redux
Predictable state container for JavaScript apps
Redux
Redux
- single global store of data (=model)
- one way data flow
- event based
- components are dispatching actions, redux listens those actions and produce new state (=> immutable state)
- time travel, great debugging
React on server
- JavaScript on server - Node.js
- server side rendering
- SEO
- faster initial load
- Next.js (2.0)
- SPA, prefetch
React Native
- React on mobile
- Feb 2015, by Facebook, open source
- framework, communicates with native components
- cross platform (Android/iOS)
Native
React Native
<div> -> <View>
<span> -> <Text>
<img> -> <Image>
- no browser, no DOM, no HTML
Native
- access to the device native functions (Bluetooth, camera, gyro, GPS...)
React Native
Write once run anywhere- Learn once write anywhere
- shared business logic
- Redux
- truly native app distributed over Apple Store, Google Play
- examples: Airbnb, Instagram, Uber
Native
Full-Stack JavaScript
Full-Stack JavaScript
Native
One team
- one team, three platforms
- React, React Native, Node.js