Slides from the Reactive-Amsterdam meetup on January 17th 2017.

1. The Productive
Developer Guide to
React

2. Maurice de Beijer
The Problem Solver
Microsoft Azure MVP
Freelance developer/instructor
Twitter: @mauricedb & @React_Tutorial
Web: http://www.TheProblemSolver.nl
E-mail: maurice.de.beijer@gmail.com
Who am I?

3. Is React reactive?

4. RxJS map operator

5. const Rx = require('rxjs');
const fetch = require('node‐fetch');
const url = 'http://api.themoviedb.org/3/movie/top_rated';
let movies = [];
Rx.Observable
.range(1, 5)
.concatMap(page =>
fetch(`${url}?api_key=${process.env.API_KEY}&page=${page}`))
.flatMap(rsp => rsp.json())
.map(json => json.results)
.scan((prev, current) => prev.concat(current))
.subscribe(item => movies = item);
RxJS example

6. import React from 'react';
const Greeter = (props) => {
return (
<div>
Hello {props.name}
</div>
);
};
export default Greeter;
A functional React component

7. WHAT IS REACT?

8. React is a JavaScript library
for building user interfaces
- Facebook

9. Create-React-App
The o cial React starter project

10. JSX is the language of choice
It combines ECMAScript and HTML markup

11. import React from 'react';
const Greeter = (props) => {
return (
<div>
Hello {props.name}
</div>
);
};
export default Greeter;
JSX = Code with markup

12. ComponentsThe building blocks of a React application

13. React Components example
1. import React, {Component} from 'react';
2. import {path} from './config';
3.
4. class Billboard extends Component {
5. render() {
6. const movie = this.props.movie;
7.
8. return (
9. <div className="row">
10. <div className="title">
11. {movie.title}
12. </div>

14. import React from 'react';
import ReactDOM from 'react‐dom';
import App from './app';
ReactDOM.render(React.createElement(App),
document.getElementById('app'));
ReactDOMReactDOM renders the components into the DOM

15. Components & Props
Props are inputs to components
They should never be updated

16. Parent Components example
1. import React, { PropTypes } from 'react';
2. import Movie from './movie';
3.
4. const MovieList = ({ movies }) => {
5. return (
6. <div className="movie‐list">
7. {movies.map(movie => (
8. <Movie key={movie.id}
9. movie={movie}
10. />))}
11. </div>
12. );

17. Child Components example
1. import React, { Component, PropTypes } from
'react';
2. import {path} from './config';
3.
4. class Movie extends Component {
5. render() {
6. const { movie } = this.props;
7.
8. return (
9. <div className="movie">
10. <div className="title">
11. {movie.title}

18. Components & State
Internal to a component
Can be used as props for a child component

19. Stateful Components example
1. import React, { Component } from 'react';
2. import MovieList from './movie‐list';
3.
4. class MovieContainer extends Component {
5. constructor(props) {
6. super(props);
7.
8. this.state = {
9. movies: null,
10. };
11. }
12.

20. ReduxA predictable state container for JavaScript apps

21. Redux principles
Single source of truth
State is read-only
Changes are made with pure functions

22. Redux reducer
1. function todos(state = [], action) {
2. switch (action.type) {
3. case ADD_TODO:
4. return [
5. ...state,
6. {
7. text: action.text,
8. completed: false
9. }
10. ]
11. case TOGGLE_TODO:
12. return state.map((todo, index) => {

23. MobXSimple, scalable state management

24. MobX principles
Single source of truth
State is observable
React components are observers

25. MobX observers
1. import React, { PropTypes } from 'react';
2. import { observable } from 'mobx'
3. import { observer } from 'mobx‐react';
4. import Movie from './movie';
5.
6. class MovieStore {
7. @observable movies = [];
8. @observable directors = [];
9. }
10.
11.
12. const MovieList = observer(({ movies }) => {

26. Is React reactive?
NO! But it's a great library for building user interfaces
And MobX is reactive!

27. @mauricedb