introduction to react & redux
TRANSCRIPT
![Page 1: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/1.jpg)
Intro to React & Redux
Boris Dinkevich
http://500Tech.com
![Page 2: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/2.jpg)
Boris Dinkevich
- React evangelist - Past Angular hippie - CoAuthor of The Complete Redux Book
CoFounder @ 500Tech
![Page 3: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/3.jpg)
ES2015 (ES6)
![Page 4: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/4.jpg)
Const & Let
Strings
Arrow functions
Destructuring
![Page 5: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/5.jpg)
A WORD ON TOOLS
![Page 6: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/6.jpg)
npm - package repository
babel - transpiler
webpack - build tool
![Page 7: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/7.jpg)
BACK TO REACT
![Page 8: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/8.jpg)
HISTORY
![Page 9: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/9.jpg)
Component Driven Development
![Page 10: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/10.jpg)
Thinking in components
![Page 11: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/11.jpg)
Thinking in components
![Page 12: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/12.jpg)
Lifecycle methods
Mount componentWillMount → Angular PreLink
componentDidMount → Angular PostLink
Update componentWillUpdate
componentDidUpdate
Unmount componentWillUnmount → $scope.$on('destroy')
![Page 13: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/13.jpg)
Virtual DOM
![Page 14: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/14.jpg)
Recipe
Ingredients
Eggs
Virtual DOM
Recipe
Ingredients
Eggs
Real DOM
=
![Page 15: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/15.jpg)
Recipe
Ingredients
Eggs
Recipe
Ingredients
MilkEggs
New Virtual DOM
Recipe
Ingredients
Eggs
Old Virtual DOM
Real DOM
!=
![Page 16: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/16.jpg)
JSX
![Page 18: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/18.jpg)
=
function App() { return React.createElement('div', null, [ React.createElement('h1', null, 'I am a component!'), React.createElement('h2', null, 'I am a sub title') ]); }
function App() { return ( <div> <h1>I am a component!</h1> <h2>I am a sub title</h2> </div> ); }
![Page 19: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/19.jpg)
PROPS
![Page 20: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/20.jpg)
Passing Props
const Add = (props) => ( <h2>Its: { props.a + props.b }</h2>); const App = () => ( <Add a={ 2 } b={ 3 } /> );
![Page 21: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/21.jpg)
Repeating with JavaScript (3/3)
const Recipes = ({ recipes }) => ( <div> <h1>Recipes</h1> <ul> { recipes.map((recipe) => <Recipe recipe={ recipe } />) } </ul> </div>);
![Page 22: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/22.jpg)
CLASSES
![Page 23: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/23.jpg)
Make <App /> into a class
class App extends React.Component { render() { return ( <div> <Recipes recipes={ recipes }/> </div> ); } }
![Page 24: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/24.jpg)
Component Lifecycle
class MyComponent extends React.Component { constructor() { } render() { } getInitialState() { } getDefaultProps() { }
componentWillMount() { } componentDidMount() { }
componentWillReceiveProps() { } shouldComponentUpdate() { }
componentWillUpdate() { } componentDidUpdate() { } componentWillUnmount() { }}
https://facebook.github.io/react/docs/component-specs.html
![Page 25: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/25.jpg)
CHANGE DETECTION
![Page 26: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/26.jpg)
Change detectionProps change
State change - setState()
Forced - forceUpdate()
![Page 27: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/27.jpg)
Add a recipe after 1sec
constructor() { super(); setTimeout(() => { console.log(`Adding new recipe`); recipes.push('Shakshuka'); }, 1000); }
![Page 28: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/28.jpg)
PROP TYPES
![Page 29: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/29.jpg)
Setting PropTypes
AddRecipe.propTypes = { addRecipe: React.PropTypes.func.isRequired};
add-recipe.js
https://facebook.github.io/react/docs/reusable-components.html
![Page 30: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/30.jpg)
FLUX
![Page 31: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/31.jpg)
MVCFLUX
![Page 32: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/32.jpg)
Flux
![Page 33: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/33.jpg)
Components
Dispatcher
ActionsStores
![Page 34: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/34.jpg)
![Page 35: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/35.jpg)
Game engine
Store
Recipes
Waffles
App
Add RecipeRecipes
Recipe…Omelette Pancakes Recipe… Recipe…
![Page 36: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/36.jpg)
REDUX
![Page 37: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/37.jpg)
Click
Timeout
AJAX
Websocket
EVERYTHING IS AN ACTION
Add Recipe
Toggle Favorite
Fetch Recipes
Start Network
![Page 38: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/38.jpg)
Current State
Next StateReducers (processors)
Action
![Page 39: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/39.jpg)
Many reducers can be chained
Must return a new state — never modify previous one
Object.assign or Immutable
Only one store
REDUCERS
![Page 40: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/40.jpg)
CONNECT
![Page 41: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/41.jpg)
State to React
Store
Recipes
Recipe 1 Recipe 2
App
Recipes Add Recipe
Recipe 1 Recipe 2
![Page 42: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/42.jpg)
State to React
Store
Recipes
Recipe 1 Recipe 2
App
Recipes Add Recipe
Recipe 1 Recipe 2
![Page 43: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/43.jpg)
State to React
Store
Recipes
Recipe 1 Recipe 2
App
Recipes Add Recipe
Recipe 1 Recipe 2
![Page 44: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/44.jpg)
Connect
connect()(App);
![Page 45: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/45.jpg)
Connect
function mapStateToProps(state) { return {}; } function mapDispatchToProps(dispath) { return {}; } connect(mapStateToProps, mapDispatchToProps)(App);
![Page 46: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/46.jpg)
MUTATE STATE
![Page 47: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/47.jpg)
OUR STATE
State
Recipes
Omelette Pancaek
User
Boris
T1
![Page 48: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/48.jpg)
The reducer
action = { type: 'RENAME_RECIPE', recipeId: 871, name: 'Pancake'};
const reducer = (state, action) => { switch (action.type) { case ‘RENAME_RECIPE': const { recipeId, newName } = action; state.recipes[recipeId].name = newName; return state; } return state; };
![Page 49: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/49.jpg)
The reducer
action = { type: 'RENAME_RECIPE', recipeId: 871, name: 'Pancake'};
const reducer = (state, action) => { switch (action.type) { case ‘RENAME_RECIPE': const { recipeId, newName } = action; state.recipes[recipeId].name = newName; return state; } return state; };
![Page 50: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/50.jpg)
The reducer
const reducer = (state, action) => { switch (action.type) { case ‘RENAME_RECIPE': const recipe = state.recipes[action.recipeId]; const newRecipe = Object.assign({}, recipe, { name: action.newName }); const newRecipes = Object.assign({}, state.recipes, { [action.recipeId]: newRecipe }); return Object.assign({}, state, { recipes: newRecipes }); } return state; };
![Page 51: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/51.jpg)
Object.assign()
const original = { name: 'Cat', age: 3 }; const updated = Object.assign({}, original, { name: 'Dog'});
updated> { name: 'Dog', age: 3 } updated === original> false
![Page 52: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/52.jpg)
REFERENCE TREES
State
Recipes
Omelette Pancaek
User
Boris
T1
Pancake
T2
![Page 53: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/53.jpg)
REFERENCE TREES
State
Recipes
Omelette Pancaek
User
Boris
T1
Recipes
Omelette Pancake
T2
![Page 54: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/54.jpg)
REFERENCE TREES
State
Recipes
Omelette Pancaek
User
Boris
T1
State
Recipes
Omelette Pancake
User
Boris
T2
![Page 55: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/55.jpg)
IN MEMORY
State
Recipes
Omelette Pancaek
User
Boris
State
Recipes
Pancake
T1 T2
![Page 56: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/56.jpg)
ACTION #2
State
Recipes
Omelette Pancaek
User
Boris
State
Recipes
Omelett Pancake
User
Boris
T1 T2
State
Recipes
Bacon Pancake
User
Boris
T3
![Page 57: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/57.jpg)
IN MEMORY
State
Recipes
Omelette Pancaek
User
Boris
State
Recipes
Pancake
State
Recipes
Bacon
T1 T2 T3
![Page 58: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/58.jpg)
Why not direct?
state.recipes[recipeId].name = newName;
![Page 59: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/59.jpg)
OH, NO!
State
Recipes
Omelette Pancaek
User
Boris
State
Recipes
Pancake
State
Recipes
Bacon
T1 T2 T3
Omelett
User
Boris
User
Cat Pancake
![Page 60: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/60.jpg)
OUT SIDE CHANGE
State
Recipes
Omelette Pancaek
User
Cat
State
Recipes
Pancake
State
Recipes
Bacon
T1 T2 T3
![Page 61: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/61.jpg)
OH, NO!
State
Recipes
Omelette Pancaek
User
Cat
State
Recipes
Pancake
State
Recipes
Bacon
T1 T2 T3
Omelett
User
Cat
User
Cat Pancake
![Page 62: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/62.jpg)
Console work
s1 = store.getState()
- Do an action
s2 = store.getState()
- Do an action
s3 = store.getState()
store.dispatch({ type: ‘SET_STATE’, payload: s1 });
![Page 63: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/63.jpg)
Console work
s1 = store.getState()
- Do an action
s2 = store.getState()
- Do an action
s3 = store.getState()
store.dispatch({ type: ‘SET_STATE’, payload: s1 });
![Page 64: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/64.jpg)
Console work
s1 = store.getState()
- Do an action
s2 = store.getState()
- Do an action
s3 = store.getState()
store.dispatch({ type: ‘SET_STATE’, payload: s1 });
![Page 65: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/65.jpg)
Console work
s1 = store.getState()
- Do an action
s2 = store.getState()
- Do an action
s3 = store.getState()
store.dispatch({ type: ‘SET_STATE’, payload: s1 });
![Page 66: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/66.jpg)
UNDO / REDO
![Page 67: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/67.jpg)
BUT…1. Actions like LOGIN 2. Actions from Middleware / Redux-Thunk 3. Layout / UI
![Page 68: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/68.jpg)
Directory structurereducers
store
components
![Page 69: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/69.jpg)
ACTION CREATORS
![Page 70: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/70.jpg)
Actions
export const addRecipe = (name) => ({ type: 'ADD_RECIPE', name: name});
![Page 71: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/71.jpg)
ROUTING
![Page 72: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/72.jpg)
React Router
import { Router, Route, browserHistory } from 'react-router'render( <Provider store={ store }> <Router history={ browserHistory }> <Route path="" components={ App }> <Route path="/add" component={ AddRecipe } /> <Route path="/" component={ Recipes } /> </Route> <Route path="*" component={ NotFound } /> </Router> </Provider>, document.getElementById('app') );
![Page 73: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/73.jpg)
TESTS
![Page 74: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/74.jpg)
TestingKarma - Test running - https://karma-runner.github.io/0.13/index.html
Enzyme - Test utils for React - https://github.com/airbnb/enzyme
Jasmine - Matcher and mocks - http://ricostacruz.com/cheatsheets/jasmine.html
Redux tests - http://redux.js.org/docs/recipes/WritingTests.html
![Page 75: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/75.jpg)
SUMMARY
![Page 76: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/76.jpg)
Useful stuffMeetup: http://www.meetup.com/ReactJS-Israel/
Redux tutorial: https://egghead.io/series/getting-started-with-redux
The code we built: https://bitbucket.org/500tech/react-redux-course
![Page 77: Introduction to React & Redux](https://reader034.vdocuments.net/reader034/viewer/2022052208/58729ddb1a28ab07208b5199/html5/thumbnails/77.jpg)