Introduction to ReactJS and Redux
0 likes487 views
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.
![=
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>
);](https://image.slidesharecdn.com/react-intro-170419223229/85/Introduction-to-ReactJS-and-Redux-34-320.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;
};](https://image.slidesharecdn.com/react-intro-170419223229/85/Introduction-to-ReactJS-and-Redux-59-320.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;
};](https://image.slidesharecdn.com/react-intro-170419223229/85/Introduction-to-ReactJS-and-Redux-60-320.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;
};](https://image.slidesharecdn.com/react-intro-170419223229/85/Introduction-to-ReactJS-and-Redux-61-320.jpg)
![Why not direct?
state.recipes[recipeId].name = newName;](https://image.slidesharecdn.com/react-intro-170419223229/85/Introduction-to-ReactJS-and-Redux-69-320.jpg)
Introduction to ReactJS and Redux
- 1. Intro to React & Redux Boris Dinkevich http://500Tech.com [email protected]
- 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
- 12. BACK TO REACT
- 13. HISTORY
- 15. COMPONENTS
- 25. Lifecycle methods Mount componentWillMount → Angular PreLink componentDidMount → Angular PostLink Update componentWillUpdate componentDidUpdate Unmount componentWillUnmount → $scope.$on('destroy')
- 26. Virtual 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
- 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
- 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
- 47. Flux
- 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
- 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
- 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
- 65. REFERENCE TREES State Recipes Omelette Pancaek User Boris T1 State Recipes Omelette Pancake User Boris 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
- 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