The ProductiveDeveloper Guide to

React

Maurice de BeijerThe Problem SolverMicrosoft Azure MVPFreelance developer/instructorTwitter: @mauricedb & @React_TutorialWeb: http://www.TheProblemSolver.nlE-mail: maurice.de.beijer@gmail.com

Who am I?

Is React reactive?

RxJS map operator

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

import React from 'react'; 

const Greeter = (props) => {     return (         <div>             Hello {props.name}         </div>     ); }; 

export default Greeter;

A functional React component

WHAT IS REACT?

React is a JavaScript libraryfor building user interfaces

- Facebook

Create-React-AppThe o�cial React starter project

JSX is the language of choiceIt combines ECMAScript and HTML markup

import React from 'react'; 

const Greeter = (props) => {     return (         <div>             Hello {props.name}         </div>     ); }; 

export default Greeter;

JSX = Code with markup

ComponentsThe building blocks of a React application

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> 

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

Components & PropsProps are inputs to componentsThey should never be updated

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.   ); 

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} 

Components & StateInternal to a componentCan be used as props for a child component

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.  

ReduxA predictable state container for JavaScript apps

Redux principlesSingle source of truthState is read-onlyChanges are made with pure functions

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) => { 

MobXSimple, scalable state management

MobX principlesSingle source of truthState is observableReact components are observers

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 }) => { 

Is React reactive?     NO!     But it's a great library for building user interfaces

And MobX is reactive!

@mauricedb