Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Is React reactive?

3 953 vues

Publié le

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

Publié dans : Technologie
  • Identifiez-vous pour voir les commentaires

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

×