This document provides an introduction and overview of React and Redux. It begins with an introduction to key React concepts like components, props, state, and the virtual DOM. It then covers Redux, including actions, reducers, stores, and using Redux with React. Other topics include React Native, server-side rendering, routing with React Router, testing, and resources for learning more. The document aims to give the high-level essential information about React and Redux.

1. Intro to React & Redux
Boris Dinkevich
http://500Tech.com
boris@500tech.com

2. Remember this day

3. Boris Dinkevich
- 4 years Dev Ops
- 4 years Embedded C
- 4 years Ruby on Rails
- 4 years JavaScript (Angular/React)
Developing stuff

4. Boris Dinkevich
- AngularJS Israel (4K ppl)
- ReactJS Israel (2K ppl)
- Angular UP
- React Next
- React Courses
- Figuring what tech ppl do in NYC??
These days

6. ES2015 (ES6)

7. Const & Let
Strings
Arrow functions
Destructuring

8. A WORD ON TOOLS

9. npm - package repository
babel - transpiler
webpack - build tool

10. yarn - package repository
babel - transpiler
webpack - build tool

11. Create React App
https://github.com/facebookincubator/create-react-app

12. BACK TO REACT

13. HISTORY

14. Component Driven Development

15. COMPONENTS

20. Thinking in components

21. Thinking in components

22. COMPONENT INNARDS

23. Whats inside?
Component
Props
State

24. Main
Props
State
Footer
State
Header
State

25. Lifecycle methods
Mount
componentWillMount → Angular PreLink
componentDidMount → Angular PostLink
Update
componentWillUpdate
componentDidUpdate
Unmount
componentWillUnmount → $scope.$on('destroy')

26. Virtual DOM

27. Recipe
Ingredients
Eggs
Virtual DOM

28. Recipe
Ingredients
Eggs
Virtual DOM
Recipe
Ingredients
Eggs
Real DOM
=

29. Recipe
Ingredients
Eggs
Recipe
Ingredients
Eggs
Virtual DOM
Real DOM

30. Recipe
Ingredients
Eggs
Recipe
Ingredients
MilkEggs
New Virtual DOM
Recipe
Ingredients
Eggs
Old Virtual DOM
Real DOM
!=

31. Recipe
Ingredients
Eggs
Recipe
Ingredients
MilkEggs
New Virtual DOM
Recipe
Ingredients
Eggs
Old Virtual DOM
Real DOM
Milk

32. JSX

33. https://babeljs.io/repl/
Play with JSX online

34. =
function App() {
return React.createElement('div', null, [
React.createElement('h1', null, 'I am a component!'),
React.createElement('h2', null, 'I am a sub title')
]);
}
const App() = (
<div>
<h1>I am a component!</h1>
<h2>I am a sub title</h2>
</div>
);

35. PROPS

36. Component
Props
State

37. Passing Props
const Add = (props) => (
<h2>Its: { props.a + props.b }</h2>
);
const App = () => (
<Add a={ 2 } b={ 3 } />
);

38. Repeating with JavaScript
(3/3)
const Recipes = ({ recipes }) => (
<div>
<h1>Recipes</h1>
<ul>
{
recipes.map((recipe) => <Recipe recipe={ recipe } />)
}
</ul>
</div>
);

39. CLASSES

40. Make <App /> into a class
class App extends React.Component {
render() {
return (
<div>
<Recipes recipes={ recipes }/>
</div>
);
}
}

41. 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

42. FLUX

43. MVC
FLUX

45. Chat
Notifications
Messages
Page Title

46. Chat
Notifications
Messages
Page Title
Data

47. Flux

48. Components
Dispatcher
ActionsStores

49. Game engine
Store
Recipes
Waffles
App
Add RecipeRecipes
Recipe…Omelette Pancakes Recipe… Recipe…

50. REDUX

51. Click
Timeout
AJAX
Websocket
EVERYTHING IS AN ACTION
Add Recipe
Toggle Favorite
Fetch Recipes
Start Network

52. Current State
Next State
Reducers
(processors)
Action

53. Many reducers can be chained
Must return a new state — never modify previous one
Object.assign or Immutable
Only one store
REDUCERS

54. CONNECT

55. State to React
Store
Recipes
Recipe 1 Recipe 2
App
Recipes Add Recipe
Recipe 1 Recipe 2

56. State to React
Store
Recipes
Recipe 1 Recipe 2
App
Recipes Add Recipe
Recipe 1 Recipe 2

57. State to React
Store
Recipes
Recipe 1 Recipe 2
App
Recipes Add Recipe
Recipe 1 Recipe 2

58. OUR STATE
State
Recipes
Omelette Pancaek
User
Boris
T1

59. 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;
};

60. 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;
};

61. 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;
};

62. Object.assign()
const original = {
name: 'Cat',
age: 3
};
const updated = Object.assign({}, original, {
name: 'Dog'
});
updated
> { name: 'Dog', age: 3 }
updated === original
> false

63. REFERENCE TREES
State
Recipes
Omelette Pancaek
User
Boris
T1
Pancake
T2

64. REFERENCE TREES
State
Recipes
Omelette Pancaek
User
Boris
T1
Recipes
Omelette Pancake
T2

65. REFERENCE TREES
State
Recipes
Omelette Pancaek
User
Boris
T1
State
Recipes
Omelette Pancake
User
Boris
T2

66. IN MEMORY
State
Recipes
Omelette Pancaek
User
Boris
State
Recipes
Pancake
T1 T2

67. ACTION #2
State
Recipes
Omelette Pancaek
User
Boris
State
Recipes
Omelett Pancake
User
Boris
T1 T2
State
Recipes
Bacon Pancake
User
Boris
T3

68. IN MEMORY
State
Recipes
Omelette Pancaek
User
Boris
State
Recipes
Pancake
State
Recipes
Bacon
T1 T2 T3

69. Why not direct?
state.recipes[recipeId].name = newName;

70. OH, NO!
State
Recipes
Omelette Pancaek
User
Boris
State
Recipes
Pancake
State
Recipes
Bacon
T1 T2 T3
Omelett
User
Boris
User
Cat Pancake

71. OUT SIDE CHANGE
State
Recipes
Omelette Pancaek
User
Cat
State
Recipes
Pancake
State
Recipes
Bacon
T1 T2 T3

72. OH, NO!
State
Recipes
Omelette Pancaek
User
Cat
State
Recipes
Pancake
State
Recipes
Bacon
T1 T2 T3
Omelett
User
Cat
User
Cat Pancake

73. Console work
s1 = store.getState()
- Do an action
s2 = store.getState()
- Do an action
s3 = store.getState()
store.dispatch({ type: ‘SET_STATE’, payload: s1 });

74. Console work
s1 = store.getState()
- Do an action
s2 = store.getState()
- Do an action
s3 = store.getState()
store.dispatch({ type: ‘SET_STATE’, payload: s1 });

75. Console work
s1 = store.getState()
- Do an action
s2 = store.getState()
- Do an action
s3 = store.getState()
store.dispatch({ type: ‘SET_STATE’, payload: s1 });

76. Console work
s1 = store.getState()
- Do an action
s2 = store.getState()
- Do an action
s3 = store.getState()
store.dispatch({ type: ‘SET_STATE’, payload: s1 });

77. UNDO / REDO

78. BUT…
1. Actions like LOGIN
2. Actions from Middleware / Redux-Thunk
3. Layout / UI

79. Directory structure
reducers
store
components

80. ROUTING

81. React Router
import { Router, Route, browserHistory } from 'react-router'
render(
<Provider store={ store }>
<Router history={ browserHistory }>
..routes..
</Router>
</Provider>,
document.getElementById('app')
);

82. React Router
<Route path="" components={ App }>
<Route path="/add" component={ AddRecipe } />
<Route path="/recipe" component={ Recipes } />
</Route>
<Route path="*" component={ NotFound } />

83. REACT NATIVE

84. const HelloWeb = ({ name }) => (
<div>
<p>
Hello { name }
</p>
</div>
);
const HelloNative = ({ name }) => (
<View>
<Text>
Hello { name }
</Text>
</View>
);

85. One code
iOS
Android
Web
* MacOS
* Windows
* More?

86. Auto updates
No Apple Store / Google Play resubmit
Think of the bug solving!

87. SERVER RENDERING

88. Fetch
index.html
Parse & Show
Fetch JS
App & React
Load JS
Run React
AJAX
Update UI
Fetch
index.html
Parse & Show
time

89. Fetch
index.html
Parse & Show
Fetch JS
App & React
Load JS
Run React
AJAX
Update UI
Fetch
index.html
Parse & Show
Fetch JS
App & React
Load JS
Run React
Update UI Clickable
time
Load App
Local AJAX
Render to HTML
& JSON
Cachable

90. TESTS

91. Testing
Jest - Test framework - https://facebook.github.io/jest/
Enzyme - Test utils for React - https://github.com/airbnb/enzyme
Redux tests - http://redux.js.org/docs/recipes/WritingTests.html

92. SUMMARY

93. THE COMPLETE
REDUX BOOK

94. Read our blog:
http://blog.500tech.com
React & Redux