The document provides an overview of React including: - React is a JavaScript library for building user interfaces using components as building blocks. - Components can contain state that updates internally or accept data as inputs called props from parent components. - ReactDOM renders React components into the DOM. - Other topics covered include JSX, functional components, class components, props, state, Redux for state management, and MobX for reactive state management.

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