Intro course presentation for building Modern Web Apps with React, MobX, Redux, Angular, and etc. This presentation outline fundamental concepts used by these tools. Github repo - https://github.com/stanimirtt/modern-web-apps-development-course-2018

1. Modern Web Apps
Development
by Stanimir Todorov
linkedin.com/in/stanimirt
github.com/stanimirtt
stanimir.todorof@gmail.com

2. Agenda
1. Intro
2. React
3. MobX
4. Redux
5. Angular (if we have the time)

3. Nowadays
ExecutionProject Files Transpiling

4. Setup Environment

5. Project Structure
git clone git@github.com:stanimirtt/modern-web-apps-development-course-2018.git

6. React

7. Component
1. JSX
2. ES6 Import Statements
3. ReactDOM

8. 1. Export Statements
2. Class-Based Components
3. Handling User Events
4. State
5. Controlled Components vs Uncontrolled Components
(refs)

9. Items Page Wireframe

10. Hands On

11. AJAX Requests with
React

12. 1. Axios
2. Props
3. Keys
4. Selection
5. Styling

13. Hands On

14. Life-cycle methods

15. MobX

16. ReactMobX
State

17. 1/ State Should Be Minimally Defined
1. No Caching
2. No Data Duplication
3. No Cascading State Changes

18. 2/ Everything Should Be Derived
1. Automatically
2. Define derivations and reactions
3. Mobx ensures efficiency and consistency

21. observable
Enables MobX to observe your data
observer
MobX ensures that this component is consistent with the state
computed
Mobx ensures that this value is consistent with the state

22. yarn add mobx mobx-react

23. 1/ Define your state and make it observable
1. import { observable } from 'mobx';
2. const appState = observable({
items: [],
selectedItem: ''
});

24. 2/ Create a view that responds to changes in the
State
1. import { observer } from 'mobx-react';
2. export default observer(App);
3. ReactDOM.render(<App appState={appState} />,
document.querySelector('.container'));

25. 3/ Modify the State
1. appState.setSelectedItem = action(item => {
appState.selectedItem = item;
});
2. this.props.appState.setSelectedItem(response.data);

26. @decorators
1. yarn add babel-plugin-transform-decorators-legacy -D
2. .babelrc
{
...
"plugins": ["transform-decorators-legacy"]
}
3. .eslintrc.json - "experimentalDecorators": true

27. React and MobX
1. Provider
2. Inject

28. Hands On

29. React Router

30. Examples for Route
● Route: `http://localhost:8080/`
● Route: `http://localhost:8080/items/5`
● Route: `http://localhost:8080/items/new`

31. Redux

32. 3 Principles
Single source of truth
State is read-only
Changes are made with pure functions

33. ReactRedux
Data Modeling

34. State
The state of your whole application is stored in an object tree within a single store.
console.log(store.getState())
/* Prints
{
itemSelected: {...},
items: [
{
id: 1,
title: 'My Item',
},
...
]
}
*/

35. Actions
The only way to change the state is to emit an action, an object describing what
happened.
store.dispatch({
type: 'ITEM_SELECTED',
item: { … }
})

36. Reducers
To specify how the state tree is transformed by actions, you write pure reducers.
function itemSelected(state = [], action) {
switch (action.type) {
case 'ITEM_SELECTED':
return action.item;
default:
return state
}
}

38. Containers - Connecting Redux to React

39. Wrap-up
1. Add reducer in reducers folder with name of state key (Redux)
2. Import the created reducer in reducers/index.js and register with
combineReducers
3. Add action creator in action/index.js file
4. Identify which component need to be connect to the store (Redux)
5. Create a container file in containers folder
6. Import the component that need props and dispatch from the store in that
container

40. 7. Wire the component to the store with the container following these steps:
a. import { connect } from 'react-redux';
b. import { bindActionCreators } from 'redux'; // in case you need to dispatch an action
c. const mapStateToProps = state => ({ items: state.items });
d. const mapDispatchToProps = dispatch => bindActionCreators({ onItemSelect: selectItem }, dispatch);
// in case you need to dispatch an action
a. export default connect(mapStateToProps, mapDispatchToProps)(Component); // name of the imported
component

41. Hands On

42. Middleware

44. Hands On

45. Reselect

46. Angular

47. Architecture and setup

49. Modules

50. Modules

51. Modules

52. Modules

53. Components
@Component({
selector: 'app-hero-list',
templateUrl: './hero-list.component.html',
providers: [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}

54. Templates
<h2>Hero List</h2>
<p><i>Pick a hero from the list</i></p>
<ul>
<li *ngFor="let hero of heroes"
(click)="selectHero(hero)">
{{hero.name}}
</li>
</ul>
<app-hero-detail *ngIf="selectedHero"
[hero]="selectedHero"></app-hero-detail>

55. Data binding
<li>{{hero.name}}</li>
<app-hero-detail
[hero]="selectedHero"></app-hero-detail>
<li (click)="selectHero(hero)"></li>

57. Pipes
<!-- Default format: output 'Jun 15, 2015'-->
<p>Today is {{today | date}}</p>
<!-- fullDate format: output 'Monday, June 15, 2015'-->
<p>The date is {{today | date:'fullDate'}}</p>
<!-- shortTime format: output '9:43 AM'-->
<p>The time is {{today | date:'shortTime'}}</p>

58. Directives
● Structural directives
<li *ngFor="let hero of heroes"></li>
<app-hero-detail
*ngIf="selectedHero"></app-hero-detail>
● Attribute directives
<input [(ngModel)]="hero.name">

59. Services
export class Logger {
log(msg: any) { console.log(msg); }
error(msg: any) { console.error(msg); }
warn(msg: any) { console.warn(msg); }
}

60. Services
export class HeroService {
private heroes: Hero[] = [];
constructor(
private backend: BackendService,
private logger: Logger) { }
getHeroes() {
this.backend.getAll(Hero).then( (heroes:
Hero[]) => {
this.logger.log(`Fetched
${heroes.length} heroes.`);
this.heroes.push(...heroes); // fill cache
});
return this.heroes;
}
}

61. Dependency Injection
constructor(private service: HeroService) { }

62. Application Lifecycle

63. Resources
● https://github.com/ryanmcdermott/clean-code-javascript#introduction
● https://vasanthk.gitbooks.io/react-bits/
● https://github.com/stanimirtt/modern-web-apps-development-course-2018
● https://gist.github.com/stanimirtt/4537fe1ad1f3c209043e305dc0e2b990