Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Is React reactive?

2,578 views

Published on

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

Published in: Technology
  • Be the first to comment

Is React reactive?

  1. 1. The Productive Developer Guide to React
  2. 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. 3. Is React reactive?
  4. 4. RxJS map operator
  5. 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. 6. import React from 'react';  const Greeter = (props) => {      return (          <div>              Hello {props.name}          </div>      );  };  export default Greeter; A functional React component
  7. 7. WHAT IS REACT?
  8. 8. React is a JavaScript library for building user interfaces - Facebook
  9. 9. Create-React-App The o cial React starter project
  10. 10. JSX is the language of choice It combines ECMAScript and HTML markup
  11. 11. import React from 'react';  const Greeter = (props) => {      return (          <div>              Hello {props.name}          </div>      );  };  export default Greeter; JSX = Code with markup
  12. 12. ComponentsThe building blocks of a React application
  13. 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. 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. 15. Components & Props Props are inputs to components They should never be updated
  16. 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. 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. 18. Components & State Internal to a component Can be used as props for a child component
  19. 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. 20. ReduxA predictable state container for JavaScript apps
  21. 21. Redux principles Single source of truth State is read-only Changes are made with pure functions
  22. 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. 23. MobXSimple, scalable state management
  24. 24. MobX principles Single source of truth State is observable React components are observers
  25. 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. 26. Is React reactive?      NO!     But it's a great library for building user interfaces And MobX is reactive!
  27. 27. @mauricedb

×