Is React reactive?
-
Upload
maurice-beijer -
Category
Technology
-
view
152 -
download
0
Transcript of Is React reactive?
![Page 1: Is React reactive?](https://reader036.fdocuments.us/reader036/viewer/2022062522/58870ee41a28abf2228b5ba3/html5/thumbnails/1.jpg)
The ProductiveDeveloper Guide to
React
![Page 2: Is React reactive?](https://reader036.fdocuments.us/reader036/viewer/2022062522/58870ee41a28abf2228b5ba3/html5/thumbnails/2.jpg)
Maurice de BeijerThe Problem SolverMicrosoft Azure MVPFreelance developer/instructorTwitter: @mauricedb & @React_TutorialWeb: http://www.TheProblemSolver.nlE-mail: [email protected]
Who am I?
![Page 3: Is React reactive?](https://reader036.fdocuments.us/reader036/viewer/2022062522/58870ee41a28abf2228b5ba3/html5/thumbnails/3.jpg)
Is React reactive?
![Page 4: Is React reactive?](https://reader036.fdocuments.us/reader036/viewer/2022062522/58870ee41a28abf2228b5ba3/html5/thumbnails/4.jpg)
RxJS map operator
![Page 5: Is React reactive?](https://reader036.fdocuments.us/reader036/viewer/2022062522/58870ee41a28abf2228b5ba3/html5/thumbnails/5.jpg)
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
![Page 6: Is React reactive?](https://reader036.fdocuments.us/reader036/viewer/2022062522/58870ee41a28abf2228b5ba3/html5/thumbnails/6.jpg)
import React from 'react';
const Greeter = (props) => { return ( <div> Hello {props.name} </div> ); };
export default Greeter;
A functional React component
![Page 7: Is React reactive?](https://reader036.fdocuments.us/reader036/viewer/2022062522/58870ee41a28abf2228b5ba3/html5/thumbnails/7.jpg)
WHAT IS REACT?
![Page 8: Is React reactive?](https://reader036.fdocuments.us/reader036/viewer/2022062522/58870ee41a28abf2228b5ba3/html5/thumbnails/8.jpg)
React is a JavaScript libraryfor building user interfaces
![Page 9: Is React reactive?](https://reader036.fdocuments.us/reader036/viewer/2022062522/58870ee41a28abf2228b5ba3/html5/thumbnails/9.jpg)
Create-React-AppThe o�cial React starter project
![Page 10: Is React reactive?](https://reader036.fdocuments.us/reader036/viewer/2022062522/58870ee41a28abf2228b5ba3/html5/thumbnails/10.jpg)
JSX is the language of choiceIt combines ECMAScript and HTML markup
![Page 11: Is React reactive?](https://reader036.fdocuments.us/reader036/viewer/2022062522/58870ee41a28abf2228b5ba3/html5/thumbnails/11.jpg)
import React from 'react';
const Greeter = (props) => { return ( <div> Hello {props.name} </div> ); };
export default Greeter;
JSX = Code with markup
![Page 12: Is React reactive?](https://reader036.fdocuments.us/reader036/viewer/2022062522/58870ee41a28abf2228b5ba3/html5/thumbnails/12.jpg)
ComponentsThe building blocks of a React application
![Page 13: Is React reactive?](https://reader036.fdocuments.us/reader036/viewer/2022062522/58870ee41a28abf2228b5ba3/html5/thumbnails/13.jpg)
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>
![Page 14: Is React reactive?](https://reader036.fdocuments.us/reader036/viewer/2022062522/58870ee41a28abf2228b5ba3/html5/thumbnails/14.jpg)
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
![Page 15: Is React reactive?](https://reader036.fdocuments.us/reader036/viewer/2022062522/58870ee41a28abf2228b5ba3/html5/thumbnails/15.jpg)
Components & PropsProps are inputs to componentsThey should never be updated
![Page 16: Is React reactive?](https://reader036.fdocuments.us/reader036/viewer/2022062522/58870ee41a28abf2228b5ba3/html5/thumbnails/16.jpg)
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. );
![Page 17: Is React reactive?](https://reader036.fdocuments.us/reader036/viewer/2022062522/58870ee41a28abf2228b5ba3/html5/thumbnails/17.jpg)
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}
![Page 18: Is React reactive?](https://reader036.fdocuments.us/reader036/viewer/2022062522/58870ee41a28abf2228b5ba3/html5/thumbnails/18.jpg)
Components & StateInternal to a componentCan be used as props for a child component
![Page 19: Is React reactive?](https://reader036.fdocuments.us/reader036/viewer/2022062522/58870ee41a28abf2228b5ba3/html5/thumbnails/19.jpg)
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.
![Page 20: Is React reactive?](https://reader036.fdocuments.us/reader036/viewer/2022062522/58870ee41a28abf2228b5ba3/html5/thumbnails/20.jpg)
ReduxA predictable state container for JavaScript apps
![Page 21: Is React reactive?](https://reader036.fdocuments.us/reader036/viewer/2022062522/58870ee41a28abf2228b5ba3/html5/thumbnails/21.jpg)
Redux principlesSingle source of truthState is read-onlyChanges are made with pure functions
![Page 22: Is React reactive?](https://reader036.fdocuments.us/reader036/viewer/2022062522/58870ee41a28abf2228b5ba3/html5/thumbnails/22.jpg)
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) => {
![Page 23: Is React reactive?](https://reader036.fdocuments.us/reader036/viewer/2022062522/58870ee41a28abf2228b5ba3/html5/thumbnails/23.jpg)
MobXSimple, scalable state management
![Page 24: Is React reactive?](https://reader036.fdocuments.us/reader036/viewer/2022062522/58870ee41a28abf2228b5ba3/html5/thumbnails/24.jpg)
MobX principlesSingle source of truthState is observableReact components are observers
![Page 25: Is React reactive?](https://reader036.fdocuments.us/reader036/viewer/2022062522/58870ee41a28abf2228b5ba3/html5/thumbnails/25.jpg)
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 }) => {
![Page 26: Is React reactive?](https://reader036.fdocuments.us/reader036/viewer/2022062522/58870ee41a28abf2228b5ba3/html5/thumbnails/26.jpg)
Is React reactive? NO! But it's a great library for building user interfaces
And MobX is reactive!
![Page 27: Is React reactive?](https://reader036.fdocuments.us/reader036/viewer/2022062522/58870ee41a28abf2228b5ba3/html5/thumbnails/27.jpg)
@mauricedb