Slide 1
Slide 1 text
React + Redux
Slide 2
Slide 2 text
React + Redux @nikgraf
Nik Graf
@nikgraf
[email protected]
Creator of Belle (UI Components)
Working with StarterSquad
Travelled around the World
Slide 3
Slide 3 text
React + Redux @nikgraf
ECMAScript2015
const sum = (first, second) => {
return first + second;
}
Slide 4
Slide 4 text
React + Redux @nikgraf
Created by Sebastian McKenzie
- ECMAScript 2015 Support, JSX Support
- Widely adopted
Slide 5
Slide 5 text
Let’s get started
Source: https://www.flickr.com/photos/mike52ad/
Slide 6
Slide 6 text
React + Redux @nikgraf
React
React is a JavaScript Library for building user
interfaces.
• Focus on the UI, not a Framework
• One-way reactive data flow (no two-way data binding)
• Virtual DOM
Slide 7
Slide 7 text
React + Redux @nikgraf
Virtual DOM
Keep track of state in DOM is hard.
The DOM API is slow.
(Try to re-render the whole DOM on every change)
Slide 8
Slide 8 text
React + Redux @nikgraf
Virtual DOM
Source: http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html
Slide 9
Slide 9 text
React + Redux @nikgraf
Virtual DOM
Source: http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html
Slide 10
Slide 10 text
React + Redux @nikgraf
Virtual DOM Benefits
Batched DOM read/write operations.
Efficient update of sub-tree only.
Slide 11
Slide 11 text
React + Redux @nikgraf
Our first Experiment Part I
index.html
Slide 12
Slide 12 text
React + Redux @nikgraf
Our first Experiment Part II
import React from 'react';
import ReactDOM from 'react-dom';
const exampleElement = document.getElementById('example');
ReactDOM.render(
Hello, world!
, exampleElement); main.js -> bundle.jsSlide 13
Slide 13 text
React + Redux @nikgraf
JSX
JSX is a JavaScript syntax extension
that looks similar to XML.
// Input (JSX):
var app = ;
// Output (JS):
var app = React.createElement(Nav, {color:"blue"});
Slide 14
Slide 14 text
React + Redux @nikgraf
Rendering a Component
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return (
Hello World!
); } const exampleNode = document.getElementById('example'); ReactDOM.render(, exampleNode); main.js -> bundle.jsSlide 15
Slide 15 text
React + Redux @nikgraf
index.html
Rendering a Component
Hello World!
Slide 16
Slide 16 text
React + Redux @nikgraf
Nested Components Part I
import React from 'react';
const Profile = ({avatar, name}) => {
return (
{name}
);
}
profile.js
Slide 17
Slide 17 text
React + Redux @nikgraf
import React from 'react';
import ReactDOM from 'react-dom';
import Profile from ‘./profile';
const App = () => {
return (
);
}
const exampleNode = document.getElementById('example');
ReactDOM.render(, exampleNode);
main.js -> bundle.js
Nested Components Part II
Hello World!
Slide 18
Slide 18 text
React + Redux @nikgraf
Nik
index.html
Nested Components Part III
Hello World!
Nik
Slide 19
Slide 19 text
React + Redux @nikgraf
Stateless Function Components
Functional Programming:
- avoid changing-state
- avoid mutable data
- calling a function twice with the same values as arguments will
produce the same result
Stateless Function Components:
- avoid changing-state
- avoid mutable data
- calling a function twice with the same values as arguments will
produce the same result
Slide 20
Slide 20 text
React + Redux @nikgraf
Wait, but why?
Predictable
easy to understand
&
easy to test
Slide 21
Slide 21 text
React + Redux @nikgraf
Slide 22
Slide 22 text
React + Redux @nikgraf
If/Else
const Profile = ({name, isOnline}) => {
let onlineIndicator;
if (isOnline) {
onlineIndicator = (green);
} else {
onlineIndicator = (red);
}
return (
{name} {onlineIndicator}
);
} profile.js
Slide 23
Slide 23 text
React + Redux @nikgraf
If/Else
Nik red
Slide 24
Slide 24 text
React + Redux @nikgraf
Loop
const FriendList = ({friends}) => {
return (
-
{friends.map((friend) => {
return
- {friend.name} ; })}
Slide 25
Slide 25 text
React + Redux @nikgraf
Loop
const friends = [
{ name: 'Max'},
{ name: 'Tom'},
];
- Max
- Tom
Slide 26
Slide 26 text
React + Redux @nikgraf
React Summary
- We can create out own components
- We can nest components as we like
- Stateless Function Components are pure
- We can control flow via JS (if, else, for, map …)
Slide 27
Slide 27 text
React + Redux @nikgraf
Interaction
const Profile = ({name}) => {
return (
{name}
Click me!
);
}
profile.js
Slide 28
Slide 28 text
React + Redux @nikgraf
What to do with interactions like
onMouseOver,
onSubmit &
onClick?
Slide 29
Slide 29 text
React + Redux @nikgraf
Redux to rescue!
Redux allows you to manage the state with a
minimal API but completely predictable behaviour.
Slide 30
Slide 30 text
React + Redux @nikgraf
What about Flux?
Source: https://twitter.com/codecartoons/status/667348216669741056
Slide 31
Slide 31 text
React + Redux @nikgraf
Basic Principle
(previousState, action) => newState
Slide 32
Slide 32 text
React + Redux @nikgraf
Slide 33
Slide 33 text
React + Redux @nikgraf
Redux Flow
Store
Action
Creators
React
Components
Reducers
Interaction e.g onClick
dispatch(action)
(newState)
(state)
(previousState, action)
Slide 34
Slide 34 text
React + Redux @nikgraf
Feels like Fear just turned
into a Superpower
Slide 35
Slide 35 text
React + Redux @nikgraf
Action
const action = {
type: 'ADD_TODO',
text: 'Call Mom',
}
Slide 36
Slide 36 text
React + Redux @nikgraf
Action Creator
function addTodo(text) {
const trimmedText = text.trim();
return {
type: 'ADD_TODO',
text: trimmedText,
}
}
Add Todo
actions.js
Slide 37
Slide 37 text
React + Redux @nikgraf
Reducer
const todos = (state = [], action) => {
switch (action.type) {
case 'ADD_TODO':
return [
...state,
{
text: action.text,
completed: false
}
]
default:
return state
}
} reducers.js
Slide 38
Slide 38 text
React + Redux @nikgraf
Store
import { createStore } from 'redux'
import todoReducer from '../reducers'
let store = createStore(todoReducer);
store.subscribe(() =>
console.log(store.getState())
)
store.dispatch(addTodo('Learn about reducers'));
store.dispatch(addTodo(‘Call Mom'));
Slide 39
Slide 39 text
React + Redux @nikgraf
Connect React with Redux
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import todoApp from './reducers';
import App from './containers/App';
let store = createStore(todoApp);
let exampleNode = document.getElementById('example');
ReactDOM.render(
,
exampleNode
);
Slide 40
Slide 40 text
React + Redux @nikgraf
Connect React +Redux
import React from 'react';
import { connect } from 'react-redux';
import { addTodo } from '../actions.js';
const App = ({dispatch, state}) => {
return (
Add Todo
);
};
export default connect(App);
Slide 41
Slide 41 text
React + Redux @nikgraf
Redux Summary
- Redux allows you to manage the state with
predictable behaviour.
- (previousState, action) => newState
Slide 42
Slide 42 text
React + Redux @nikgraf
Slide 43
Slide 43 text
React + Redux @nikgraf
Time-travel Demo
Slide 44
Slide 44 text
React + Redux @nikgraf
Why this Stack?
- Reusable Components
- Predictable Code (functional)
- TimeTravel
- Performant & lightweight
Slide 45
Slide 45 text
React + Redux @nikgraf
Is it production ready?
React
- used by Facebook, Firefox, Airbnb and many more
Redux
- used by Firefox, Docker, Technical University of
Vienna, Mattermark and many more
- “Love what you’re doing with Redux”
Jing Chen, creator of Flux
Slide 46
Slide 46 text
Vienna React Meetup
Source: http://www.wolfography.at/
Slide 47
Slide 47 text
React + Redux @nikgraf
The End
Thanks for listening!
https://github.com/nikgraf
https://twitter.com/nikgraf
Vienna React Meetup
http://www.meetup.com/Vienna-ReactJS-Meetup/